마이크로 프론트엔드 - Webpack5 Module Federation

1. 프로젝트 초기 세팅하기1) `pnpm init`으로 `package.json` 파일 만들기pnpm init 2) `corepack` 설정 corepack은 Node.js 생태계에서 사용되는 패키지 관리 도구인 npm, yarn, pnpm 과 같은 다양한 패키지 매니저의 버전을 쉽게 관리하고 사용할 수 있도록 도와줍니다. corepack의 주요 역할패키지 매니저의 버전 관리프로젝트별로 사용해야 하는 패키지 매니저의 버전을 지정할 수 있으며, Corepack은 해당 버전을 자동으로 다운로드하고 사용하도록 설정합니다. 이를 통해 각 프로젝트에 맞는 패키지 매니저의 버전을 손쉽게 관리할 수 있습니다.패키지 매니저 설치 자동화Corepack을 사용하면 패키지 매니저를 사전에 설치할 필요 없이, 필요한 버전이..

• format_list_bulleted 프론트엔드 개발
• · 2025. 4. 27.
• textsms

마이크로 프론트엔드 - iframe을 이용한 통합

시나리오1. Team Home이 운영하는 정적 파일을 제공하는 웹 서버 (localhost:3001) - pages: /index.html2. Team Jobs이 운영하는 정적 파일을 제공하는 웹 서버 (localhost:3002) - fragments: /jobs/fragments/recommendation/index.html 루트 프로젝트 초기 세팅다음 명령어를 순차적으로 실행해서 프로젝트를 구축한다.pnpm initcorepack use pnpm@8.10.0pnpm add turbo -D pnpm-workspace.yaml을 통해 워크스페이스 설정을 추가한다. packages: - "teams/*" 모든 서버를 한 번에 실행하기 위해 turbo.json을 추가해준다.{ "$schem..

• format_list_bulleted 프론트엔드 개발
• · 2025. 4. 26.
• textsms

마이크로 프론트엔드 - Web Component를 활용한 Fragment 통합

시나리오1. Team Home이 운영하는 정적 파일을 제공하는 웹 서버 (localhost:3001) - Web Component: /bundle.js2. Team Jobs이 운영하는 정적 파일을 제공하는 웹 서버 (localhost:3002) - Web Component: /bundle.js3. Web Service를 제공하는 Shell App (localhost:3000) - page: /index.html 루트 프로젝트 초기 세팅다음 명령어를 순차적으로 실행해서 프로젝트를 구축한다.pnpm initcorepack use pnpm@8.10.0pnpm add turbo -D pnpm-workspace.yaml을 통해 워크스페이스 설정을 추가한다.packages: - "teams/*"..

• format_list_bulleted 프론트엔드 개발
• · 2025. 4. 26.
• textsms

마이크로 프론트엔드 - SSI (Server Side Includes)를 이용한 프레그먼트 통합

시나리오1. Team Home이 운영하는 정적 파일을 제공하는 웹 서버 (localhost:3001) - pages: /index.html2. Team Jobs이 운영하는 정적 파일을 제공하는 웹 서버 (localhost:3002) - fragments: /jobs/fragment/recommendation/index.html3. Nginx Reverse Proxy Server (localhost:3000) - Nginx를 Docker로 실행 루트 프로젝트 초기 세팅다음 명령어를 순차적으로 실행해서 프로젝트를 구축한다.pnpm initcorepack use pnpm@8.10.0pnpm add turbo -D `pnpm-workspace.yaml`을 통해 워크스페이스 설정을 추가한다.pac..

• format_list_bulleted 프론트엔드 개발
• · 2025. 4. 26.
• textsms

마이크로 프론트엔드 - Nginx의 Reverse Proxy를 활용하여 여러 페이지 통합하기

시나리오1. Team Home이 운영하는 정적 파일을 제공하는 웹 서버 (localhost:3001) - pages: /index.html2. Team Jobs이 운영하는 정적 파일을 제공하는 웹 서버 (localhost:3002) - pages: /jobs/index.html3. Team Network이 운영하는 정적 파일을 제공하는 웹 서버 (localhost:3003) - pages: /network/index.html4. Nginx Reverse Proxy Server (localhost:3000) - Nginx를 Docker로 실행 루트 프로젝트 초기 세팅다음 명령어를 순차적으로 실행해서 프로젝트를 구축한다.pnpm initcorepack use pnpm@8.10.0pnp..

• format_list_bulleted 프론트엔드 개발
• · 2025. 4. 26.
• textsms

마이크로 프론트엔드 - Ajax를 활용한 마이크로 프론트엔드 개발

루트 프로젝트 세팅다음 명령어로 pnpm으로 루트 디렉토리에 프로젝트를 세팅해보자pnpm initcorepack use pnpm@8.10.0pnpm add turbo -D 그 다음에 각 팀별로 프로젝트를 세팅하기 위해서 pnpm의 workspace를 지정해주도록 한다.# pnpm-workspace.yamlpackages: - "teams/*" 우리는 home 서비스 팀과 jobs 서비스 팀을 구분해서 작업을 진행할 것이고, home 팀은 vite로 프로젝트를 세팅하고 jobs 팀은 pnpm init으로 프로젝트 세팅을 진행할 것이다. 먼저 루트 디렉토리에 teams 디렉토리를 생성해두자 team-home 프로젝트 세팅pnpm create vite@latest team-home --template va..

• format_list_bulleted 프론트엔드 개발
• · 2025. 4. 26.
• textsms