실전 스택 해부 마스터 로드맵

파트 1: 프론트엔드 (CH.1~30)
├─ 소개 (4)
├─ React 생태계 (8): 폴더·상태·데이터·폼·패턴·스타일·테스트·Storybook
├─ Next.js 프로덕션 (8): App Router·Actions·ISR·미들웨어·이미지·SEO·성능·스트리밍
├─ CSS·디자인 (6): Tailwind·토큰·반응형·애니메이션·a11y·Storybook
└─ 도구 (4): Vite·ESLint·모노레포·보일러플레이트


파트 2: 백엔드 (CH.31~60)
├─ Node.js/Express (8): 아키텍처·인증·업로드·실시간·큐·보안·버저닝·GraphQL
├─ DB 심화 (8): EXPLAIN·인덱스·마이그레이션·Redis·MongoDB·Supabase·정규화·백업
├─ API 설계 (6): RESTful·에러·페이지네이션·보안·OpenAPI·tRPC
└─ 인프라 (8): 클라우드·Docker·CI/CD·시크릿·도메인·모니터링·비용·종합


파트 3: 풀스택 (CH.61~90)
├─ SaaS (10): 멀티테넌시·결제·팀·알림·대시보드·검색·파일·감사·온보딩·종합
├─ 이커머스 (10): 아키텍처·카탈로그·체크아웃·PG·상태머신·재고·리뷰·쿠폰·관리자·종합
└─ 커뮤니티 (10): 피드·채팅·미디어·인터랙션·댓글·모더레이션·알림·프로필·종합


파트 4: 고급 (CH.91~120)
├─ 성능 (10): Web Vitals·이미지·번들·렌더링·캐시·DB·메모리·네트워크·React·Lighthouse
├─ 보안 (10): HTTPS·인증·OWASP·CSP·SQL·XSS·CSRF·파일·의존성·체크리스트
└─ 스케일링 (10): 확장·LB·MSA·이벤트·CQRS·서버리스·데이터·DR·부채·로드맵

[1인 개발자 — 빠른 출시]
필수: CH.1~30 (프론트) + CH.61~62 (SaaS 종합)
선택: CH.39 (DB 튜닝) + CH.93~95 (성능)
시간: 60~80시간


[프론트엔드 시니어]
필수: CH.1~30 + CH.91~100 (성능)
선택: CH.85~90 (커뮤니티 일부)
시간: 80~100시간


[백엔드 시니어]
필수: CH.31~60 + CH.103~110 (보안)
선택: CH.111~120 (스케일)
시간: 100~120시간


[풀스택 시니어]
전체 — 점진적 6개월~1년
필수: CH.1~62, CH.91~110
선택: CH.61~90 적용 도메인
시간: 200~300시간


[테크 리드 / 아키텍트]
전체 + 본인 도메인 심화
필수: CH.103~120 (보안·스케일)
시간: 1년+

[프론트엔드 면접]
- Q: CSR/SSR/SSG 차이? → CH.94
- Q: React 최적화? → CH.99
- Q: 번들 줄이기? → CH.93
- Q: Web Vitals? → CH.91
- Q: 상태 관리? → CH.6
- Q: 테스트? → CH.11


[백엔드 면접]
- Q: REST API 설계? → CH.47
- Q: DB 인덱스? → CH.40
- Q: N+1? → CH.96
- Q: 캐싱 전략? → CH.95
- Q: 인증? → CH.32, 102


[시스템 설계]
- Q: Twitter 설계? → CH.81~82
- Q: Uber 설계? → CH.111~118
- Q: 카카오톡 설계? → CH.83
- Q: 쿠팡 설계? → CH.71~80


[보안 면접]
- Q: OWASP Top 10? → CH.103
- Q: XSS 방어? → CH.106
- Q: CSRF? → CH.107
- Q: HTTPS? → CH.101

[프로젝트 1: SaaS]
1. CH.62 보일러플레이트로 시작
2. CH.61 멀티테넌시 적용
3. CH.62 Stripe 결제
4. CH.65 알림 시스템
5. CH.66 검색
6. CH.69 온보딩
→ 1주~1개월


[프로젝트 2: 이커머스]
1. CH.72 보일러플레이트
2. CH.74 토스페이먼츠
3. CH.75 상태 머신
4. CH.76 재고
5. CH.71 관리자 패널
→ 2주~2개월


[프로젝트 3: 커뮤니티]
1. CH.90 보일러플레이트
2. CH.82 피드 (Pull → Hybrid)
3. CH.83 채팅 (Socket.io)
4. CH.86 댓글
5. CH.87 모더레이션
→ 1~3개월

[Junior → Mid]
- 코드 잘 쓰기
- 단일 기능 완성

[Mid → Senior]
- 시스템 설계 이해 (CH.111~118)
- 성능·보안 의식 (CH.91~110)
- 다른 팀원 멘토

[Senior → Tech Lead]
- 전체 아키텍처 설계
- 비즈니스 trade-off
- 팀 효율성

[Tech Lead → Staff/Principal]
- 회사 단위 영향
- 표준·플랫폼 구축
- 신규 사업 기술 전략

[매주]
- 1개 챕터 복습
- 본인 프로젝트에 1개 패턴 적용
- 의존성 업데이트 확인

[매월]
- 새 라이브러리·도구 1개 시도
- 블로그·트위터로 공유
- 리뷰·피드백 받기

[매분기]
- 사이드 프로젝트 1개 출시
- 컨퍼런스·밋업 참석
- 본인 강점·약점 평가

[매년]
- 새 도메인 학습 (예: ML·DevOps)
- 오픈소스 기여
- 멘토 또는 멘티 1명

포트폴리오에 가장 인상적:

[1] 풀스택 SaaS
- Multi-tenancy + Stripe + 팀 협업
- 100K MAU 운영 가능
- AWS · Terraform · K8s

[2] 실시간 협업 도구 (Notion·Figma 스타일)
- Yjs / Liveblocks
- 실시간 sync
- 오프라인 지원

[3] 분산 시스템 사례
- 메시지 큐 + 서비스 분리
- 분산 트랜잭션
- DR 자동화

[4] AI 통합 제품
- LangChain
- RAG
- 스트리밍 응답

✅ 깊이 우선 — 깊게 1개 vs 얕게 100개
✅ 실전 적용 — 학습만 X, 프로젝트로
✅ 공유 — 가르치며 배우는 것이 가장 빠름
✅ 측정 — Lighthouse, 메트릭, 사용자 피드백
✅ 거인의 어깨 — 검증된 도구 활용
✅ 비즈니스 우선 — 기술은 수단

"코드를 외우지 말고, AI를 지휘하는 언어로 배우라"

→ 120챕터 = 한 번 읽고 끝이 아닌
→ 프로젝트 만들면서 매번 참고하는 사전
→ 본인의 실력으로 체화하는 여정


실전 스택 해부 — 여기서 끝이 아닙니다.
다음은 본인의 코드입니다. 🚀