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-wc

➜ cd micro-frontends-with-wc

➜ corepack enable

➜ pnpm init

➜ corepack use [email protected]

➜ pnpm add turbo -D

workspace 설정하기

# micro-frontends-with-wc/pnpm-workspace.yaml

packages:
  - "teams/*"
  - "apps/*"

Shell 서버 만들기

➜ mkdir apps apps/shell

➜ cd apps/shell

➜ pnpm init

➜ cd ...

➜ pnpm --filter shell add serve

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

각 팀의 서버 만들기

➜ mkdir teams teams/team-home teams/team-jobs

➜ cd teams/team-home

➜ pnpm init

➜ cd ../team-jobs

➜ pnpm init

➜ cd ...

➜ pnpm --filter team-home add serve

➜ pnpm --filter team-jobs add serve

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

{
  "name": "team-jobs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "serve public -p 3002 --cors",
    "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

Web Component 작성하기

class HomeComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });

    const template = document.createElement("template");

    template.innerHTML = `
      <style>
        h2 {
          color: red;
        }
      </style>
      <h2>홈</h2>
      <button id="btn">버튼</button>
    `;

    this.shadowRoot.appendChild(template.content.cloneNode(true));

    this.shadowRoot
      .querySelector("#btn")
      .addEventListener("click", this.onClick);
  }

  onClick() {
    alert("버튼 클릭");
  }
}

customElements.define("home-component", HomeComponent);