개요계획프로젝트 워크스페이스 셋업Lerna 로 프로젝트 생성Nx 활성화 및 Node Package Manager 를 Npm 에서 Yarn 으로 변경1. lerna.json 파일 수정2. Nx 활성화3. Yarn set berry 버전 적용 및 P’n’P 활성화VSCode 에서 프로젝트 활성화VSCode 에서 ZipFS 플러그인 설치Typescript 적용1. 전체 프로젝트를 위한 Typescript 설치2. VSCode 에서 Typescript 버전 선택NextJS App 및 Packages 생성Packages / Module 관리Lerna 을 이용한 프로젝트 테스트와 빌드
개요
최근 Lerna 가 Nx 의 Nrwl 에 인수된 이후 많은 변화가 있었다.
그동안 Lerna 가 관리가 되고 있지 않아서, Nextjs 를 만들고 관리하는 Vercel 의 Turborepo 를 사용했었다.
그러던 중 2022년 10월 초에 Lerna v6 가 발표되었고, Nx 의 일부 기능이 내장되어 속도가 많이 빨라졌다.
그래거 Lerna 와 Nx 를 사용을 해보기로 한다.
계획
Lerna 를 처음부터 설정해보기 위해, 프로젝트 생성과정부터 작성한다.
작업순서는 아래와 같다.
- Lerna 를 이용하여 프로젝트 폴더 생성
- Nx 활성화
- Yarn 의 Berry 버전 활성화 및 P’n’P 적용
- 코드 이전 및 재작성
그리고 실제로 작업하려는 환경은 다음과 같다.
- Lerna + Nx
- Yarn 3+ (Berry version)
- Typescript
- NextJS
- VSCode 사용
VSCode 를 사용하는 이유에 특별함이 없으며, Yarn berry 버전 적용할 때 IDE 에서 Node Package Manager 를 변경해주어야 하기에 참고자료로 작성한다.
프로젝트 워크스페이스 셋업
Lerna 로 프로젝트 생성
lerna 를 설치해서 사용해도 무방하다. 하지만, npx 를 사용하는 것이 더 편할 것이다.
mkdir project && npx lerna init
Nx 활성화 및 Node Package Manager 를 Npm 에서 Yarn 으로 변경
1. lerna.json 파일 수정
프로젝트 root 폴더에
lerna.json
파일이 생성되어 있을 것이다.해당 파일을 수정할 것이다.
{ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "version": "independent", "npmClient": "yarn", "useNx": true, "useWorkspaces": true }
- Line 3 : version 을 independent 로 바꾸어 주지 않아도 무방하다.
- Line 4 : Yarn 사용을 명시한다.
- Line 5 : Nx 사용을 명시한다.
2. Nx 활성화
npx add-nx-to-monorepo
3. Yarn set berry 버전 적용 및 P’n’P 활성화
아래 명령어를 이용하여 berry 버전을 활성화 시켜준다.
yarn set berry && yarn
VSCode 에서 프로젝트 활성화
아래 사이트를 참고하면, 각 Editor 마다 SDK 를 적용할 수 있도록 문서화가 잘 되어있다.
그 중 우리는 VSCode 에 알맞는 SDK 를 설치할 것이다.
yarn dlx @yarnpkg/sdks vscode
주의!
root 폴더에서 eslint, prettier 등을 먼저 설치한 이후, 위 sdks 를 활성화 시켜주어야 제대로 동작할 것이다.
VSCode 에서 ZipFS 플러그인 설치
pnp 환경을 위해서 필요한 도구이다.
조금 더 자세히 설명을 하자면, pnp 환경에서는 패키지를 zip 파일로 묶어서 관리한다. 그래서 이것을 IDE 에서 문제 없이 사용하려면 아래와 같은 플러그인이 필요하다.

Typescript 적용
여기서부터 많은 분들이 좌절하는 구간이다. 하지만, 몰라서 그렇다. 알고나면 쉽게 설정할 수 있다.
1. 전체 프로젝트를 위한 Typescript 설치
yarn add -D typescript
2. VSCode 에서 Typescript 버전 선택
VSCode 의 예시이며, 다른 IDE 에서도 이와 비슷하게 Node Client 나 Node Package Manager 를 변경할 수 있다.


NextJS App 및 Packages 생성
특이사항은 없다.

next-web
은 NextJS 프로젝트를 생성할때와 같이 직접 생성하면 된다.
react-ui
역시 React Module 생성하듯이 생성하면 된다.
그리고 프로젝트 root 폴더에
tsconfig.json
파일 작성할 때 references
옵션을 활용하면 좋다.Packages / Module 관리
노드 모듈과 패키지는
Yarn
을 이용하여 관리하는 것을 추천한다.Yarn 에는 workspace 라는 기능이 있다. 이를 적극적으로 활용하여 패키지를 설치하고 관리하자.
yarn workspace react-ui add -D @types/react && \ yarn workspace next-web add -D @types/react
Lerna 을 이용한 프로젝트 테스트와 빌드
주의! Lerna 를 이용하면, 패키지를 링크시키고 관리하기 위해서
lerna bootstrap
을 사용했었다. 하지만, 우리는 Yarn 을 이용
한다. 그래서 이를 사용할 필요가 없다.패키지는 Yarn 을 이용하여 관리하지만, 테스트와 빌드는 Lerna 를 이용할 것이다.
npx lerna run test && \ npx lerna run build
만약, next-web 만 빌드하고 싶다면
--scope=next-web
옵션을 이용하면 된다.npx lerna run build --scode=next-web