[12월] yarn berry를 이용하여 모노레포 구축해보기

모노 레포 실습해보기 (yarn berry)

1. yarn version 변경

 project 폴더를 생성 후 해당 경로로 이동한다.

// project 폴더 생성
mkdir projects

// 해당 폴더로 이동
cd projects

1.2.5 였던 나의 yarn version을 berry로 변경 후 다시 확인해보니 3.3.0로 바뀌어있는 것을 확인할 수 있다.

// yarn 버전 확인
yarn -v

// yarn 버전 변경
yarn set version berry

---

2. yarn workspace package 생성

// package 생성
yarn init -w

package 생성 후, package.json을 보면 아래와 같이 project의 정보를 확인할 수 있다. (name은 나의 project 이름)

// package.json

{
  "name": "yarn-berry-workspace",
  "packageManager": "yarn@3.3.0",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

---

3. root package.json 파일 수정

apps라는 이름의 폴더를 추가하고, package.json의 workspaces에도 추가해준다.

{
  "name": "yarn-berry-workspace",
  "packageManager": "yarn@3.3.0",
  "private": true,
  "workspaces": [
    "apps/*",
    "packages/*"
  ]
}

---

4. apps 폴더에 create next-app project 생성

apps 폴더로 이동하여 next project를 생성한다

cd apps
yarn create next-app

node_modules 폴더가 설치되어 있지 않다면, 반은 성공한 것!  세팅할 때 꼬여서 재설치한 건 비밀 ㅠㅠ

다시 해당 폴더의 root로 와서, 실행이 되는지 확인한다.

// 실행 확인
yarn workspace "next project name" run dev

.next 폴더가 생기면서, 제대로 작동하는 것을 볼 수 있다!

한 가지 신경 쓰이는 것은 github changes에 너무 많은 파일들이 뜨는 것..
gitignore에 추가하였지만, 적용이 되지 않아서 어떻게 해야 할지 고민 중이다.

---

5. typeScript error 해결

pages/index.tsx를 열어보면, typeScript error가 발생하고 있는 것을 확인할 수 있다. 너무너무 무서운 레드빛 세상

yarn berry는 npm과 모듈을 불러오는 방식이 다르기 때문에 생기는 에러라고 한다.
아래의 명령어를 통해 error를 없애보자.

yarn add -D typescript
yarn dlx @yarnpkg/sdks vscode

---

6. yarn PnP 사용을 위해 vscode extension 설치하기

This extension adds support into VSCode to read files directly from zip archives.
It's maintained as part of the Yarn toolchain.
Using this extension together with the Yarn SDK will allow you to seamlessly open & edit files from your cache.

이 확장은 zip 아카이브에서 직접 파일을 읽을 수 있도록 VSCode에 지원을 추가합니다.
Yarn 도구 체인의 일부로 유지 관리됩니다.
이 확장을 Yarn SDK와 함께 사용하면 캐시에서 파일을 원활하게 열고 편집할 수 있습니다.

arcanis.vscode-zipfs를 설치 후, extension.json에 아래의 코드를 추가하자.

// .vscode/extensions.json에 추가

{
  "recommendations": ["arcanis.vscode-zipfs"]
}

---

7. packages/lib 만들어 apps/w eb에서 사용해 보기!

packages/lib에 폴더 세팅을 해준다.

packages/lib/package.json 에

{
  "name": "@web/lib",
  "version": "1.0.0",
  "private": true,
  "main": "./src/index.ts",
  "dependencies": {
    "typescript": "^4.9.3"
  }
}

packages/lib/src/index.ts 에

export const sayHello = () => {
  return "hello from lib";
};

를 추가한다.

그 후, apps/web 에 의존성을 주입하기 위해

apps/web/tsconfig.json에 path를 설정해준다.

"paths": {
      "@web/lib": ["../../packages/lib/src/index"]
    }

그 뒤, 터미널에 의존성 @web/lib을 주입해준다면 

yarn workspace @web/web add @web/lib

apps/web/package.json의 dependencies 부분에 @web/lib이 주입된다.

 apps/web/pages/index.tsx 에서 @web/lib의 sayHello를 import 해온다면, error가 나지 않는다는 것을 확인할 수 있고,

import { sayHello } from "@web/lib";

vscode로는 Ctrl + 왼쪽 마우스를 할 경우, 변수 sayHello가 속해있는 @web/lib의 packages/lib/src/index.ts 파일로 이동하는 것을 볼 수 있다.

---

8. 마지막으로 @web/lib을 구동시켜보자.

yarn workspace @wanted/web run dev

이렇게 해서 @web/web에 @web/lib 의존성을 주입하였음!
한마디로  프로젝트 apps와 packages , 두 개의 프로젝트가 동일한 저장소에 저장된 모노 레포 구조이다.

---

[ 실습 출처 : https://github.com/sungkwangkim/yarn-berry-workspace-test ]

---