Node.js

# Node.js 버전 확인
➜ node -v
v20.9.0

# v20.9.0 가 설치되어 있지 않다면
➜ nvm install 20.9.0

# v20.9.0 를 사용하고 있지 않다면
➜ nvm use 20.9.0

# Node.js 버전 다시 확인
➜ node -v
v20.9.0

npm

# npm 버전 확인
➜ npm -v
10.2.1

# 최신 버전 npm 으로 업그레이드 
➜ npm i [email protected] -g

# npm 버전 다시 확인
➜ npm -v
10.2.1

Create Project Root

➜ mkdir micro-frontends-with-ajax

➜ cd micro-frontends-with-ajax

➜ corepack enable

➜ pnpm init

➜ corepack use [email protected]

➜ pnpm add turbo -D

workspace 설정하기

# pnpm-workspace.yaml

packages:
  - "teams/*"

워크스페이스(팀 서버) 생성하기

➜ mkdir teams

➜ cd teams

➜ pnpm create vite@latest team-home --template vanilla-ts

➜ mkdir team-jobs

➜ cd team-jobs

➜ pnpm init

➜ cd ...

➜ pnpm i

각 팀의 서버를 설정하기

{
  "name": "team-home",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port 3001",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

➜ pnpm --filter team-jobs add serve

{
  "name": "team-jobs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "serve public -p 3002",
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "serve": "^14.2.1"
  }
}

모든 서버를 동시에 띄우기

{
  "$schema": "<https://turbo.build/schema.json>",
  "pipeline": {
    "dev": {
      "cache": false,
      "persistent": true
    },
  }
}

➜ pnpm exec turbo dev

페이지에 프레그먼트를 가져오기 위한 선언하기

import "./style.css";
import { loadFragment } from "./fragment";

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
  <div id="main">메인입니당</div>
  <div
    id="team-jobs-recommendation"
    data-fragment="<http://localhost:3002/jobs/fragments/recommendation>"
  ></div>
`;

#app {
  max-width: 1280px;
  margin: 0 auto;

  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

#main {
  width: 600px;
  height: 600px;

  background-color: white;

  border-radius: 10px;

  color: black;

  text-align: center;
}

#team-jobs-recommendation {
  width: 400px;
  height: 220px;
  background-color: white;
  border-radius: 10px;
}

#team-jobs-recommendation .error {
  color: black;
}