동블

그래프 뷰

00. Web-Front 학습 로드맵

7 min read

Web-Front 학습 로드맵

목표

  • 이 정리는 프론트엔드 전문 개발자의 모든 내부 구현 지식을 외우기 위한 문서가 아니다.
  • 목표는 백엔드 개발자가 프론트엔드 개발자와 기술적으로 정확히 대화하고, 개인 프로젝트에서 화면, API 연동, 인증, 폼, 배포, 기본 운영 대응을 스스로 설계하고 디버깅할 수 있는 수준이다.
  • 입문 문법 설명은 최소화하되, 개인 프로젝트에서 실제 버그를 만드는 JavaScript, TypeScript, React, CSS, 빌드 환경 함정은 별도 문서에서 반복해서 확인한다.

학습 깊이 기준

  • 반드시 알아야 함
    • 브라우저 제약, HTTP, CORS, Cookie, Web Storage
    • JavaScript 비동기, TypeScript 타입 설계, React 상태와 렌더링
    • API 요청 상태, Form, Validation, Auth, Routing, Build, Deploy
  • 프론트엔드 개발자와 잘 소통하려면 알아야 함
    • 서버 상태와 클라이언트 상태 구분
    • API 계약, 에러 응답, nullable, pagination, 날짜와 타임존
    • UX 상태 모델링, 접근성, 성능 병목, 배포 캐시, 관측성
  • 개인 프로젝트 완성도를 올리려면 알아야 함
    • TanStack Query, React Hook Form, Zod
    • Tailwind 또는 CSS Modules 선택 기준
    • E2E smoke test, MSW, Sentry, 배포 환경 분리
  • 지금은 참고만 해도 되는 것
    • React Fiber 내부, Micro Frontend, 복잡한 animation system, Web Worker, Canvas/WebGL

읽는 기준

  • 각 문서는 “기능 이름을 아는가”보다 “이 상황에서 어떤 선택을 해야 하는가”를 기준으로 읽는다.
  • 코드 예시는 그대로 복사하기보다 저장소, 에러 응답, 배포 환경, 인증 방식에 맞게 조정한다.
  • 프론트엔드 개발자의 고충은 대개 브라우저 제약, API 계약 불명확성, UI 상태 폭발, CSS 예외 상황에서 생긴다.

문서 지도

학습 순서

  • 01. 실전 판단과 02. 문법 함정을 먼저 읽고, 각 주제 파일의 압축 정리 영역만 훑는다.
  • 개인 프로젝트를 시작할 때는 React, API와 서버 상태, Form, Auth, Styling, Build 순서로 상세 섹션을 읽고, 막히는 순간마다 02. 문법 함정으로 되돌아간다.
  • 백엔드 API를 설계할 때는 01. 실전 판단, 06. API와 서버 상태, 13. Testing Collaboration을 함께 본다.
  • 화면 품질이 떨어진다고 느껴질 때는 10. Styling UI Design System, 11. Performance Accessibility를 먼저 확인한다.

확인 질문

  • 이 Web-Front 정리의 목표는 무엇인가?
    • 프론트엔드 전문 지식 전체가 아니라, 백엔드 개발자가 협업과 개인 프로젝트에서 필요한 실전 판단과 디버깅 능력을 갖추는 것이다.
  • 기본 문법 설명을 줄인다는 것은 무엇을 의미하는가?
    • let, props 같은 입문 설명을 줄인다는 뜻이지, 실제 버그를 만드는 문법 함정을 생략한다는 뜻은 아니다.
  • 가장 먼저 읽어야 할 문서는 무엇인가?
    • 01. 백엔드 개발자를 위한 프론트엔드 실전 판단과 02. 백엔드 개발자를 위한 프론트엔드 문법 함정과 디버깅이다.

관련 문서

백링크