react 프로젝트 시작할 때 세팅 목록 1

 

react 프로젝트를 시작할 때 해야되는 세팅들이 있다.

세팅해놓고 나면 나중에 꼭 까먹게 되기 때문에

어떤 세팅을 해야하는지 이곳에 적어놔야겠다.

 

vite react-ts 로 시작한 프로젝트

그리고 아래 라이브러리들과 관련된 세팅이다.

react, ts, emotion, jest, react-query v5, zustand, dayjs, lodash-es, eslint, prettier, babel, qs

---

 

1. 패키지 매니저 고르기

 

패키지 매니저 삼대장 yarn, npm, pnpm 중에 상황에 맞는 걸로 고르면 된다.

 

yarn berry pnp 같은 경우

배포할 때 좀 다르고? 사용할 패키지가 pnp 를 지원하지 않을 수도 있기에..

이런 점을 고려해서 선택하면 되겠다.

 

---

 

2. 패키지매니저별 버전 관리, gitignore 추가

 

node 버전 관리 (npm, nvm 사용시)

1. 루트에 node 버전을 작성한 .nvmrc 파일을 추가
2. npm i 전에 nvm use 를 사용해서 노드 버전을 맞춘 후 설치

 

yarn 버전 고정

1. yarn 설치
npm i -g yarn

2. yarn 버전 변경
yarn set version berry

3. .yarnrc.yml 파일 에서 버전 및 nodeLinker 확인
yarnPath: .yarn/releases/yarn-4.1.0.cjs

 

pnpm 버전 명시

1. pnpm 만 사용 (link)
"scripts": {
  "preinstall": "npx only-allow pnpm"
}

2. pnpm 버전 package.json enignes 에 명시 (link)
- 로컬 개발환경에서 명시한 버전과 다르다면 pnpm 사용시 에러메세지가 표시되며 실패한다고 한다.
"engines": {
  "node": ">=10",
  "pnpm": ">=3"
}

 

gitignore

- 루트에 .gitignore 파일을 추가해준다.

- 보통 node_modules, 각종 ide 관련 폴더들(.idea), env 정도 들어갈텐데 필요한게 있으면 그때그때마다 추가하면 될 것 같다.

- env 파일을 통으로 올리는건 안되겠지만,, key 값만 적은 env.*** 파일을 올리는건 좋은 생각 같다. (그래야 뭐가 변경되었는지 알테니까..)

---

3. vite 프로젝트 만들기

 

더 낮은 Node 버전을 사용한다면 유감..

yarn create vite . --template react-ts

yarn

 

사실 나는 레포를 파고 yarn 세팅을 한 후 위 커맨드를 실행했기 때문에ㅎ

내 디렉토리가 비어있지 않은데 다 지울꺼냐? 라는 선택지가 주어졌고.. 지운다! 를 선택했기에
2번의 yarn 세팅을 다시 해주었다ㅎ

 

추가 세팅

 

 

 

분명 yarn install 했는데도 설치하라고 뜰 것이다.

 

 

해결법!

1. IDE 설정 변경
command + , 를 눌러 Preferences > Languages & Frameworks  > Node.js
여기서 내가 실제로 사용중인 package manager 로 변경해준다.

2. IDE 재실행
command + option + y 하면 되기는 하지만
난 대체로 마음 편하게 재실행하는 편이다.

 

 

---

4. vite dev 세팅

 

server: {
  port: 3000,
  /** 포트가 이미 사용 중일 때 다른 포트를 사용하게끔 설정 */
  strictPort: false
}

 

3000 번이 익숙해서 포트를 변경했고

이미 사용 중인데 창이 또 열리는건 내 입장에선 불편하다고 느꼈기 때문에

strictPort 도 false 처리 해주었다.

---

5. prettier 설정

1. 프리티어와 설정 파일을 설치
yarn add -D prettier @nr2p/prettier-config

2. 설정 파일을 package.json 에 추가해준다.
"prettier": "@nr2p/prettier-config"
- 내 설정 파일에 추가적으로 설정을 더 하지 않을 것이기 때문에 package.json 에 간단하게 추가해주었다.

3. prettierignore 설정
- 루트에 .prettierignore 파일을 추가해준다.
- src 이하 폴더 + 몇가지 파일만 prettier가 적용되도록 해두었다.

4. npx prettier --write .
- 한 번 싹 돌려준다. 

 

 

/**/*.*
!vite.config.ts
!.eslintrc.cjs
!tsconfig.json
!tsconfig.node.json
!src/**/*

---

6. eslint 설정

1. eslint 와 config, plugin 파일들을 설치
yarn add -D eslint @nr2p/eslint-config @types/eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-jest eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-unused-imports

2. eslintrc 추가
custom config 에 다 들어있기 때문에 extends 만 한다.

3. eslintignore 설정
- 루트에 .eslintignore 파일을 추가해준다.
- src 이하 폴더 + 몇가지 파일만 eslint가 적용되도록 해두었다.

 

/** @type {import('eslint').Linter.Config} */
module.exports = {
  root: true,
  extends: '@nr2p/eslint-config',
};

 

/**/*.*
!vite.config.ts
!.eslintrc.cjs
!tsconfig.json
!tsconfig.node.json
!src/**/*

---

7. tsconfig 설정

 

에러 해결

다 알려주니 하라는대로 하면 되긴한다.

 

eslint 설정을 추가한 이후에 vite.config.ts 파일을 보면 이런 에러가 표시된다.

이유) eslint 설정에서 tsconfig 설정을 바라보게끔 해놓았는데, vite 기본 tsconfig 에서는 vite.config.ts 파일을 포함하고 있지 않기 때문이다.

해결) vite.config.ts 파일을 tsconfig 에 include 하거나 eslintignore 처리하면된다.

 

절대 경로 설정

1. vite-tsconfig-paths 설치
yarn add -D vite-tsconfig-paths

2. vite.config.ts 에 추가
- plugin 쪽에 tsconfigPaths를 추가해준다.

3. tsconfig 수정
- path alias 목록을 추가한다.

"baseUrl": ".",
"paths": {
  /** src 이하 폴더를 @로 표시*/
  "@/*": ["src/*"]
}

 

import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
// ...생략
});

 

---

 

세팅할게 많은데 또 종류별로 다르다ㅎ

모노레포라면 세팅이 조금 달라지겠지만..ㅎ

 

세팅이 하다보니 길어져서 나눠서 포스팅을 하겠다.