Yarn Workspaces

작성자: 송민종
최종 업데이트: 22.11.13.

🙄모노 레포를 도입하는 이유

이번 프로젝트에서 모노레포를 도입하고자 한 이유는 다음과 같다.

Frontend, Backend가 사용하는 언어(TS)가 동일하며, 둘 다 node환경에서 작업한다.
중복되는 의존성을 하나로 관리할 수 있다. ajax요청에 대한 응답 데이터의 인터페이스나 타입들도 하나의 파일로 관리할 수 있다.

🙄왜 Yarn Berry가 아닌 Yarn을 선택했는가?

Yarn, Npm에 비해 장점이 많은 Yarn Berry는 PnP와 Zero-install이라는 특성으로 매우 효율적인 의존성 관리와 좋은 개발 경험을 제공한다. 빌드 시간도 짧아지므로, CI/CD 관련 유료 서비스를 이용하고 있는 경우 비용 감소의 효과도 있다.

다만, Yarn Berry관련 아티클이나, Yarn Berry를 사용하는 프로젝트가 아직까지 많진 않아서(마이그레이션을 함부로 하기 어려워서인것 같다.), 관련 이슈가 생기면 프로젝트가 적지 않은 시간동안 블럭될 것 같고, 처음 도입해보는 것이기도 해서 기존 환경과 가까운 Yarn Workspaces를 사용하기로 했다.

🚈모노레포 세팅 과정

프로젝트 루트에서 다음 명령어를 입력한다.

yarn init -y

package.json에 다음을 적어준다. client, server, common이라는 세 개의 워크스페이스(패키지와 같은데 yarn에서 이 용어를 사용한다)를 묶어서 관리한다는 의미이다.

{
  ...
  "private": true,
  "workspaces": {
    "packages": ["client", "server", "common"],
  }
}

각 워크스페이스 디렉토리를 생성한 후, 안으로 들어가서 다음 명령어를 입력한다. 나의 경우 client와 common만 테스트를 했다.

// 루트에서
mkdir client
cd client
yarn init -y

// 루트로 돌아와서
mkdir common
cd common
yarn init -y

클라이언트와 서버 워크스페이스에서 공통적으로 사용할 함수를 common에 정의해보았다.

// common/utils/index.js

const commonFn = () => {
  console.log('TEST');
  return 'TEST';
}

export default commonFn;

위 공용 함수를 사용하고자 하는 워크스페이스의 package.json에 다음을 추가한다. common의 package.json에 패키지의 이름과 버전이 작성되어있는데, 그걸 그대로 적으면 된다.

// client/package.json

{
  ...
  dependencies: {
    "common": "1.0.0"
  }
}

다음으로 루트에서 yarn install을 입력하면, client 워크스페이스에서 다음과 같이 파일을 작성하여 에디터가 제대로 인식하는지 확인할 수 있다.

// client/index.js

import commonFn from 'common/utils';

commonFn();

🔥yarn workspace 명령어

yarn 명령어 형태로 사용하던걸 yarn workspace 워크스페이스이름 명령어로 바꿔주기만 하면 된다.

예를들어 다음 명령어는 client 워크스페이스에 리액트와 리액트돔을 설치한다.

yarn workspace client add react react-dom

다음 명령어는 client의 package.json에 정의된 start스크립트를 실행한다. 경로에 상관없이 특정 워크스페이스의 스크립트를 사용할 수 있다.

yarn workspace client start

// 또는

yarn workspace client run start

yarn 명령어 자체는 공식문서 오른쪽에 링크가 잘 정리되어 있으니 참고하자. 자주 사용하는 명령어만 정리해보면 다음과 같다.

// 패키지를 dependencies로 설치한다.
yarn add package_name 

// 패키지를 devDependencies로 설치한다.
yarn add -D package_name

// 스크립트를 실행한다.
yarn run script_name
yarn script_name

// 디펜던시를 설치한다.
yarn install