리액트
전체 59강 · 8개 Phase. 순서대로 따라오면 돼요.
필수 과정 (부트캠프 코어)
▸ Category A · TypeScript 기초 JS에 가드레일을 붙인다
A-1 A-1: TypeScript 입문 — JS에 붙는 가드레일type과 interface로 API 응답(User·Post·Comment) 타입을 선언하며 JS에 가드레일 두르기 A-2 A-2: TypeScript 심화 ① — 좁히기와 판별 유니온타입 가드와 판별 유니온으로 좋아요 요청 상태를 나누고 never로 빠뜨린 case 잡기 A-3 A-3: TypeScript 심화 ② — 타입 파생과 모듈 위생Pick·Omit 같은 유틸리티 타입으로 PostCardProps를 원본에서 파생해 타입 중복 없애기 A-4 A-4: React 컴포넌트 타이핑 — props·이벤트·children·refprops를 interface로 선언하고 이벤트·children 타이핑에 ref-as-prop까지 붙여 컴포넌트 타입 설계하기 A-5 A-5: 훅 타이핑 — useState 추론·useRef 두 얼굴·useReduceruseState·useRef·useReducer에 타입을 달아 null 함정을 피하고 좋아요·알림을 판별 유니온 액션으로 관리하기 A-6 A-6: 제네릭 컴포넌트와 타입 설정 — 꺾쇠를 직접 만들고, 검사를 켠다제네릭 컴포넌트 List<T>로 CommentList·Feed를 통합하고 tsc --noEmit으로 타입체크 따로 돌리기
▸ Category B · React.js 기초 선언적 렌더링으로 멘탈모델을 다시 짠다
B-1 B-1: React 입문 — 컴포넌트·JSX·props컴포넌트를 함수로, JSX와 props로 정적 PostCard를 살아있는 React 화면으로 옮기기 B-2 B-2: 상태와 이벤트 — useStateuseState로 좋아요 토글을 만들고 배열을 map으로 돌려 피드 리스트를 렌더링하기 B-3 B-3: 컴포넌트 설계 — children·합성·커스텀 훅children과 합성으로 PostCard·Avatar를 쪼개고 커스텀 훅 useLikeToggle로 로직 재사용하기 B-4 B-4: useEffect & 부수효과 — 화면 밖의 일을 다루는 법useEffect와 클린업 함수로 부수효과를 다루고 스크롤 위치 저장 같은 진짜 쓰임새 익히기 B-5 B-5: 폼 & 입력 — 값을 누가 들고 있나React Hook Form의 register·handleSubmit으로 회원가입 폼의 입력값과 검증을 정리하기 B-6 B-6: 스키마 검증 — 검사에서 타입이 나온다Zod 스키마와 zodResolver로 폼에 배포 후에도 살아있는 진짜 검증 붙이기
▸ Category C · React.js 심화 SPA로 Spring Boot API를 소비한다
C-1 C-1: React Router 8 — 주소로 화면을 나눈다React Router의 createBrowserRouter로 홈·회원가입 라우트를 나누고 안 사라지는 헤더 레이아웃 만들기 C-2 C-2: React Router 8 — 주소가 데이터를 데려온다동적 세그먼트와 loader로 화면이 뜨기 전에 데이터부터 불러 게시물 상세와 404를 완성하기 C-3 C-3: 전역 상태 ① — 값을 나르는 문제와 ContextContext로 커스텀 훅이 못 나누는 상태를 공유해 테마를 어디서든 같은 밝기로 읽기 C-4 C-4: 전역 상태 ② — Zustand와 세 갈래 결정서버 상태·클라이언트 상태·URL 3갈래를 나눠 삭제 확인은 Zustand로, 필터는 주소에 담기 C-6 C-6: 서버 상태 ① — Axios·useQuery로 가져온다Axios 인스턴스와 useQuery로 :8090 API에서 피드를 가져오고 로딩·에러 상태를 걷어내기 C-7 C-7: 서버 상태 ② — useMutation·낙관적 업데이트useMutation과 낙관적 업데이트로 좋아요를 먼저 반영하고 삭제가 실패하면 화면을 되돌리기 C-8 C-8: React Compiler 시대의 성능 — 측정 먼저React Compiler가 자동으로 다는 메모이제이션을 DevTools로 확인하고 무거운 페이지를 lazy 분할하기 C-9 C-9: WebSocket 클라이언트 ① — 통로를 연다STOMP로 WebSocket 통로를 열어 한쪽에서 누른 좋아요가 다른 탭에도 실시간으로 뜨게 하기 C-10 C-10: WebSocket 클라이언트 ② — 실시간을 얹는다/user 큐로 나에게만 보내는 1:1 DM과 알림을 붙이고 끊겼다 돌아오면 놓친 것 메우기
▸ Category D · Next.js 16 서버 컴포넌트 · 서버 액션으로 풀스택을 잇는다
D-1 D-1: Next.js 16 입문 — 파일이 화면이 된다app 폴더 구조와 layout.tsx로 탐색·프로필 페이지와 프로필 전용 레이아웃을 만들기 D-2 D-2: Next.js 16 — 그 사이를 오간다next/link와 usePathname으로 안 사라지는 레이아웃을 증명하고 현재 위치·없는 주소·에러 화면 다루기 D-3 D-3: 서버 vs 클라이언트 컴포넌트 ① — 경계를 긋는다기본이 서버 컴포넌트임을 확인하고 좋아요 버튼만 'use client'로 좁혀 브라우저로 가는 JS 줄이기 D-4 D-4: 서버 vs 클라이언트 컴포넌트 ② — 서버가 기다린다서버 컴포넌트에서 곧바로 await fetch로 피드를 불러오고 기다리는 동안 Suspense로 로딩 보여주기 D-5 D-5: 데이터 페칭 & 캐싱 ① — 무엇을 굳히고 무엇을 흘려보낼까Cache Components로 피드는 신선하게 흘려보내고 프로필 메타는 'use cache'로 굳히기 D-6 D-6: 데이터 페칭 & 캐싱 ② — 언제 갈아 끼우고, 요청 때만 아는 것은 어떻게cacheLife·cacheTag로 캐시 수명을 정하고 팔로워 수를 필요할 때만 갈아 끼우기 D-7 D-7: Server Actions & Route Handlers ① — 요청을 받기 시작한다'use server'와 useActionState로 팔로우를 Server Action으로 만들고 없는 사람에겐 404 돌려주기 D-8 D-8: Server Actions & Route Handlers ② — 기다림과 문지기useOptimistic으로 팔로우를 즉시 반영해 되돌리고 proxy로 로그인 안 한 사람 막기 D-9 D-9: 배포 & 최적화 ① — 늦게 도착하는 것들next/image와 next/font로 피드 사진 밀림을 없애고 프로필 제목·OG 태그를 붙이기 D-10 D-10: 배포 & 최적화 ② — 밖으로 내보냅니다멀티스테이지 Dockerfile과 standalone 출력으로 인스타그램 클론을 컨테이너 하나에 담아 배포하기
▸ Category E · UI & 스타일링 Tailwind v4 · Shadcn/UI 디자인 시스템
E-1 E-1: Tailwind CSS v4 — 이름 짓기를 그만두다Tailwind CSS v4 유틸리티 클래스로 손으로 짓던 클래스 이름을 걷어내고 Avatar 다시 스타일링하기 E-2 E-2: Tailwind CSS-first 설정 — 이번엔 값에 이름을 준다@theme로 브랜드 색·간격을 디자인 토큰으로 만들어 피드와 폼을 토큰 유틸리티로 전면 재스타일하기 E-3 E-3: Tailwind 변형 — 유틸리티 앞에 조건을 붙인다hover:·focus-visible: 같은 상태·반응형 변형으로 남은 손 CSS를 걷어내고 피드를 반응형 그리드로 짜기 E-4 E-4: Tailwind 다크모드 — 중단점 토큰과 dark:다크모드 토큰을 얹어 유틸리티 클래스는 한 글자도 안 고치고 dark: 다크모드 완성하기 E-5 E-5: Shadcn/UI 도입 — 설치와 그 여파Shadcn/UI를 설치해 우리 토큰과 화해시키고 밝게·어둡게·시스템 3단 다크모드 토글 만들기 E-6 E-6: Shadcn 컴포넌트로 화면 만들기 — 남이 짠 코드를 열어서 읽는 날복사돼 온 Shadcn Dialog·Avatar·Card로 게시물 모달과 피드를 접근성까지 갖춰 완성하기 E-7 E-7: 인스타 클론 비주얼 완성 패스 — 눈으로 보지 말고 재보는 날반응형 그리드·다크모드·마이크로 인터랙션까지 다듬어 클론을 실제 인스타 수준 비주얼로 마감하기
▸ Category F · 테스팅 테스팅 트로피로 안전망을 짠다
F-1 F-1: 왜 테스트인가 — 이미 있었고, 재봅니다테스팅 트로피로 프레이밍하고 저장소에 이미 쌓인 테스트를 커버리지로 재서 진짜 구멍 찾기 F-2 F-2: 첫 테스트를 쓴다 — 지도가 가리킨 네 곳describe·it·expect와 vi.mock·vi.fn으로 커버리지가 찾은 구멍에 첫 테스트 직접 쓰기 F-3 F-3: 화면을 확인한다 — 글자가 없는 버튼을 어떻게 찾을까React Testing Library의 getByRole과 user-event로 PostCard·좋아요·댓글폼을 사용자 관점으로 테스트하기 F-4 F-4: API 모킹 — 서버 없이 서버를 재현합니다MSW로 네트워크 요청 자체를 가로채 백엔드 없이 피드 로드를 모킹 테스트하기 F-5 F-5: E2E 테스트 — 진짜 브라우저로 한 줄기를 밟습니다Playwright locator와 auto-waiting으로 로그인부터 좋아요·댓글까지 핵심 시나리오를 E2E로 검증하기 F-6 F-6: Storybook — 컴포넌트를 카탈로그로 만듭니다Storybook에 PostCard·Avatar·CommentInput을 카탈로그화하고 addon-vitest로 a11y까지 자동 검사하기
▸ Category G · 인증 & 보안 Better Auth 로그인 · 프론트 보안
G-1 G-1: 프론트엔드 인증 ① — 진짜 로그인을 만듭니다Better Auth로 이메일·비밀번호 로그인을 붙이고 서명된 세션 쿠키로 가짜 로그인 위조 막기 G-2 G-2: 프론트엔드 인증 ② — 문 앞에서proxy.ts로 로그인 안 한 사람을 문 앞에서 막고 보호할 곳·열어둘 곳을 가려 보호 라우트 만들기 G-3 G-3: 프론트엔드 인증 ③ — 신원을 어떻게 들고 다닐까세션 쿠키와 cookieCache의 차이를 이해하고 백엔드 API 호출에 로그인 신원 실어 보내기 G-4 G-4: 프론트엔드 보안 ① — 우리 화면에서 남의 코드가 돈다dangerouslySetInnerHTML이 여는 XSS 위험을 확인하고 댓글·소개글 서식에 살균을 붙여 방어하기 G-5 G-5: 프론트엔드 보안 ② — 미리 알려두는 방법proxy.ts에서 nonce 기반 CSP를 세워 허용 안 한 스크립트가 우리 화면에서 못 돌게 막기 G-6 G-6: 프론트엔드 보안 ③ — 바깥과의 경계CSP가 못 막는 CSRF까지 살펴 Route Handler에 문지기를 세우고 비밀 값 노출 여부 점검하기
▸ Category H · 프로덕션 & 운영 빠르고 · 관찰 가능하고 · 글로벌하게
H-1 H-1: 에러 모니터링 ① — 오류가 우리에게 오게 하는 일Sentry SDK를 붙여 렌더 중 터지는 오류가 우리에게 오게 만들고 에러 경계를 연결하기 H-2 H-2: 에러 모니터링 ② — 나머지 절반과 읽을 수 있게데이터를 불러오다 실패한 오류까지 잡고 Debug ID 소스맵으로 뭉개진 배포본 줄 번호 되돌리기 H-3 H-3: 웹 성능 측정 ① — 재보고 나서 고칩니다LCP·INP·CLS를 브라우저에서 직접 재고 화면이 밀리는 범인을 찾아 고친 뒤 다시 재기 H-4 H-4: 웹 성능 측정 ② — 조건을 바꿔 재고, 사용자에게서 모읍니다INP를 조건 바꿔 Lighthouse와 대조하고 실사용자 추적을 켜서 봉투 안에서 범인 확인하기 H-5 H-5: 번들 최적화 ① — 번들 안을 들여다봅니다번들 treemap으로 우리 코드가 전체의 몇 퍼센트인지 눈으로 확인하기 H-6 H-6: 번들 최적화 ② — 안 쓰는 것을 찾아내고 지킵니다커버리지로 안 쓰는 코드를 이름째 찾아내고 번들 크기에 예산 게이트 걸기 H-7 H-7: 국제화 ① — 언어를 주소로 옮깁니다next-intl로 언어를 주소에 옮겨 한국어·영어·일본어 페이지를 언어별로 미리 렌더링하기 H-8 H-8: 국제화 ② — 글자만 바꾸면 되는 게 아닙니다날짜·숫자를 Intl로 로케일에 맞게 포맷하고 언어별로 깨지는 레이아웃과 RTL까지 고치기 H-9 H-9: 마이크로 프론트엔드 — 화면을 여러 팀이 나눠 만들 때Module Federation으로 좋아요 버튼을 독립 배포되는 원격 컴포넌트로 떼어내 마이크로 프론트엔드 트레이드오프 따지기