다음 단계 로드맵

🎉 30강을 완주했습니다

리액트 입문부터 실전 날씨 앱 완성까지 30강을 마쳤습니다. 이 시점에서 여러분이 알고 있는 것을 정리하고, 앞으로 무엇을 더 배워야 할지 로드맵을 그려봅니다.

지금 여러분이 할 수 있는 것:

• 함수 컴포넌트, Props, State로 UI 구조화
• useState, useEffect, useRef, useContext, useReducer 활용
• 커스텀 훅으로 로직 재사용
• TanStack Query로 서버 데이터 관리
• React Router로 SPA 라우팅
• Zustand로 전역 상태 관리
• Tailwind + shadcn/ui로 일관된 UI
• Vite로 빌드하고 Vercel에 배포

🗺️ 다음 학습 로드맵

레벨 1 — 즉시 시작 (지금 바로)

Next.js 15 App Router 학습이 가장 중요합니다. 지금 시장에서 리액트 개발자 대부분이 Next.js를 사용합니다. 이미 배운 리액트 지식이 그대로 적용되고, 서버 컴포넌트, API Route, 메타데이터 관리가 추가됩니다.

npx create-next-app@latest my-next-app --typescript --tailwind --app

레벨 2 — 3개월 안에

TypeScript 심화: 제네릭, 유틸리티 타입(Partial, Required, Pick, Omit), discriminated union, 조건부 타입을 배우면 코드 품질이 크게 올라갑니다.

테스트 심화: Vitest + RTL 기본은 배웠습니다. 이제 Mock Service Worker(MSW)로 API 모킹하는 통합 테스트와 Playwright로 E2E 테스트를 배우세요.

레벨 3 — 6개월 안에

성능 최적화: React DevTools Profiler로 느린 컴포넌트를 찾고, Core Web Vitals(LCP, FID, CLS)를 이해하고 개선합니다. Lighthouse 점수를 90+으로 만드는 연습을 합니다.

풀스택 이해: Prisma ORM + Supabase 또는 PlanetScale로 데이터베이스를 연결하는 풀스택 앱을 만들어보세요. Next.js API Route나 tRPC를 활용합니다.

💡 실력을 쌓는 가장 효과적인 방법

1. 클론 코딩보다 자신의 앱 만들기

Tutorial Hell이라는 말이 있습니다. 강의는 보는데 직접 만들지 않는 함정입니다. 지금 당장 자신이 실제로 쓰고 싶은 작은 앱을 하나 만들어보세요. 모르는 게 생기면 그때 찾아보는 방식이 훨씬 빠릅니다.

2. 오픈 소스 코드 읽기

GitHub에서 스타가 많은 리액트 프로젝트 소스코드를 읽어보세요. shadcn/ui, cal.com, vercel/next.js 같은 프로젝트의 코드 구조와 패턴을 익히면 빠르게 성장합니다.

3. 에러 메시지 두려워하지 않기

처음에는 에러 메시지가 두렵습니다. 하지만 에러 메시지는 정확히 무엇이 잘못됐는지 알려주는 가이드입니다. 에러 메시지를 읽고, 그것을 그대로 검색하는 습관을 들이세요.

📌 리액트 생태계 핵심 키워드

영역	주요 라이브러리/도구
프레임워크	Next.js 15 (서버 컴포넌트), Remix
서버 상태	TanStack Query v5, SWR
클라이언트 상태	Zustand, Jotai, Redux Toolkit
폼	React Hook Form + Zod
UI 컴포넌트	shadcn/ui, Radix UI, Headless UI
테스트	Vitest, RTL, Playwright, MSW
API 레이어	tRPC, Hono, Axios
배포	Vercel, Netlify, Cloudflare Pages

🌱 마지막으로

리액트 학습 여정에서 가장 중요한 것은 꾸준함입니다. 완벽하게 이해하고 다음으로 넘어가려 하지 마세요. 60~70% 이해하고 넘어가 전체 그림을 보면, 나중에 돌아왔을 때 나머지가 자연스럽게 이해됩니다.

리액트 생태계는 계속 발전하지만 핵심 개념은 변하지 않습니다. 컴포넌트, Props, State, 불변성, 단방향 데이터 흐름 — 이 원칙들을 깊이 이해하면 어떤 변화가 와도 빠르게 적응할 수 있습니다.

30강을 완주한 것을 다시 한 번 축하드립니다. 이제 여러분의 아이디어를 웹 앱으로 만들 수 있습니다. 시작하세요! 🚀

✅ 최종 정리

• 30강에서 배운 것: 컴포넌트부터 성능 최적화, 라우팅, 상태 관리, 배포까지 리액트 핵심 전부.
• 다음 단계: Next.js 15 → TypeScript 심화 → 테스트 심화 → 풀스택.
• 가장 효과적인 성장 방법: 자신만의 앱 만들기 + 오픈 소스 코드 읽기.
• 핵심 원칙(컴포넌트, 불변성, 단방향 흐름)을 깊이 이해하면 생태계 변화에 흔들리지 않습니다.