DevFit

프론트엔드 개발자 기술면접, 내가 쓴 커밋으로 대비하기

프론트엔드 개발자 기술면접은 프레임워크 API를 외웠는지가 아니라, 화면의 상태를 어디에 두고 언제 갱신할지 스스로 정할 수 있는지를 봅니다. 컴포넌트 하나를 나눈 기준, 서버 상태와 UI 상태를 가른 지점, 비동기 응답이 엇갈릴 때의 처리가 모두 질문거리입니다. 이 페이지는 프론트엔드 면접의 조준점을 정리하고, 데브핏(DevFit)이 이용자 본인의 깃허브 커밋에서 그 질문을 어떻게 만들어 내는지 설명합니다.

프론트엔드 면접에서 면접관이 파고드는 지점

상태를 어디에 뒀는가

서버에서 온 데이터를 로컬 state로 복사했는지, 캐시 레이어에 맡겼는지. 전역 스토어에 올린 값이 있으면 «이건 왜 전역이어야 했나요»가 바로 따라옵니다.

리렌더링을 설명할 수 있는가

`useMemo`·`useCallback`·`memo`를 붙인 커밋은 «붙이기 전에 실제로 느렸나요, 어떻게 재셨나요»로 이어집니다. 측정 없이 붙인 최적화는 면접에서 가장 자주 무너지는 답변입니다.

비동기 경쟁 상태를 다뤄 봤는가

검색어를 빠르게 바꿀 때 이전 응답이 나중에 도착하는 경우. `AbortController`나 요청 키가 보이면 «이걸 넣게 된 계기»를, 없으면 «응답이 뒤바뀌면 어떻게 되나요»를 묻습니다.

접근성과 시맨틱을 알고 짰는가

`div`로 만든 버튼, 라벨 없는 입력, 포커스 트랩 없는 모달. `aria-*` 속성이 붙은 커밋은 «이 속성을 고른 이유»를 물어보기 좋은 자리입니다.

번들과 로딩을 고민했는가

동적 import, 이미지 포맷, 폰트 로딩 전략. 코드 스플리팅 커밋이 있으면 «무엇을 기준으로 쪼갰나요»가 나옵니다.

내 커밋에서 나올 수 있는 질문

아래는 프론트엔드 코드에서 자주 만들어지는 형태의 질문입니다. 데브핏(DevFit)은 레포지토리 전체가 아니라 이용자 본인이 작성한 커밋과 diff만 조준해, 질문마다 근거가 되는 커밋·파일 경로를 함께 붙입니다.

  • “이 값을 전역 상태에 둔 이유가 뭔가요? 컴포넌트 안에 두면 안 되는 이유가 있었나요?”
  • “여기 `useMemo`를 붙이셨는데, 붙이기 전에 어떤 지표를 보셨어요?”
  • “이 요청이 연달아 나갈 때 응답 순서가 뒤바뀌면 화면은 어떻게 되나요?”
  • “이 컴포넌트를 이 시점에 분리한 기준이 뭐였나요?”
  • “이 모달은 키보드만으로 닫을 수 있나요?”

코드에 “없는 것”도 질문이 됩니다

면접에서는 짠 것만큼 안 짠 것도 물어봅니다. 데브핏은 아래 같은 부재 신호를 결정론적으로 찾아 질문으로 만듭니다.

  • 렌더링 테스트 없이 UI 로직만 커밋된 구간 → «이 분기를 어떻게 검증하셨어요?»
  • 에러 바운더리나 로딩 상태가 없는 데이터 화면 → «요청이 실패하면 사용자는 뭘 보나요?»
  • lockfile 없이 의존성이 올라간 커밋 → «다른 사람 환경에서 같은 버전이 깔리나요?»

자주 다루는 기술

  • React
  • Next.js
  • TypeScript
  • TanStack Query
  • Vite
  • Tailwind CSS

다만 질문은 기술 이름에서 나오지 않습니다. 같은 React를 써도 커밋마다 고른 선택이 다르고, 면접관이 파고드는 건 그 선택입니다. 그래서 데브핏은 기술 스택별 표준 질문지가 아니라, 겨냥한 채용공고 1건과 내 깃허브(GitHub) 커밋을 함께 읽어서 질문을 만듭니다.

프론트엔드 공고 하나로 시작해 보세요

채용공고 URL을 붙여 넣으면 포지션과 요구 사항을 정리하고, 연결한 레포지토리에서 내가 쓴 커밋을 찾아 예상 질문과 어필 포인트를 만듭니다. 공고 1개가 준비 1회분입니다. 하루 10회까지 무료입니다. 합불 판정이나 지원자 랭킹은 만들지 않고, 최종 판단은 사람이 합니다.

공고 넣고 시작하기

프론트엔드 면접에서 함께 나오는 CS 개념

커밋에서 나온 질문은 대부분 개념 질문으로 이어집니다. 아래 문서는 프론트엔드 면접에서 그 다음 질문으로 자주 넘어가는 주제입니다.

CS 지식백과 전체 보기 →