Nest.js & Next.js(v12) Mororepo 구성

간단하게 프론트와 서버를 둘 다 개발해서 최근에 들은 로그인 관련 강의를 복기하고자 했다.

모노레포로 packages 안에 nextjs와 nestjs를 내장시키고 싶었는데 디렉토리를 한 3번은 날려먹고 나처럼 헤매는 사람이 없길 바라는 마음에 (사실 또 이런 실수를 할까봐 기록📝을 남기고 싶어서) 글을 쓰게 되었다!

워크스페이스 생성

1. 워크스페이스 생성

$ mkdir login-mini-project
$ cd login-mini-project

2. 워크스페이스 설정

# 워크스페이스 폴더에 yarn 3.5.1적용
$ yarn set version 3.5.1

# 적용된 버전 확인하기
$ yarn -v

# 워크스페이스 초기화
$ yarn init -p -w

현재 프로젝트에서 공통적으로 사용하고 있는 버전이 3.5.1인데 다른 분 글을 참고하고 yarn set version berry로 했더니 yarn 4.0.0이 되어 프로젝트 실행이 안되는 바람에 공통 버전으로 맞췄다!

'yarn init'의 파라미터 -p는 private package 설정을 위한 것이고, -w 는 packages 폴더를 기본으로 하는 workspace 생성 옵션!

성공하고 나면 이런 문구가 터미널에 나올 것..!

3. 파일 생성

(1) .gitignore 파일 생성

#.gitignore 파일 생성
$ touch .gitignore

.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
!.yarn/cache

node_modules
dist
build
.env

(2) .yarnrc.yml 파일 생성

$ touch .yarnrc.yml

(3) yarn.lock 파일 생성

$ touch yarn.lock

생성 안해주니 이런 에러가 나더라는ㅠㅠ

4. typescript 설정

$ yarn add -D typescript
$ yarn plugin import typescript

typescript 플러그인은 패키지 설치 시 typescript 정의 패키지 (@types/xxxx) 를 자동으로 찾아 설치해 줘서 편하다

tsconfig.json 파일 생성

$ touch tsconfig.json

5. 옵션 사항

yarn plugin import plugin-workspace-tools

여러가지 워크스페이스 명령들을 추가로 지원해준다..!
전체 테스트, 전체 빌드 등, 전체 패키지들을 스캔하면서 한꺼번에 명령들을 실행 해주는 등의 명령어가 있다

6. workspace 설정, package.json 수정

{
  "name": "login-mini-project",
  "packageManager": "yarn@3.5.1",
  "private": true,
  "scripts": {
    "client": "yarn workspace client",
    "server": "yarn workspace server"
  },
  "workspaces": [
    "packages/*"
  ],
  "devDependencies": {
    "typescript": "^5.2.2"
  }
}

---

Next.js 앱 생성

$ cd packages
$ npx create-next-app@12 --typescript --use-npm client

Next.js 12버전을 설치하려고 정말 애를 많이 먹었는데
흔히 구글링으로 나오는 npx-create-next-app@latest example(프로젝트명) --typescipt으로 하면 무조건 13버전으로 설치되었다😭

그렇다고 npx create-next-app@12만 하니까

이대로 멈춰버리고 package.json만 생기고나서는 아무런 일도 일어나지 않아서
폭풍 구글링을 해서 노드 버전도 올렸다가 내려보고 다해봤는데
--use-npm 붙이는게 만병통치약💊이었음..

• package.json 수정

{	
	"name":"client",
	"packageManager": "yarn@3.3.1", // 항목 추가
	...
}

# root 폴더로 이동
$ yarn install

# 실행 명령어
$ yarn workspace client dev

yarn install 안해주면 이런 에러 박박 남

---

Nest.js 패키지 생성

1. Nest 앱 생성

# packages 폴더로 이동해 server 폴더 생성
$ cd packages

$ nest new server --strict --skip-git

저 --skip-git을 빼먹고 자꾸 앱을 생성해서

자꾸 깃이 연동되는 바람에 커밋이나 푸쉬를 하면 에러가 났었다

2. Nest 앱 설정

{
	"name":"server",
    "packageManager:"yarn@3.5.1" //항목 추가
    ...
 
 }

root 폴더로 이동하여 패키지들을 설치 한다.

# root 폴더로 이동
$ yarn install

서버가 잘 켜지는지 실행해보기

$ yarn workspace server start:dev

---

참고
yarn-monorepo

관련 유투브=>Fullstack TypeScript Monorepo: NestJS, NextJS 13 & tRPC