시니어 풀스택 엔지니어 면접 질문

시니어 레벨에서 기대되는 것

스택 전반의 아키텍처, 기술 리더십, 제공 품질 책임이 요구됩니다.

풀스택 엔지니어 면접 질문 예시

• 기술 면접어떤 로직이 클라이언트에, 어떤 로직이 서버에 속하는지 어떻게 결정하나요?
  좋은 답변이 다루는 것

  • 보안과 데이터 민감도
  • 성능과 반응성(UX)
  • 오프라인 지원 및 낙관적 업데이트
  • 서버 부하와 확장성
  • 상태 유지의 복잡성

  샘플 답변 보기

  클라이언트와 서버 로직의 분리는 보안, 성능, 사용자 경험, 유지보수성의 균형을 고려해야 합니다. 일반적으로 인증, 권한 검증, 데이터 무결성 검사는 서버에서 처리해야 합니다. 민감한 데이터(예: 비밀번호, 결제 정보)는 절대 클라이언트에 노출되지 않아야 합니다. 반면에 UI 상태 관리, 애니메이션, 사용자 입력 임시 저장 등은 클라이언트에서 처리하는 것이 자연스럽습니다. 성능 관점에서 서버 왕복을 줄이기 위해 데이터 캐싱이나 낙관적 업데이트를 클라이언트에서 수행할 수 있지만, 이 경우 동기화 메커니즘이 필요합니다. 서버 부하를 감소시키기 위해 계산 집약적 작업(예: 이미지 리사이징)은 서버보다 클라이언트나 CDN에서 처리하는 것이 유리할 수 있습니다. 오프라인 지원이 필요하다면 클라이언트 측 데이터베이스(예: IndexedDB)와 충돌 해결 로직을 고려해야 합니다. 공통적인 함정은 클라이언트에서 비즈니스 로직을 과도하게 구현하여 보안 취약점과 유지보수 어려움을 초래하는 것입니다. 따라서 데이터 변경이 있는 연산은 항상 서버에서 검증하고, 클라이언트는 사용자 경험 개선을 위한 보조 역할에 집중하는 것이 좋습니다.

• 기술 면접인증과 세션이 엔드투엔드로 어떻게 작동하는지 설명하세요.
  좋은 답변이 다루는 것

  • JWT 또는 세션 쿠키 기반 인증
  • 로그인 흐름: 토큰 발급 및 저장
  • 요청 시 인증 미들웨어
  • 세션 만료 및 갱신
  • CSRF 보호

  샘플 답변 보기

  엔드투엔드 인증 흐름은 일반적으로 사용자가 로그인하면 서버가 JWT(JSON Web Token) 또는 세션 ID를 생성합니다. JWT의 경우 서명된 토큰을 클라이언트에 전달하고, 클라이언트는 이를 로컬 스토리지나 쿠키에 저장합니다. 이후 모든 API 요청의 Authorization 헤더에 포함시켜 서버가 검증합니다. 세션 기반의 경우 서버가 세션 저장소(Redis 등)에 세션 데이터를 저장하고, 클라이언트는 세션 쿠키(Session-ID)를 전송합니다. 서버는 쿠키를 기반으로 세션을 조회하여 인증 상태를 확인합니다. 보안을 위해 HTTPS 사용은 필수이며, JWT는 만료 시간을 짧게 설정하고 리프레시 토큰을 함께 사용합니다. 세션 쿠키는 HttpOnly, Secure, SameSite 플래그를 설정하여 XSS 및 CSRF 공격을 방어합니다. 또한 서버는 로그아웃 시 토큰을 무효화하거나 세션을 삭제해야 합니다. 인증 미들웨어는 모든 보호된 라우트에 적용되며, 유효하지 않은 토큰이나 만료된 세션은 401 Unauthorized를 반환합니다. 흔한 실수는 클라이언트 측에서 JWT를 디코딩하여 신뢰하는 것이며, 서명 검증은 반드시 서버에서 이루어져야 합니다.

• 기술 면접느린 API에 의존하는 느린 페이지를 어떻게 최적화하나요?
  좋은 답변이 다루는 것

  • 서버 측 캐싱(Redis, CDN)
  • 클라이언트 측 캐싱 및 SWR
  • API 요청 배치 및 비동기 로딩
  • 로딩 스켈레톤과 낙관적 업데이트
  • 백엔드 성능 최적화(인덱스, 쿼리 최적화)

  샘플 답변 보기

  느린 API에 의존하는 페이지를 최적화하려면 먼저 개선 가능한 지점을 분석해야 합니다. 첫 단계로 API 응답을 캐싱합니다. 서버 측에서는 Redis 같은 인메모리 캐시를 도입하여 반복되는 요청의 응답 시간을 O(1) 수준으로 줄일 수 있습니다. 정적 콘텐츠는 CDN에 캐싱하고, GET 요청은 Cache-Control 헤더를 설정해 브라우저 캐시를 활용합니다. 클라이언트 측에서는 SWR(Stale-While-Revalidate) 패턴을 사용하여 먼저 캐시된 데이터를 보여주고 백그라운드에서 업데이트합니다. 네트워크 요청 수를 줄이기 위해 여러 API를 배치로 묶는 Batching을 고려하고, GraphQL이나 데이터 로더를 사용해 필요한 필드만 요청할 수 있습니다. 사용자 경험을 위해 로딩 스켈레톤 UI와 낙관적 업데이트를 적용하여 느린 응답을 감춥니다. 또한, 백엔드에서는 데이터베이스 쿼리 최적화(인덱스 추가, N+1 문제 해결)와 비동기 프로세싱을 도입하여 응답 시간을 개선합니다. 공통된 실수는 모든 데이터를 최신으로 유지하려는 강박으로 캐싱을 포기하는 것이며, 적절한 신선도 정책을 수립하는 것이 중요합니다.

• 코딩작은 CRUD 기능을 만드세요: 스키마, API 엔드포인트, UI 폼.
  좋은 답변이 다루는 것

  • 스키마 정의(SQL 테이블: 사용자, 게시글)
  • RESTful API 엔드포인트 설계
  • 서버 구현(Express + SQLite)
  • UI 폼(React 컴포넌트)
  • CRUD 작업별 HTTP 메서드 매핑

  샘플 답변 보기

  다음은 간단한 게시글 CRUD 기능의 예시입니다. 데이터베이스 스키마는 SQLite를 기준으로 users와 posts 테이블을 정의합니다. API 엔드포인트는 RESTful하게 /posts를 리소스로 하여 GET, POST, PUT, DELETE 메서드를 매핑합니다. 서버는 Node.js Express를 사용하며, 각 엔드포인트에서 요청을 처리하고 응답합니다. UI는 React로 구현하며, 폼에서 입력을 받아 API를 호출하고 결과를 목록으로 표시합니다. 코드는 완전하고 실행 가능합니다.

  // 데이터베이스 스키마 (SQLite)
  CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username TEXT UNIQUE NOT NULL
  );
  CREATE TABLE posts (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    user_id INTEGER NOT NULL,
    title TEXT NOT NULL,
    content TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id)
  );
  
  // 서버 코드 (Express)
  const express = require('express');
  const sqlite3 = require('sqlite3');
  const app = express();
  app.use(express.json());
  
  const db = new sqlite3.Database(':memory:');
  db.run('CREATE TABLE posts (id INTEGER PRIMARY KEY AUTOINCREMENT, user_id INTEGER, title TEXT, content TEXT)');
  
  // GET /posts - 모든 게시글 조회
  app.get('/posts', (req, res) => {
    db.all('SELECT * FROM posts', (err, rows) => {
      if (err) return res.status(500).json({ error: err.message });
      res.json(rows);
    });
  });
  
  // POST /posts - 새 게시글 생성
  app.post('/posts', (req, res) => {
    const { user_id, title, content } = req.body;
    db.run('INSERT INTO posts (user_id, title, content) VALUES (?, ?, ?)', [user_id, title, content], function(err) {
      if (err) return res.status(500).json({ error: err.message });
      res.status(201).json({ id: this.lastID });
    });
  });
  
  // PUT /posts/:id - 게시글 수정
  app.put('/posts/:id', (req, res) => {
    const { title, content } = req.body;
    db.run('UPDATE posts SET title = ?, content = ? WHERE id = ?', [title, content, req.params.id], function(err) {
      if (err) return res.status(500).json({ error: err.message });
      if (this.changes === 0) return res.status(404).json({ error: 'Not found' });
      res.json({ updated: this.changes });
    });
  });
  
  // DELETE /posts/:id - 게시글 삭제
  app.delete('/posts/:id', (req, res) => {
    db.run('DELETE FROM posts WHERE id = ?', req.params.id, function(err) {
      if (err) return res.status(500).json({ error: err.message });
      if (this.changes === 0) return res.status(404).json({ error: 'Not found' });
      res.json({ deleted: this.changes });
    });
  });
  
  app.listen(3000, () => console.log('Server running on port 3000'));
  
  // UI 폼 (React 컴포넌트)
  import React, { useState, useEffect } from 'react';
  
  function PostList() {
    const [posts, setPosts] = useState([]);
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');
  
    useEffect(() => {
      fetch('/posts')
        .then(res => res.json())
        .then(setPosts);
    }, []);
  
    const createPost = async () => {
      const res = await fetch('/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ user_id: 1, title, content })
      });
      const data = await res.json();
      setPosts([...posts, { id: data.id, user_id: 1, title, content }]);
      setTitle('');
      setContent('');
    };
  
    const deletePost = async (id) => {
      await fetch(`/posts/${id}`, { method: 'DELETE' });
      setPosts(posts.filter(p => p.id !== id));
    };
  
    return (
      <div>
        <h1>게시글 목록</h1>
        <ul>
          {posts.map(post => (
            <li key={post.id}>
              {post.title} - {post.content}
              <button onClick={() => deletePost(post.id)}>삭제</button>
            </li>
          ))}
        </ul>
        <h2>새 게시글</h2>
        <input value={title} onChange={e => setTitle(e.target.value)} placeholder="제목" />
        <input value={content} onChange={e => setContent(e.target.value)} placeholder="내용" />
        <button onClick={createPost}>생성</button>
      </div>
    );
  }
  
  export default PostList;
  
  // 시간 복잡도: GET /posts는 O(n), 나머지 단일 CRUD는 O(1) (인덱스 사용 시).

• 코딩실패 시 롤백하는 낙관적 UI 업데이트를 구현하세요.
  좋은 답변이 다루는 것

  • 낙관적 업데이트 패턴
  • API 호출 전 UI 즉시 변경
  • 실패 시 이전 상태로 롤백
  • API 응답 대기 중 중복 방지
  • 에러 처리 및 사용자 피드백

  샘플 답변 보기

  낙관적 업데이트는 사용자 경험을 향상시키기 위해 서버 응답을 기다리지 않고 UI를 즉시 업데이트하는 패턴입니다. 구현 시 먼저 현재 상태를 저장(snapshot)하고, UI를 변경합니다. 그 후 API를 호출하고, 성공 시 아무것도 하지 않거나 응답 데이터로 UI를 조정합니다. 실패 시 저장된 스냅샷으로 상태를 복원(rollback)하고 사용자에게 에러를 알립니다. 아래 코드는 좋아요 기능의 예시로, 클릭 시 즉시 카운트를 증가시키고 서버 요청이 실패하면 다시 감소시킵니다.

  import React, { useState } from 'react';
  
  function LikeButton({ postId, initialLikes }) {
    const [likes, setLikes] = useState(initialLikes);
    const [liking, setLiking] = useState(false);
  
    const handleLike = async () => {
      // 낙관적 업데이트: UI 즉시 증가
      const previousLikes = likes;
      setLikes(likes + 1);
      setLiking(true);
  
      try {
        const response = await fetch(`/api/posts/${postId}/like`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' }
        });
        if (!response.ok) throw new Error('Failed to like');
        const data = await response.json();
        // 서버 응답으로 동기화 (선택)
        setLikes(data.likes);
      } catch (error) {
        // 실패 시 롤백
        setLikes(previousLikes);
        console.error('좋아요 실패:', error);
        // 사용자에게 알림
        alert('좋아요 처리 중 오류가 발생했습니다.');
      } finally {
        setLiking(false);
      }
    };
  
    return (
      <button onClick={handleLike} disabled={liking}>
        좋아요 {likes}
      </button>
    );
  }
  
  export default LikeButton;
  
  // 시간 복잡도: O(1) (상태 업데이트), 네트워크 요청은 비동기.

• 시스템 설계실시간 업데이트와 모더레이션을 갖춘 댓글 시스템을 설계하세요.
  좋은 답변이 다루는 것

  • 웹소켓 또는 SSE로 실시간 푸시
  • 메시지 큐(Redis Pub/Sub)로 확장
  • 모더레이션: 사전/사후 검토
  • 악성 콘텐츠 필터링(자동 + 수동)
  • 데이터베이스 스키마와 인덱싱

  샘플 답변 보기

  실시간 댓글 시스템은 웹소켓(예: Socket.IO)을 사용하여 클라이언트와 서버 간 지속적인 연결을 유지합니다. 사용자가 댓글을 작성하면 서버는 이를 데이터베이스에 저장하고, 동시에 해당 게시물을 구독 중인 모든 클라이언트에게 댓글을 전파합니다. 확장성을 위해 Redis Pub/Sub을 사용하여 여러 서버 인스턴스 간 메시지를 동기화할 수 있습니다. 모더레이션은 두 단계로 진행합니다. 첫째, 자동 필터링(욕설, 스팸 패턴)을 적용하여 명백히 위반한 댓글을 차단하거나 플래그합니다. 둘째, 수동 검토가 필요한 경우 관리자 대시보드에 표시합니다. 댓글 테이블에는 id, post_id, user_id, content, status(승인/대기/거절), created_at 등의 컬럼이 필요하며, post_id와 status에 인덱스를 생성합니다. 보안 측면에서 사용자 입력은 이스케이프 처리하고, 속도 제한(rate limiting)을 적용합니다. 흔한 실수는 웹소켓 연결 수가 증가할 때 서버 리소스 고갈을 고려하지 않는 것이며, 연결 관리를 위해 로드밸런서와 스케일아웃을 준비해야 합니다.

• 행동 면접완전히 혼자 출시한 기능에 대해 말해 주세요.
  좋은 답변이 다루는 것

  • 상황 설명: 제품 요구사항과 제약
  • 작업: 설계, 구현, 테스트, 배포를 혼자 수행
  • 결과: 출시 후 성과 및 배운 점
  • 어려움 극복: 기술적 도전과 해결
  • 협업 부재 시 의사결정 프로세스

  샘플 답변 보기

  이전 회사에서 '실시간 알림 시스템'을 혼자서 설계부터 배포까지 전담했습니다. 사용자가 특정 이벤트(예: 메시지 수신)가 발생할 때 푸시 알림을 받아야 했고, 기존에는 폴링 방식으로 서버 부하가 높았습니다. 저는 WebSocket 기반의 알림 서비스를 제안하고, Node.js + Socket.IO로 프로토타입을 작성했습니다. 데이터베이스는 PostgreSQL을 사용하고, 알림 큐는 Redis로 구현했습니다. 도전 과제는 연결이 많은 상황에서의 메모리 관리였는데, 연결별 heartbeat를 도입하고, 오래된 연결을 정리하는 로직을 추가했습니다. 배포는 Docker 컨테이너화하여 AWS ECS에 배포했습니다. 결과적으로 서버 부하는 70% 감소했고, 사용자 만족도가 향상되었습니다. 이 경험을 통해 전체 스택을 이해하고 빠른 의사결정의 중요성을 배웠습니다.

• 행동 면접스택의 어느 부분을 깊이 파고들지 어떻게 결정하나요?
  좋은 답변이 다루는 것

  • 비즈니스 임팩트와 사용자 영향
  • 기술적 부채와 개선 필요성
  • 개인적 학습 목표와 관심사
  • 팀 내 전문성 분배
  • 프로젝트 우선순위와 시간 투자

  샘플 답변 보기

  스택의 특정 부분을 깊이 파고들 때는 비즈니스 요구와 개인 성장의 균형을 고려합니다. 첫째, 현재 병목이 되는 부분이나 사용자에게 가장 큰 영향을 미치는 영역을 우선합니다. 예를 들어, 데이터베이스 쿼리가 느리다면 인덱싱이나 쿼리 최적화를 깊이 파고듭니다. 둘째, 기술적 부채가 쌓인 부분을 해소하여 장기적인 생산성을 높입니다. 셋째, 개인적으로 관심이 있는 기술이나 부족하다고 느끼는 분야(예: 보안, 성능)를 학습 목표로 설정합니다. 또한 팀 내에서 해당 분야의 전문가가 부족하다면 그 역할을 맡아 팀의 역량을 높입니다. 마지막으로, 시간이 많이 소요되는 깊이 있는 탐구는 스프린트 계획에 반영하여 다른 업무와 균형을 맞춥니다. 공통적인 실수는 모든 것을 얕게 아는 것보다 하나를 깊이 아는 것이 낫다고 생각하지만, 실무에서는 너무 깊이 파고들어 다른 중요한 작업을 놓칠 수 있습니다. 따라서 일정과 목표를 명확히 설정하는 것이 중요합니다.

면접관이 평가하는 것

준비 방법

• 깊이 분야를 정하고 분명히 드러내세요 — 어딘가에서 깊이 파는 제너럴리스트가 돋보입니다.
• 요청의 전체 수명 주기를 설명하여 엔드투엔드 이해를 보여 주세요.
• 테스트와 배포를 소홀히 하지 마세요. 풀스택 면접은 코드만이 아니라 제공도 검증합니다.

자주 묻는 질문