테마
마이크로프론트엔드 학습 가이드
대규모 서비스를 위한 프론트엔드 아키텍처: 마이크로프론트엔드부터 모노레포까지
학습 로드맵
전체 구성
Part 1. 이론과 설계 기초
01. 개념과 이론
| 순서 | 파일 | 주제 |
|---|---|---|
| 1 | 웹 개발의 진화 | 모놀리식에서 마이크로프론트엔드까지의 발전 과정 |
| 2 | 모놀리식 vs 마이크로프론트엔드 | 8가지 기준으로 비교 분석 |
| 3 | 장점 분석 | 도입 시 얻을 수 있는 8가지 장점 |
| 4 | 단점 분석 | 감수해야 할 7가지 비용 |
| 5 | 도입 시점과 판단 기준 | 전조 증상 식별과 도입 조건 |
| 6 | 핵심 원칙과 서비스 분리 | 독립적 배포, 통합, 서비스 분리 전략 |
02. 설계 원칙
| 순서 | 파일 | 주제 |
|---|---|---|
| 1 | 통합 방식 6가지 개요 | SSI, 빌드타임, iframe, Web Components, JS, Module Federation |
| 2 | 공통 모듈 설계와 앱쉘 | UI 라이브러리, 인프라 코드, 앱쉘 라우팅 |
| 3 | 디자인 시스템 | 스타일 가이드, 컴포넌트 라이브러리, 패턴 라이브러리 |
Part 2. 모노레포와 도구
03. 모노레포
| 순서 | 파일 | 주제 |
|---|---|---|
| 1 | 레포지토리 전략 비교 | 싱글/멀티/모노레포 비교 |
| 2 | 모노레포 특성과 구조 | 루트 프로젝트, 의존성 관리 |
| 3 | 워크스페이스 관리 | 워크스페이스 개념과 운영 |
04. 패키지 매니저
| 순서 | 파일 | 주제 |
|---|---|---|
| 1 | 프론트엔드 프로젝트 구조 | 프로젝트 구조와 패키지 매니저의 역할 |
| 2 | npm 워크스페이스 | npm workspaces 설정과 활용 |
| 3 | yarn 워크스페이스 | yarn classic/berry 워크스페이스 |
| 4 | pnpm 워크스페이스 | pnpm의 효율적 의존성 관리 |
05. 빌드 시스템 도구
| 순서 | 파일 | 주제 |
|---|---|---|
| 1 | 빌드 도구의 필요성 | 패키지 매니저만으로 부족한 이유 |
| 2 | Lerna | 모노레포 관리의 시초 |
| 3 | NX | 고급 빌드 시스템과 프로젝트 그래프 |
| 4 | Rush | Microsoft의 대규모 모노레포 도구 |
| 5 | TurboRepo | Vercel의 고성능 빌드 시스템 |
Part 3. 트랜스파일러, 번들러, 통합 기술
06. 트랜스파일러와 번들러
| 순서 | 파일 | 주제 |
|---|---|---|
| 1 | 개요 | 트랜스파일러와 번들러의 역할 |
| 2 | Babel | JavaScript 컴파일러 |
| 3 | Rollup과 Terser | 라이브러리 번들링 |
| 4 | esbuild | Go 기반 고속 번들러 |
| 5 | SWC | Rust 기반 웹 컴파일러 |
| 6 | Webpack | 대표 번들러 심화 |
| 7 | Vite | 차세대 개발 도구 |
| 8 | 도구 선택 가이드 | 상황별 도구 선택 기준 |
07. 서버사이드 통합
| 순서 | 파일 | 주제 |
|---|---|---|
| 1 | 통합 기술 발전 과정 | 서버 → 클라이언트 → 모듈 페더레이션 |
| 2 | Ajax 템플릿 통합 | AJAX 기반 프래그먼트 통합 |
| 3 | Nginx 프록시 통합 | 리버스 프록시 기반 페이지 분리 |
| 4 | SSI 서버사이드 인클루드 | Nginx SSI 기반 서버 통합 |
08. 클라이언트사이드 통합
| 순서 | 파일 | 주제 |
|---|---|---|
| 1 | Web Components 통합 | Custom Elements와 Shadow DOM |
| 2 | iframe 통합 | iframe 기반 격리 통합 |
| 3 | 클라이언트 통합 비교 정리 | 통합 방식별 장단점 종합 비교 |
Part 4. 모듈 페더레이션
09. 모듈 페더레이션
| 순서 | 파일 | 주제 |
|---|---|---|
| 1 | Webpack5 모듈 페더레이션 기초 | Host, Remote, Shared 개념 |
| 2 | Vite 모듈 페더레이션 | Vite 환경에서의 MF |
| 3 | 리모트 컴포넌트 로딩 | 런타임 컴포넌트 로딩 |
| 4 | 공유 라이브러리 설정 | shared 설정과 버전 관리 |
| 5 | 상태 공유: Context와 Redux | 앱 간 상태 공유 전략 |
| 6 | TypeScript 연동 | 타입 정의와 안전한 통합 |
| 7 | 동적 로딩과 라우팅 | 동적 서버 지정과 라우팅 |
Part 5. 프로젝트 실습
10. 프로젝트 설계
커리어 플랫폼 서비스 설계 (포스팅, 교육, 네트워킹, 채용)
11. 공통 모듈 구현
UI 라이브러리, 앱쉘, 레이아웃, Auth0 인증
12. 마이크로앱 구현
4개 서비스 (CSS Modules, Emotion, Tailwind, Redux)
13. 프래그먼트 공유
프래그먼트 설계, 컴포넌트 작성, MF 설정
Part 6. 운영
14. 배포와 CI/CD
빌드 자동화, 선택적 배포 전략
15. 성능 최적화
Core Web Vitals, Lighthouse, Chrome DevTools
16. 보안과 운영
보안, 팀 구조, 브랜치 전략, 장애 범위 축소
Part 7. 실전 사례
17. 사례 연구: Dooray
점진적 마이그레이션 사례와 교훈
18. 레거시 통합 기초
ShadowDOM, Webpack UMD 설정
19. 레거시 통합 컴포넌트
CSS 격리, 상태관리, 공유 컴포넌트
20. 레거시 통합 실전
크로스 프로젝트 통합, 커스텀 엘리먼트
사용 기술 스택
| 영역 | 기술 |
|---|---|
| UI 프레임워크 | React, React Router |
| 언어 | TypeScript |
| 상태 관리 | Redux, Zustand |
| 스타일링 | CSS Modules, Emotion, Tailwind CSS |
| 모노레포 | pnpm, Turborepo |
| 번들러 | Webpack 5 (Module Federation) |
| 인증 | Auth0 |
| 배포 | Docker, Nginx |