프론트엔드 과제전형 준비: 요구사항 분석부터 README · 테스트 · 제출까지

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

과제전형에서 기능 완성뿐 아니라 요구사항 해석, 코드 구조, 검증, 문서화, 제출 상태까지 평가받을 수 있도록 준비합니다.

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

이번 글에서 배우는 내용

• 요구사항을 필수/선택/해석 필요로 분리
• 시간 제한 안에서 범위 결정
• 기술 선택과 과도한 라이브러리 도입 방지
• commit 단위
• README 실행 방법
• 환경 변수 예시
• 접근성·반응형·오류 상태
• 최소 테스트 전략
• build 확인
• 제출 전 secret/불필요 파일 점검
• known issues와 미완료 범위를 솔직하게 기록

선수 지식

작은 기능의 요구사항과 실행·검증의 차이를 이해하면 됩니다. 이 글의 결과물은 과제 준비 문서이며 실행 가능한 앱이나 제출 완료 ZIP이 아닙니다.

목차

1. 필수 범위와 제출 조건부터 닫기
2. 독립 실습과 완성 예시
3. 자주 발생하는 문제와 해결
4. 학습 완료 체크리스트
5. TaskFlow 누적 적용
6. 완료 체크포인트
7. 다음 학습

필수 범위와 제출 조건부터 닫기

요구사항을 필수·선택·해석 필요로 나눕니다. 저장 범위·오류 UX·외부 API·인증처럼 해석에 따라 구현이 달라지는 부분은 질문하고, 답을 받지 못하면 채택한 가정과 한계를 README에 적습니다.

시간 안에 필수 기능을 닫을 수 있도록 작은 변경 단위로 기록합니다. 기술은 과제의 지정 조건과 기존 저장소를 우선하고, 설명하기 어려운 라이브러리를 장식으로 추가하지 않습니다. 검증은 핵심 정상 흐름뿐 아니라 빈 상태·오류·입력 경계·키보드·좁은 화면도 포함합니다.

README는 환경·설치·실행·검증·가정·미완료를 담습니다. package.json과 lockfile을 확인한 명령만 쓰며, test 스크립트가 없으면 있다고 만들지 않습니다. build 성공과 모든 사용자 흐름의 통과는 다릅니다. 환경 변수가 필요하면 변수명과 공개 가능한 용도만 안내하고 실제 비밀값을 제출하지 않습니다. 실제 제출·외부 API 호출은 과제와 계정의 허용 범위를 따릅니다.

독립 실습과 완성 예시

가상 과제의 제한 시간은 3시간입니다. 필수는 목록 표시·항목 추가·빈 제목 거부, 선택은 애니메이션, 해석 필요는 새로고침 후 저장 유지입니다. 30분이 남았는데 필수 입력 오류 확인과 README가 남았다면 무엇을 우선할지 정하세요.

풀이와 판단 근거

완성 판단: 애니메이션은 하지 않습니다. 먼저 빈 제목 거부와 정상 추가를 확인하고 실행·가정·미완료 상태를 README에 기록합니다. 저장 유지 질문에 답이 없다면 메모리 내 저장이라는 가정을 명시하고, 요구가 영속 저장이었다면 미충족 위험을 숨기지 않습니다.

가상 검증 계획: 빈 목록 안내, 정상 제목 추가, 공백 제목 거부, 중복 클릭 정책, 좁은 화면·키보드 조작을 확인합니다. 실제 수행하지 않은 항목은 미실행으로 남깁니다.

README 명령 예시의 가상 계약은 Node.js 24·pnpm 11.19.0과 dev/lint/build만 제공되는 저장소입니다. 설치는 pnpm install --frozen-lockfile, 실행은 pnpm dev, 정적 검사와 빌드는 pnpm lint·pnpm build입니다. 실제 과제의 계약이 다르면 그 계약으로 바꿉니다.

자주 발생하는 문제와 해결

• 선택 기능에 시간을 모두 사용
• 실행 방법이 없는 README
• .env 실제 값 포함
• 테스트는 없는데 ‘완벽 검증’으로 표현
• 제출 직전 대규모 리팩터링

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

학습 완료 체크리스트

• 필수·선택·해석 필요를 분류했습니다.
• 남은 시간에서 검증·문서화와 선택 구현의 우선순위를 정했습니다.
• README의 명령·가정·미완료와 실제 상태가 일치합니다.

# 과제 준비·README 예시 — 가상 계약
대상: TaskFlow 입력 기능을 소재로 한 문서 연습
필수: 목록 / 추가 / 빈 제목 거부
선택: 애니메이션 — 시간 제약으로 제외
가정: 메모리 내 저장, 새로고침 후 보존하지 않음
질문: 영속 저장이 필수인지 확인 필요
환경: 가상 Node.js 24 / pnpm 11.19.0
설치: pnpm install --frozen-lockfile
실행: pnpm dev, 터미널의 로컬 주소 확인
검사: pnpm lint / pnpm build
test 스크립트: 가상 계약에 없음
검증 계획: 정상 추가·공백 거부·빈 상태·좁은 화면·키보드
실제 검사 결과: 앱을 구현·실행하지 않은 문서 연습
known issues: 영속 저장 미제공, 다른 브라우저 검사 미실행
비밀값: 실제 환경 변수 값 포함 금지
제출 상태: 준비 문서, 실제 과제 제출 아님

career-step-14-take-home

다음 학습

15편 「프론트엔드 기술면접 준비: 프로젝트 · JavaScript · React 질문 설명하기」로 이어집니다. 이번 문서의 사실과 미확인 항목을 다음 회차 입력으로 사용합니다.