마이크로 프론트엔드 실습

• Micro Frontends 부터 모노레포까지 대규모 서비스를 위한 프론트엔드 아키텍처

파트 2. 기술 이해를 통한 마이크로 프론트엔드 개념 심화 학습 1: 설계를 위한 모노레포

프론트엔드 프로젝트를 위한 도구 학습하기 1: 패키지 매니저

• npm-link-example Source Code | Guide

• npm-workspaces-example Source Code | Guide

• yarn-classic-workspaces-example Source Code | Guide

• yarn-berry-workspaces-example Source Code | Guide

• pnpm-workspaces-example Source Code | Guide

---

프론트엔드 프로젝트를 위한 도구 학습하기 2: 모노레포 빌드시스템 도구

• lerna-example Source Code | Guide

• nx-example Source Code | Guide

• rush-example Source Code | Guide

• turborepo-example Source Code | Guide

---

프론트엔드 프로젝트를 위한 도구 학습하기 3: 트랜스파일러와 번들러

• babel-example Source Code | Guide

• rollup-example Source Code | Guide

• terser-example Source Code | Guide

• esbuild-example Source Code | Guide

• swc-example Source Code | Guide

• webpack-example Source Code | Guide

• vite-example Source Code | Guide

---

파트 3. 기술 이해를 통한 마이크로 프론트엔드 개념 심화 학습 2: 분해와 통합을 위한 여러 기술 비교

마이크로 프론트엔드를 구현하는 기술 1: 클라이언트에서 ajax 를 이용한 프레그먼트 통합

• micro-frontends-with-ajax Source Code | Guide

---

마이크로 프론트엔드를 구현하는 기술 2: 서버에서 proxy 를 이용한 여러 페이지 통합

• micro-frontends-with-proxy Source Code | Guide

---

마이크로 프론트엔드를 구현하는 기술 3: 서버에서 SSI 를 이용한 프레그먼트 통합

• micro-frontends-with-ssi Source Code | Guide

---

마이크로 프론트엔드를 구현하는 기술 4: 클라이언트에서 Web Components 를 이용한 프레그먼트 통합

• micro-frontends-with-wc Source Code | Guide

---

마이크로 프론트엔드를 구현하는 기술 5: 클라이언트에서 iframe 을 이용한 통합

• micro-frontends-with-iframe Source Code | Guide

---

파트 4. 마이크로 앱 통합의 핵심 기술 Module Federation 예제로 익히기

예제로 익히는 Module Federation 기술 1: 기본 설정

• module-federation-basic-example/step1 Source Code | Guide

• module-federation-basic-example/step2 Source Code | Guide

• module-federation-basic-example/step3 Source Code | Guide

• module-federation-basic-example/step4 Source Code | Guide

---

예제로 익히는 Module Federation 기술 2: 프로덕션을 위한 필수 설정

• module-federation-ts-example Source Code | Guide

• module-federation-isolated-example Source Code | Guide

• module-federation-router-example Source Code | Guide

• module-federation-redux-example Source Code | Guide

---

예제로 익히는 Module Federation 기술 3: 심화 과정

• module-federation-dynamic-example/step1 Source Code | Guide

• module-federation-dynamic-example/step2 Source Code | Guide

---

파트 5. 마이크로 프론트엔드 아키텍처를 이용한 커리어 플랫폼 서비스 프로젝트 함께 만들기: 설계

프로젝트 모노레포 설계

• career-up/step1 Source Code | Guide

---

파트 6. 마이크로 프론트엔드 아키텍처를 이용한 커리어 플랫폼 서비스 프로젝트 함께 만들기: 공통 모듈 및 마이크로 앱 구현하기

공통 모듈 개발하기 1 : UI 라이브러리 패키지 만들기

• UI 라이브러리 패키지 생성 및 설정 Source Code | Guide

• 컴포넌트 제작 및 빌드 Source Code | Guide

---

공통 모듈 개발하기 2 : App Shell 만들기

• App Shell 의 역할 및 패키지 생성 및 설정 Source Code | Guide

• react-router-dom 을 통한 내비게이션 구현 Source Code | Guide

• 공통 레이아웃 설정 및 스타일 충돌을 위한 설정 Source Code | Guide

• App Shell 의 인증 처리 Source Code | Guide

---

마이크로 앱 만들기 1 : 포스팅

• API 서버 생성 및 설정 Source Code | Guide

• 포스팅 서비스 개발하기 Source Code | Guide

---

마이크로 앱 만들기 2 : 교육 컨텐츠

• 기술 스택 선정 및 패키지 생성 및 설정 (edu) Source Code | Guide

• 교육 컨텐츠 서비스 개발하기 Source Code | Guide

---

마이크로 앱 만들기 3 : 인맥 관리

• 기술 스택 선정 및 패키지 생성 및 설정 (network) Source Code | Guide

• 인맥 관리 서비스 개발하기 Source Code | Guide

---

마이크로 앱 만들기 4 : 채용 공고

• 기술 스택 선정 및 패키지 생성 및 설정 (job) Source Code | Guide

• 채용 공고 서비스 개발하기 Source Code | Guide

---

프레그먼트 만들기

• 프레그먼트 공유를 위한 준비 Source Code | Guide

• 일촌 맺기 프레그먼트 컴포넌트 작성 Source Code | Guide

• 추천 채용 공고 프레그먼트 컴포넌트 작성 Source Code | Guide

• 프레그먼트 사용하기 Source Code | Guide

---

파트 7. 마이크로 프론트엔드 아키텍처를 이용한 커리어 플랫폼 서비스 프로젝트 함께 만들기: 통합 및 빌드 배포하기

Module Federation 으로 제작된 마이크로 앱 빌드 및 배포하기

• 마이크로 앱과 프레그먼트 공유를 위한 모듈 페더레이션 설정 Source Code | Guide

• CI/CD 파이프라인 구축 및 자동화 설정 Source Code | Guide

개발 후 배포 과정 시뮬레이션

• 마이크로 앱 추가 개발 후 배포 범위 설정 및 배포 Source Code | Guide

• 프레그먼트 추가 개발 후 배포 범위 설정 및 배포 Source Code | Guide

---