<aside> 👉

초기 세팅의 결과 목표

• [x] client와 server를 분리된 폴더에서 개발할 수 있다.
• [x] root환경에서 client와 server의 dev 모드를 실행할 수 있다.
• [x] vscode에서 저장을 하면 prettier와 eslint가 자동으로 돌아간다. </aside>

Node.js 및 Pnpm 설치

버전 확인

Node.js 설치 방법

위의 다운로드 링크에 들어가서 설치

pnpm 설치 방법

npm install -g pnpm

pnpm 초기화 및 워크스페이스 설정

package.json 파일 생성

pnpm init

package.json 내용 수정

{
  "name": "boolock", // package는 name과 version으로 패키지의 고유성을 판별한다.
  "private": true, // publish 명령 거부
  "packageManager": "[email protected]", // 특정 패키지 매니저를 사용할 떄 특정 패키지와 버전을 지정
  "engines": { // 동작 가능한 node 버전 지정
    "node": ">=20",
  }
}

<aside> 👉

engines field 주의할 점

사용자가 만약 engine-strict config flag를 설정하지 않으면 이 필드는 단지 조언용으로 사용된다. node 버전을 강제하고 싶어서 .npmrc 파일을 추가해 engine-strict flag를 true로 변경했다.

engine-strict=true

</aside>

<aside> 👉

~rc 가 뭘까

bashrc, eslintrc, prettierrc 등 파일 끝에 붙는 rc는 run commands 혹은 run control의 약자다. rc로 끝나는 파일은 보통 명령어의 설정에 대한 내용을 담고 있다.

</aside>

<aside> 👉

preinstall로 npm install 막기 (실패함)

pnpm으로 설치해야 하는데 습관적으로 npm으로 설치하게 되는 경우가 발생했다. 그래서 npm으로 install을 하려고 하면 warning하는 preinstall script를 추가했다.

"preinstall": "if [ \"$(npm_config_user_agent | grep -oP 'pnpm')\" != 'pnpm' ]; then echo '⚠️  This project requires pnpm. Please use pnpm to install dependencies.' && exit 1; fi",

</aside>

폴더 구조 정의

네부캠에서 모노레포를 사용하라고 했고, 클라이언트와 서버 모두 TypeScript로 개발하기로 했기 때문에 다음과 같은 폴더 구조를 설계했다.

project/
├── apps/ # 애플리케이션을 모아두는 폴더
│   ├── client/ # 프론트엔드
│   └── server/ # 백엔드
├── packages/ # 공유 패키지
│   ├── eslint/ # eslint 설정
│   └── tsconfig/ # typescript 설정
├── .prettierrc # prettier는 전역으로 설정
└── package.json