프론트엔드 부트캠프

지역 행사 탐색 사이트를 문서부터 완성하며 검색·상세·API 실패·모바일 흐름을 직접 구현합니다.

대상

국비 웹 과정 수료생과 비전공 입문자를 대상으로 합니다.

시작 전

파일과 폴더를 만들고 웹 브라우저와 편집기를 사용할 수 있으면 시작합니다. JavaScript 문법은 트랙 안에서 익힙니다.

학습 시간

130시간 안팎

수료하면 할 수 있는 일

• 시맨틱 문서와 이름이 있는 폼을 만들고 키보드로 검증합니다.
• 반응형 목록과 상세에서 긴 콘텐츠와 확대 사용을 처리합니다.
• JavaScript 검색과 API 상태를 연결하고 요청 역전을 방지합니다.
• 상태 소유권과 컴포넌트 책임을 설명합니다.
• 사용자 흐름 테스트·성능 측정·리뷰 근거와 수료 증거를 제공합니다.

모듈

1. 웹 문서와 검색 폼

   지역 행사 소개와 검색 폼을 시맨틱 HTML로 작성합니다.

   12시간 안팎

   지역 행사 소개와 검색 폼을 시맨틱 HTML로 작성합니다.

2. 모바일부터 만드는 레이아웃

   앞 모듈의 소개와 검색 폼에 겹침 없는 목록·상세 레이아웃을 추가합니다.

   12시간 안팎

   앞 모듈의 소개와 검색 폼에 겹침 없는 목록·상세 레이아웃을 추가합니다.

3. JavaScript로 행사 데이터 다루기

   문법을 처음 익히며 행사 목록의 검색·필터·정렬 함수를 만듭니다.

   14시간 안팎

   문법을 처음 익히며 행사 목록의 검색·필터·정렬 함수를 만듭니다.

4. DOM 이벤트와 검색·상세 흐름

   앞 모듈의 데이터 함수를 실제 검색·필터·상세 화면에 연결합니다.

   14시간 안팎

   앞 모듈의 데이터 함수를 실제 검색·필터·상세 화면에 연결합니다.

5. HTTP와 비동기 API 연결

   정적 데이터를 제공된 행사 API로 교체하고 실패를 처리합니다.

   14시간 안팎

   정적 데이터를 제공된 행사 API로 교체하고 실패를 처리합니다.

6. 검색 요청 순서와 상태 모델

   빠른 검색과 화면 이탈에서도 최신 조건에 맞는 결과를 유지합니다.

   12시간 안팎

   빠른 검색과 화면 이탈에서도 최신 조건에 맞는 결과를 유지합니다.

7. 컴포넌트와 상태의 소유권

   동작하는 앱을 ESM 컴포넌트로 분리하고 상태 흐름을 명시합니다.

   14시간 안팎

   동작하는 앱을 ESM 컴포넌트로 분리하고 상태 흐름을 명시합니다.

8. 사용자 흐름과 접근성 테스트

   핵심 흐름을 자동화하고 모바일·키보드 검증을 기록합니다.

   14시간 안팎

   핵심 흐름을 자동화하고 모바일·키보드 검증을 기록합니다.

9. 성능 측정과 변경 리뷰

   측정으로 병목을 찾고 검증 근거가 있는 개선을 제안합니다.

   12시간 안팎

   측정으로 병목을 찾고 검증 근거가 있는 개선을 제안합니다.

10. 완성 프로젝트와 수료 증거

    처음부터 끝까지 실행 가능한 탐색 사이트와 설명 자료를 완성합니다.

    12시간 안팎

    처음부터 끝까지 실행 가능한 탐색 사이트와 설명 자료를 완성합니다.

신입 기본기 대응표

면접 질문 대응

• 시맨틱 HTML을 선택한 이유를 설명합니다. m01-web-document
• 좁은 화면에서 레이아웃이 깨지는 문제의 확인 방법을 설명합니다. m02-responsive-layoutm08-flow-testing
• 키보드만으로 폼을 사용하는 흐름을 설명합니다. m01-web-documentm08-flow-testing
• 검색 요청이 순서와 다르게 도착할 때의 처리 방식을 설명합니다. m06-request-order
• 로딩·오류·빈 결과 화면을 나눈 이유를 설명합니다. m05-async-apim06-request-order
• 컴포넌트의 상태 위치를 정한 사례를 설명합니다. m07-components-state