프로젝트 초기 환경 세팅_front

프로젝트의 구체적인 방향을 설정한다고 월요일의 2/3를 사용했고, 남은 1/3은 초기환경을 세팅하는 데에 쓴 것 같다. 2달 조금 넘는 기간동안 초기 세팅만 3번을 했지만 아직 익숙하지 않은 내 모습을 보며, 초기 환경 세팅의 전반적인 흐름을 정리할 필요성을 느껴 기록으로 남긴다.

사용 기술 스택

• React with TypeScript, React-Router, SCSS
• Redux
• Create React App
• ESLint, Prettier

세팅 과정

1. npx create-react-app (폴더명) --template redux-typescript
:: Redux를 사용한다면 위의 코드 한 줄로 React, Redux, TypeScript, Redux toolkit을 모두 설치할 수 있다.

2. npm install react-router-dom --save
:: React-Router 설치

3. npm install -D prettier eslint-config-prettier eslint-plugin-prettier
:: ESLint의 포맷팅과 Prettier 포맷팅의 충돌 방지

• 타입스크립트를 사용한다면 아래의 코드도 설치
  npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react

4. .vscode/settings.json 파일 생성 후 아래 내용 복사 붙여넣기

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.tabSize": 2,
  "editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "javascript.format.enable": false,
  "eslint.alwaysShowStatus": true,
  "files.autoSave": "onFocusChange"
}

5. .eslintrc 파일 생성 후 아래 내용 복사 붙여넣기

{
  "extends": ["react-app", "plugin:prettier/recommended"]
}

6. 코드 컨벤션 협의

• 특이사항이 없다면 .prettierrc 파일 생성 후 아래 내용 복사 붙여넣기**

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

• 3 ~ 6번에 대한 설명은 ESLint와 Prettier 초기 설정 방법을 참고.

7. npm install [email protected]
:: Sass 설치

8. css 초기 설정
:: common.scss 및 reset.scss

주의사항

사전에 사용할 기술 스택과 라이브러리, 컨벤션을 모두 정리하고 세팅을 시작했지만, 세팅 도중에 몇 가지 변경사항이 생겼다. 하지만 바로 결정하기 힘든 부분이라 저녁을 먹으며 결정을 하고 나중에서야 세팅을 마무리했다. 그로 인해 변경 사항 중 몇 가지를 반영하지 않아 팀원들과 하나하나 찾아가며 수정해야 하는 불상사가 발생했다.
다음에 초기세팅을 할 때는 세팅 도중에 변경하는 일이 없도록 사전에 확실히 마무리하고 앉은 자리에서 끝내야겠다. 그러면 번거로운 일 없이 깔끔하게 초기환경을 세팅할 수 있지 않을까.