└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # 마이크로 프론트엔드 실습 2 | 3 | - [Micro Frontends 부터 모노레포까지 대규모 서비스를 위한 프론트엔드 아키텍처](https://fastcampus.co.kr/dev_online_mfa) 4 | 5 | ## 파트 2. 기술 이해를 통한 마이크로 프론트엔드 개념 심화 학습 1: 설계를 위한 모노레포 6 | 7 | ### 프론트엔드 프로젝트를 위한 도구 학습하기 1: 패키지 매니저 8 | 9 | - **npm-link-example** [Source Code](https://github.com/fc-micro-frontends/npm-link-example) | [Guide](https://2woongjae.notion.site/npm-link-example-55ae9aaf3f724021af42546ffcd7d805) 10 | 11 | - **npm-workspaces-example** [Source Code](https://github.com/fc-micro-frontends/npm-workspaces-example) | [Guide](https://2woongjae.notion.site/npm-workspaces-example-c01ebb9eaf334278a14c9994cf5ea571) 12 | 13 | - **yarn-classic-workspaces-example** [Source Code](https://github.com/fc-micro-frontends/yarn-classic-workspaces-example) | [Guide](https://2woongjae.notion.site/yarn-classic-workspaces-example-3406387638424fe7a6ff5cb861bfed38) 14 | 15 | - **yarn-berry-workspaces-example** [Source Code](https://github.com/fc-micro-frontends/yarn-berry-workspaces-example) | [Guide](https://2woongjae.notion.site/yarn-berry-workspaces-example-b9d4d5c47f7d46cfbbb8e0bbcd7260b7) 16 | 17 | - **pnpm-workspaces-example** [Source Code](https://github.com/fc-micro-frontends/pnpm-workspaces-example) | [Guide](https://2woongjae.notion.site/pnpm-workspaces-example-f6eb197c774f4f98a6082d714181ef54) 18 | 19 | --- 20 | 21 | ### 프론트엔드 프로젝트를 위한 도구 학습하기 2: 모노레포 빌드시스템 도구 22 | 23 | - **lerna-example** [Source Code](https://github.com/fc-micro-frontends/lerna-example) | [Guide](https://2woongjae.notion.site/lerna-example-081d2a9b81984f138f37ef37668e3529) 24 | 25 | - **nx-example** [Source Code](https://github.com/fc-micro-frontends/nx-example) | [Guide](https://2woongjae.notion.site/nx-example-df39324a674f407ab909430b238f3419) 26 | 27 | - **rush-example** [Source Code](https://github.com/fc-micro-frontends/rush-example) | [Guide](https://2woongjae.notion.site/rush-example-a9df045e89f346498b9dc4a0d588aaef) 28 | 29 | - **turborepo-example** [Source Code](https://github.com/fc-micro-frontends/turborepo-example) | [Guide](https://2woongjae.notion.site/turborepo-example-09f3037135ad4a3790141b986d484697) 30 | 31 | --- 32 | 33 | ### 프론트엔드 프로젝트를 위한 도구 학습하기 3: 트랜스파일러와 번들러 34 | 35 | - **babel-example** [Source Code](https://github.com/fc-micro-frontends/babel-example) | [Guide](https://2woongjae.notion.site/babel-example-54c151258b814ba5a9ff0f86040b1f07) 36 | 37 | - **rollup-example** [Source Code](https://github.com/fc-micro-frontends/rollup-example) | [Guide](https://2woongjae.notion.site/rollup-example-a19215da135d4bf7ad056906ae10ec16) 38 | 39 | - **terser-example** [Source Code](https://github.com/fc-micro-frontends/terser-example) | [Guide](https://2woongjae.notion.site/terser-example-d3fc46c2806d4602be420928c993e4c0) 40 | 41 | - **esbuild-example** [Source Code](https://github.com/fc-micro-frontends/esbuild-example) | [Guide](https://2woongjae.notion.site/esbuild-example-883087feb882419bb83072449324856b) 42 | 43 | - **swc-example** [Source Code](https://github.com/fc-micro-frontends/swc-example) | [Guide](https://2woongjae.notion.site/swc-example-4d53222895ec436dabe4d82130c39f5d) 44 | 45 | - **webpack-example** [Source Code](https://github.com/fc-micro-frontends/webpack-example) | [Guide](https://2woongjae.notion.site/webpack-example-791c0376c39843f08dddb05adadb12ab) 46 | 47 | - **vite-example** [Source Code](https://github.com/fc-micro-frontends/vite-example) | [Guide](https://2woongjae.notion.site/vite-example-d7d68dc491eb4533a9eb7e073ab92ffd) 48 | 49 | --- 50 | 51 | ## 파트 3. 기술 이해를 통한 마이크로 프론트엔드 개념 심화 학습 2: 분해와 통합을 위한 여러 기술 비교 52 | 53 | ### 마이크로 프론트엔드를 구현하는 기술 1: 클라이언트에서 ajax 를 이용한 프레그먼트 통합 54 | 55 | - **micro-frontends-with-ajax** [Source Code](https://github.com/fc-micro-frontends/micro-frontends-with-ajax) | [Guide](https://2woongjae.notion.site/Ajax-60422c0969834f5db168dc21cda0df55) 56 | 57 | --- 58 | 59 | ### 마이크로 프론트엔드를 구현하는 기술 2: 서버에서 proxy 를 이용한 여러 페이지 통합 60 | 61 | - **micro-frontends-with-proxy** [Source Code](https://github.com/fc-micro-frontends/micro-frontends-with-proxy) | [Guide](https://2woongjae.notion.site/Nginx-proxy-56bf75a7d405442b891b1d9083ee0f92) 62 | 63 | --- 64 | 65 | ### 마이크로 프론트엔드를 구현하는 기술 3: 서버에서 SSI 를 이용한 프레그먼트 통합 66 | 67 | - **micro-frontends-with-ssi** [Source Code](https://github.com/fc-micro-frontends/micro-frontends-with-ssi) | [Guide](https://2woongjae.notion.site/Nginx-SSI-Server-Side-Includes-8c9d64100abf4fb28c1c1bf00eae76f9) 68 | 69 | --- 70 | 71 | ### 마이크로 프론트엔드를 구현하는 기술 4: 클라이언트에서 Web Components 를 이용한 프레그먼트 통합 72 | 73 | - **micro-frontends-with-wc** [Source Code](https://github.com/fc-micro-frontends/micro-frontends-with-wc) | [Guide](https://2woongjae.notion.site/Web-Components-77821011bf724ec78aad73d35a703f9e) 74 | 75 | --- 76 | 77 | ### 마이크로 프론트엔드를 구현하는 기술 5: 클라이언트에서 iframe 을 이용한 통합 78 | 79 | - **micro-frontends-with-iframe** [Source Code](https://github.com/fc-micro-frontends/micro-frontends-with-iframe) | [Guide](https://2woongjae.notion.site/iframe-f1ca17a87e914da4af360cdb0cb567f0) 80 | 81 | --- 82 | 83 | ## 파트 4. 마이크로 앱 통합의 핵심 기술 Module Federation 예제로 익히기 84 | 85 | ### 예제로 익히는 Module Federation 기술 1: 기본 설정 86 | 87 | - **module-federation-basic-example/step1** [Source Code](https://github.com/fc-micro-frontends/module-federation-basic-example/tree/step1) | [Guide](https://2woongjae.notion.site/React-React-081d572755254539af0e8c06bd9b131e) 88 | 89 | - **module-federation-basic-example/step2** [Source Code](https://github.com/fc-micro-frontends/module-federation-basic-example/tree/step2) | [Guide](https://2woongjae.notion.site/12f214bdb97c4f488aea9d842cbe3633) 90 | 91 | - **module-federation-basic-example/step3** [Source Code](https://github.com/fc-micro-frontends/module-federation-basic-example/tree/step3) | [Guide](https://2woongjae.notion.site/Context-97b604eac5774b17a2751d912dcfcdce) 92 | 93 | - **module-federation-basic-example/step4** [Source Code](https://github.com/fc-micro-frontends/module-federation-basic-example/tree/step4) | [Guide](https://2woongjae.notion.site/Lazy-Suspense-ErrorBoundary-6df098d75d4846e8959c83331145680d) 94 | 95 | --- 96 | 97 | ### 예제로 익히는 Module Federation 기술 2: 프로덕션을 위한 필수 설정 98 | 99 | - **module-federation-ts-example** [Source Code](https://github.com/fc-micro-frontends/module-federation-ts-example) | [Guide](https://2woongjae.notion.site/React-TypeScript-8990ceafc1504374b5d0b13e8fb013db) 100 | 101 | - **module-federation-isolated-example** [Source Code](https://github.com/fc-micro-frontends/module-federation-isolated-example) | [Guide](https://2woongjae.notion.site/b21da129cf874d0fa8a91cc0b932051a) 102 | 103 | - **module-federation-router-example** [Source Code](https://github.com/fc-micro-frontends/module-federation-router-example) | [Guide](https://2woongjae.notion.site/feat-react-router-dom-c299accab0724bb5a9c1fff20f2cca6c) 104 | 105 | - **module-federation-redux-example** [Source Code](https://github.com/fc-micro-frontends/module-federation-redux-example) | [Guide](https://2woongjae.notion.site/Redux-React-beaca84997f4451aa9c375e93bb1b213) 106 | 107 | --- 108 | 109 | ### 예제로 익히는 Module Federation 기술 3: 심화 과정 110 | 111 | - **module-federation-dynamic-example/step1** [Source Code](https://github.com/fc-micro-frontends/module-federation-dynamic-example/tree/step1) | [Guide](https://2woongjae.notion.site/React-React-c2430ed885f24a5fa26213dd246c6901) 112 | 113 | - **module-federation-dynamic-example/step2** [Source Code](https://github.com/fc-micro-frontends/module-federation-dynamic-example/tree/step2) | [Guide](https://2woongjae.notion.site/React-75c4f7ec2fd946b797b623e0da1cf9f9) 114 | 115 | --- 116 | 117 | ## 파트 5. 마이크로 프론트엔드 아키텍처를 이용한 커리어 플랫폼 서비스 프로젝트 함께 만들기: 설계 118 | 119 | ### 프로젝트 모노레포 설계 120 | 121 | - **career-up/step1** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step1) | [Guide](https://2woongjae.notion.site/turborepo-pnpm-b31ab8ac4cd940d58660c01258a9cbc2) 122 | 123 | --- 124 | 125 | ## 파트 6. 마이크로 프론트엔드 아키텍처를 이용한 커리어 플랫폼 서비스 프로젝트 함께 만들기: 공통 모듈 및 마이크로 앱 구현하기 126 | 127 | ### 공통 모듈 개발하기 1 : UI 라이브러리 패키지 만들기 128 | 129 | - **UI 라이브러리 패키지 생성 및 설정** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step2) | [Guide](https://2woongjae.notion.site/UI-2ff9ecb4a6244a3bb58f060cc110f9d9) 130 | 131 | - **컴포넌트 제작 및 빌드** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step3) | [Guide](https://2woongjae.notion.site/e0ae164cd080463f8a6614bfc848a66a) 132 | 133 | --- 134 | 135 | ### 공통 모듈 개발하기 2 : App Shell 만들기 136 | 137 | - **App Shell 의 역할 및 패키지 생성 및 설정** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step4) | [Guide](https://2woongjae.notion.site/App-Shell-699475f0673f403fbfb784de24e6b199) 138 | 139 | - **react-router-dom 을 통한 내비게이션 구현** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step5) | [Guide](https://2woongjae.notion.site/react-router-dom-85164d4a8c3d4540a1177199a6e87230) 140 | 141 | - **공통 레이아웃 설정 및 스타일 충돌을 위한 설정** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step6) | [Guide](https://2woongjae.notion.site/8f1ec1810b414b37b2b456cf3a4b75d6) 142 | 143 | - **App Shell 의 인증 처리** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step7) | [Guide](https://2woongjae.notion.site/App-Shell-994c9c0c7d2048d9ae5e88d158160c7d) 144 | 145 | --- 146 | 147 | ### 마이크로 앱 만들기 1 : 포스팅 148 | 149 | - **API 서버 생성 및 설정** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step8) | [Guide](https://2woongjae.notion.site/API-2130b086603242248a8f7bdf44c8c076) 150 | 151 | - **포스팅 서비스 개발하기** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step9) | [Guide](https://2woongjae.notion.site/2a28351ebf7e496b8a2cc7353d66c57b) 152 | 153 | --- 154 | 155 | ### 마이크로 앱 만들기 2 : 교육 컨텐츠 156 | 157 | - **기술 스택 선정 및 패키지 생성 및 설정 (edu)** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step10) | [Guide](https://2woongjae.notion.site/edu-aeab6bcefbf1494eb35c91f71c45a43c) 158 | 159 | - **교육 컨텐츠 서비스 개발하기** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step11) | [Guide](https://2woongjae.notion.site/e8e675113feb4265b03018d62f6ccab5) 160 | 161 | --- 162 | 163 | ### 마이크로 앱 만들기 3 : 인맥 관리 164 | 165 | - **기술 스택 선정 및 패키지 생성 및 설정 (network)** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step12) | [Guide](https://2woongjae.notion.site/network-068ff8f7b45543e081a44ec8eeab1a69) 166 | 167 | - **인맥 관리 서비스 개발하기** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step13) | [Guide](https://2woongjae.notion.site/7564775bae794366baf0a39fa4d0cdaf) 168 | 169 | --- 170 | 171 | ### 마이크로 앱 만들기 4 : 채용 공고 172 | 173 | - **기술 스택 선정 및 패키지 생성 및 설정 (job)** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step14) | [Guide](https://2woongjae.notion.site/job-01bccced70b94ec1ac657d2d783d77c7) 174 | 175 | - **채용 공고 서비스 개발하기** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step15) | [Guide](https://2woongjae.notion.site/9e7b98cd663c4dbaa1fa823b610dc29c) 176 | 177 | --- 178 | 179 | ### 프레그먼트 만들기 180 | 181 | - **프레그먼트 공유를 위한 준비** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step16) | [Guide](https://2woongjae.notion.site/000881c19e7341db9a71cb3178cc8b19) 182 | 183 | - **일촌 맺기 프레그먼트 컴포넌트 작성** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step17) | [Guide](https://2woongjae.notion.site/3f7d3498309b423b96311a01e5838b2d) 184 | 185 | - **추천 채용 공고 프레그먼트 컴포넌트 작성** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step18) | [Guide](https://2woongjae.notion.site/f4ed2fbb0ff844c9a559120085285e70) 186 | 187 | - **프레그먼트 사용하기** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step19) | [Guide](https://2woongjae.notion.site/533068799bf34259ad9a9dab7f6e2933) 188 | 189 | --- 190 | 191 | ## 파트 7. 마이크로 프론트엔드 아키텍처를 이용한 커리어 플랫폼 서비스 프로젝트 함께 만들기: 통합 및 빌드 배포하기 192 | 193 | ### Module Federation 으로 제작된 마이크로 앱 빌드 및 배포하기 194 | 195 | - **마이크로 앱과 프레그먼트 공유를 위한 모듈 페더레이션 설정** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step20) | [Guide](https://2woongjae.notion.site/d5ea3ea1d6dc4e699f5383bb31ccc08e) 196 | 197 | - **CI/CD 파이프라인 구축 및 자동화 설정** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step21) | [Guide](https://2woongjae.notion.site/CI-CD-766223f06ef04512bf1bd994f97cb903) 198 | 199 | ### 개발 후 배포 과정 시뮬레이션 200 | 201 | - **마이크로 앱 추가 개발 후 배포 범위 설정 및 배포** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step22) | [Guide](https://2woongjae.notion.site/759e33293b3d47d59179bd4527a455a4) 202 | 203 | - **프레그먼트 추가 개발 후 배포 범위 설정 및 배포** [Source Code](https://github.com/fc-micro-frontends/career-up/tree/step23) | [Guide](https://2woongjae.notion.site/a775714192fa4163977facf6d847ca1c) 204 | 205 | --- 206 | --------------------------------------------------------------------------------