[모노레포] 공통 패키지 만들어 의존성 넣기

모노레포를 사용하는 가장 큰 이유는 공통된 작업을 줄이기 위해서라고 생각한다.

예를 들어 Header, Footer, 버튼 스타일 등 한 서비스에서 각각의 프로젝트를 진행한는데에 공통된 컴포넌트나 함수가 있을 때 공통 패키지를 만들어 사용하는 것이 효율 성이 좋을 것이다.

 

packages/lib폴더를 생성하고 package.json파일을 생성하고, typescript를 설치한다.

//루트 디렉토리상태
mkdir packages/lib
cd packages/lib

yarn init

yarn add typescript

packages/lib/package.json파일 이름을 변경하고 main을 추가한다.

"name":"@non/lib",
"main":"./src/index.ts"

packages/lib/tsconfig.json 파일 생성 후 설정 값 넣기

https://www.typescriptlang.org/tsconfig

TSConfig Reference - Docs on every TSConfig option

여길 참조하여 필요한 ts설정을 넣는다.

 

packages/lib/src/index.ts파일 생성 후 함수를 만들어보자.

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

apps에서 packages의존해보기

root로 이동 후

//yarn workspace @apps의 패키지명 add @lib의 패키지명
yarn workspace @non/admin add @non/lib

그리고 apps의 next.js 프로젝트에서 lib을 사용하면 잘 적용 된다.