ROADMAP

기초 이후 학습은 여섯 축으로 나눠 쌓는다

모든 도구를 한 번에 배우기보다, 지금 만드는 앱에서 필요한 축을 고르고 작은 실습으로 검증한다.

핵심 심화

렌더링이 언제 일어나는지 설명할 수 있을 때 훅 사용이 안정된다.

  • 먼저useReducer, Context, ref
  • 실습복잡한 폼 상태 분리

상태 관리

클라이언트 상태와 서버 상태를 나누면 라이브러리 선택이 쉬워진다.

  • 먼저Redux Toolkit, Zustand
  • 실습캐시와 전역 설정 분리

라우팅

페이지 구조가 커지면 중첩 라우트와 인증 흐름을 먼저 설계한다.

  • 먼저동적 경로, 보호 라우트
  • 실습목록과 상세 페이지 연결

테스트

버튼 클릭, 입력, 로딩 상태처럼 사용자가 보는 결과부터 검증한다.

  • 먼저RTL, Jest, E2E
  • 실습검색과 저장 흐름 테스트

성능

측정 없이 최적화하지 않고, 느린 화면의 원인을 먼저 좁힌다.

  • 먼저분할, 가상화, 번들 분석
  • 실습긴 목록 렌더링 개선

프레임워크

SEO, 초기 로딩, 배포 요구가 생기면 렌더링 전략까지 확장한다.

  • 먼저Next.js, Remix, Astro
  • 실습정적 페이지와 API 연결
추천 시작 순서
Core→State→Route→Test→Perf→Framework