프론트엔드 기술면접 준비: 프로젝트 · JavaScript · React 질문 설명하기

커리어·포트폴리오 · 15 / 19

외운 정의를 말하는 것이 아니라 프로젝트 경험과 기본 개념을 연결해 질문의 깊이에 따라 설명하는 연습을 합니다.

상단에서는 이 주제의 판단 기준을 가상 사례와 완성 예시로 연습합니다. 이전 회차의 문서는 필요 없습니다. 하단의 TaskFlow 누적 적용에서는 같은 기준으로 자신의 포트폴리오 자료를 이어서 만듭니다. TaskFlow는 학습용 프로젝트 사례이며 예시 경력·성과를 자신의 사실로 사용하지 않습니다.

이번 글에서 배우는 내용

• 30초 / 2분 / 5분 설명 단계
• 프로젝트 전체 구조 설명
• 기술 선택 이유와 대안
• JavaScript 실행 흐름 설명
• React 상태·렌더링·데이터 흐름 설명
• API·인증·캐시·배포 질문 연결
• 모르는 질문에서 아는 범위와 추론 범위 구분
• whiteboard/말로 코드 설명
• 디버깅 질문 대응
• 면접 후 질문 기록과 복습

선수 지식

설명할 프로젝트 하나와 JavaScript·React의 기본 학습 경험이 있으면 됩니다. 모르는 개념은 먼저 해당 과정에서 보완하고 이 글에서는 답변 구조를 연습합니다.

목차

1. 짧은 결론에서 근거와 한계로 확장하기
2. 독립 실습과 완성 예시
3. 자주 발생하는 문제와 해결
4. 학습 완료 체크리스트
5. TaskFlow 누적 적용
6. 완료 체크포인트
7. 다음 학습

짧은 결론에서 근거와 한계로 확장하기

30초 답변은 문제·선택·결과, 2분 답변은 제약·대안·검증, 5분 답변은 코드 위치·실패한 선택·한계를 확장합니다. 시간은 연습 기준이며 질문의 범위와 면접자의 추가 질문에 맞춰 줄이거나 늘립니다.

프로젝트 구조는 화면 입력→상태 소유자→데이터 흐름→화면 반영으로 그려 설명합니다. API·인증·캐시·배포 질문도 실제 사용한 경계와 검증 자료로 연결합니다. 사용하지 않은 기술은 일반 지식과 프로젝트 경험을 구분합니다.

원문의 ‘reducer+Context에서 Zustand로 옮겼다’는 답변은 실제 전환한 사람에게만 맞습니다. 모든 TaskFlow 독자가 그 전환을 수행했다고 가정하지 않습니다. 모르는 질문에는 아는 범위를 말하고 추론임을 표시한 뒤 확인 방법을 제시합니다. 면접 후에는 비공개 문제를 복사하지 말고 부족한 개념과 자신의 답변 문제를 기록합니다.

상태 공유의 개념을 확인할 때는 React 공식 상태 공유 안내를 참고합니다. 공식 개념이 맞는 것과 본인이 그 구조를 실제 구현한 것은 별도로 확인합니다.

독립 실습과 완성 예시

독립 연습 질문은 ‘왜 작은 입력 UI에서 상태 도구를 더 추가하지 않았나요?’입니다. 가상 조건은 한 화면의 입력 상태만 있고 성능 측정은 하지 않았다는 것입니다. 선택 이유와 도구를 다시 검토할 조건을 답하세요.

풀이와 판단 근거

완성 답변: ‘현재 입력 상태는 한 화면에서 사용하므로 상태 소유자를 가까이 두는 것으로 설명할 수 있었습니다. 전역 도구를 추가하면 설정과 사용 규칙도 늘어나므로 지금은 추가하지 않았습니다. 여러 화면에서 같은 UI 상태를 공유하며 전달 경로가 복잡해지면 대안을 비교하겠습니다. 성능이 더 빠르다는 측정 결과가 있는 것은 아닙니다.’

JavaScript·React 설명 연습에서는 ‘비동기 요청의 성공·실패 때 어떤 상태가 바뀌는가’, ‘입력 상태를 어디에 두었으며 왜 그 위치인가’를 자신의 코드와 연결합니다. 정의가 정확한지는 공식 문서로 확인하고, 라이브러리 이름만 바꾼 답을 외우지 않습니다.

자주 발생하는 문제와 해결

• 정의만 암기
• 실제 프로젝트와 다른 기술을 사용했다고 답변
• 모르는 내용을 추측으로 단정
• 모든 답변이 지나치게 길어짐

개인 프로젝트와 실무 경험은 분리합니다. 팀 작업은 내가 맡은 범위와 팀 전체 결과를 따로 쓰고, 근거가 없는 수치·기간·실행 결과는 추가하지 않습니다. 비공개 자료는 익명화만으로 공개 권한이 생기지 않으므로 허용 범위를 먼저 확인합니다.

학습 완료 체크리스트

• 결론·대안·검증 한계의 깊이를 나누어 답했습니다.
• 실제 프로젝트 경험과 일반 지식을 분리했습니다.
• 모르는 부분의 추론과 확인 방법을 명시했습니다.

# 기술면접 노트 — E-DEMO-01 가상 사례
질문: 좁은 화면에서 왜 입력 줄을 세로로 바꿨나요?
30초 답변:
개인 TaskFlow 입력 폼에서 390px일 때 버튼이 영역 밖으로 나갔습니다. 좁은 폭에서는 세로 배치로 입력 공간을 확보했고, 같은 브라우저 390px·1280px에서 영역 안에 보이는지 확인했다는 가상 사례입니다.
2분 확장:
한 줄에서 요소를 축소하는 안도 검토했지만 입력·버튼 공간이 줄어드는 문제가 있었습니다. 세로 배치는 높이가 늘어나는 비용이 있지만 좁은 폭의 넘침을 다루기 쉬워 선택했습니다. 넓은 화면의 기존 배치는 유지했습니다.
5분 확장:
실제 사례로 답할 때는 CSS 변경 위치와 전후 화면을 제시합니다. 본 연습의 E-DEMO-01은 교육용 서술이며 실제 diff가 아닙니다.
검증 한계: 같은 입력·100% 배율·두 폭, 다른 브라우저·실기기·보조기술 미확인
후속 질문: 키보드 검증도 했나요? → 이 증거에는 없으므로 했다고 답하지 않음
다음 보완: 실제 수행 자료에 맞춰 답변과 증거를 교체

career-step-15-technical-interview

다음 학습

16편 「개발자 인성면접 준비: 협업 · 실패 · 갈등 · 개선 경험 답변 만들기」로 이어집니다. 이번 문서의 사실과 미확인 항목을 다음 회차 입력으로 사용합니다.