VAIRODECURRICULUM웹·플랫폼 서가
Frontend Engineering 교재 표지
카탈로그
v1.2.0
교재 기준
Planning 1.4 + Catalog 1.2
기획 점검일
2026.07.27
Web · Platform SchoolWEB-01

Frontend Engineering

component·state·data·접근성·성능·E2E를 갖춘 웹 제품을 만듭니다.

미리보기 가능콘텐츠 검토 중중급
예상 학습 시간
80~120시간
전체 구성
9개 모듈
연결된 학습 경로
2개
첫 모듈 미리보기전체 목차 보기
01

과정 개요

끝까지 배우면 할 수 있는 일

E2E와 배포의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.

  1. semantic HTML과 CSS의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.
  2. component 설계의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.
  3. 상태 관리의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.
  4. data fetching의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.
02

학습 순서

연결된 경로에서의 위치

연결 경로Frontend Engineer13개 과정

접근성과 성능을 갖춘 웹 제품을 설계하고 검증한다.

  1. FND-02컴퓨팅 사고미리보기 가능
  2. FND-03컴퓨터 시스템미리보기 가능
  3. FND-05Git·GitHub미리보기 가능
  4. FND-06안전·보안미리보기 가능
  5. PRG-03JS·TS미리보기 가능
  6. PRG-06자료구조·알고리즘미리보기 가능
  7. PRG-07SQL·DB미리보기 가능
  8. PRG-08SW 공학미리보기 가능
  9. WEB-01Frontend현재 과정
  10. WEB-03Supabase미리보기 가능
  11. WEB-04Vercel미리보기 가능
  12. WEB-05Cloudflare미리보기 가능
  13. QA-01QA 자동화미리보기 가능
경로 최종 프로젝트인증·데이터·접근성·성능·E2E가 있는 웹 제품
연결 경로Full-stack Product Engineer13개 과정

사용자 문제를 프론트부터 운영까지 연결한다.

  1. FND-02컴퓨팅 사고미리보기 가능
  2. FND-03컴퓨터 시스템미리보기 가능
  3. FND-05Git·GitHub미리보기 가능
  4. FND-06안전·보안미리보기 가능
  5. PRG-03JS·TS미리보기 가능
  6. PRG-07SQL·DB미리보기 가능
  7. PRG-08SW 공학미리보기 가능
  8. WEB-01Frontend현재 과정
  9. WEB-02Backend미리보기 가능
  10. WEB-03Supabase미리보기 가능
  11. WEB-04Vercel미리보기 가능
  12. WEB-05Cloudflare미리보기 가능
  13. CAR-01제품 협업미리보기 가능
경로 최종 프로젝트한 사용자 문제를 end-to-end로 출시하고 운영한 제품
03

전체 목차

9개 모듈 개요

현재는 모듈별 목표와 체험 흐름을 공개한 검토판입니다. 전문 해설, 실습, 평가와 제출 기준은 정식 출간 과정에서 확정됩니다.

  1. 01WEB-01-M01

    첫 모듈

    semantic HTML과 CSS

    검토판 미리보기

    semantic HTML과 CSS의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.

    모듈별 시간은 출간 시 확정체험 흐름 예시
    1. 1개념
    2. 2실습
    3. 3평가
    4. 4증거
    첫 모듈 체험
  2. 02WEB-01-M02

    모듈 2

    component 설계

    검토판 미리보기

    component 설계의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.

    모듈별 시간은 출간 시 확정체험 흐름 예시
    1. 1개념
    2. 2실습
    3. 3평가
    4. 4증거
    체험 흐름 보기
  3. 03WEB-01-M03

    모듈 3

    상태 관리

    검토판 미리보기

    상태 관리의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.

    모듈별 시간은 출간 시 확정체험 흐름 예시
    1. 1개념
    2. 2실습
    3. 3평가
    4. 4증거
    체험 흐름 보기
  4. 04WEB-01-M04

    모듈 4

    data fetching

    검토판 미리보기

    data fetching의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.

    모듈별 시간은 출간 시 확정체험 흐름 예시
    1. 1개념
    2. 2실습
    3. 3평가
    4. 4증거
    체험 흐름 보기
  5. 05WEB-01-M05

    모듈 5

    routing과 rendering

    검토판 미리보기

    routing과 rendering의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.

    모듈별 시간은 출간 시 확정체험 흐름 예시
    1. 1개념
    2. 2실습
    3. 3평가
    4. 4증거
    체험 흐름 보기
  6. 06WEB-01-M06

    모듈 6

    form과 validation

    검토판 미리보기

    form과 validation의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.

    모듈별 시간은 출간 시 확정체험 흐름 예시
    1. 1개념
    2. 2실습
    3. 3평가
    4. 4증거
    체험 흐름 보기
  7. 07WEB-01-M07

    모듈 7

    웹 접근성

    검토판 미리보기

    웹 접근성의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.

    모듈별 시간은 출간 시 확정체험 흐름 예시
    1. 1개념
    2. 2실습
    3. 3평가
    4. 4증거
    체험 흐름 보기
  8. 08WEB-01-M08

    모듈 8

    성능 최적화

    검토판 미리보기

    성능 최적화의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.

    모듈별 시간은 출간 시 확정체험 흐름 예시
    1. 1개념
    2. 2실습
    3. 3평가
    4. 4증거
    체험 흐름 보기
  9. 09WEB-01-M09

    모듈 9

    E2E와 배포

    검토판 미리보기

    E2E와 배포의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.

    모듈별 시간은 출간 시 확정체험 흐름 예시
    1. 1개념
    2. 2실습
    3. 3평가
    4. 4증거
    체험 흐름 보기
04

통과 기준

배운 내용을 결과물로 검증합니다

남겨야 할 학습 증거

  • web product
  • a11y report
  • performance report
  • e2e tests

학습 전 확인

별도의 안전 승인 없이 바로 시작할 수 있습니다.

한눈에 보기역량 지도 펼치기3단계 · 9개 역량
01

기반 이해

핵심 구조와 작업 기준을 먼저 세웁니다.

  1. semantic HTML과 CSSsemantic HTML과 CSS의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.
  2. component 설계component 설계의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.
  3. 상태 관리상태 관리의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.
02

핵심 구현

주요 기능을 직접 구현하고 실패 원인을 확인합니다.

  1. data fetchingdata fetching의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.
  2. routing과 renderingrouting과 rendering의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.
  3. form과 validationform과 validation의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.
03

통합·검증

운영 조건에서 통합하고 결과를 증거로 남깁니다.

  1. 웹 접근성웹 접근성의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.
  2. 성능 최적화성능 최적화의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.
  3. E2E와 배포E2E와 배포의 원리와 작업 절차를 설명하고 실행 또는 측정 증거로 검증한다.