fastcampus-plan1/MicroFrontendArchitecture

마이크로 프론트엔드 실습

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