[FE] React.js + TS + eslint + prettier + bootstrap(with Docker)

초고

나만무 프로젝트를 진행하며 ReactJS를 TS 기반으로 개발하려고 했다. eslint와 prettier라는 것을 알게되서 써보려고 했는데 에러를 겁나 많이 만났다. 도커 컨테이너를 계속 삭제하고 만드는 것도 귀찮아져서 초기 세팅하는 방법을 문서화했다. 초기 세팅된 템플릿은 계속 쓰려고 깃헙 레포에도 저장했다. 하는 김에 React Bootstrap도 넣었다.

도커 컨테이너: Node.js

# 로컬 powershell
docker pull node:lts
docker images // 도커 엔진에 존재하는 이미지 목록을 출력

docker create -it --name namanmoo node:lts
docker ps -a // 모든 컨테이너를 출력

• 도커 컨테이너 실행 후 VS Code에서 원격 접속한다.

  # npm말고 yarn을 쓰는 것이 설치 속도가 빠르다!
  node --version // 노드 버전 18.16.1 버전인지 확인
  apt update
  apt upgrade

CRA with Typescript

npx create-react-app my-app --template typescript
cd my-app

# 실행
npm start

eslint 및 prettier 적용

# eslint 설치
npm install -D eslint

# .eslintrc.json 파일 설정
npx eslint --init

# prettier 설치
npm install -D prettier

# eslint 호환
npm install -D eslint-config-prettier eslint-plugin-prettier

eslint-plugin-prettier 호환 에러

버전 에러가 발생해서 상위 버전을 설치해주었다.

npm install --save-dev eslint-plugin-prettier@^5.0.0-alpha.1

.prettierrc.json 파일 설정

prettier는 eslint와는 달리 파일을 직접 생성하고 작성해야 한다.

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "consistent",
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

eslintrc.json 파일 설정

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "react"],
  "rules": {}
}

업데이트

apt update
apt upgrade

React에 bootstrap 세팅하기기

• React Bootstrap Docs

  # 설
  npm install react-bootstrap bootstrap

• public/index.html

  # head 태그에 추가한다.
  <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous"
  />

• React Bootstrap 세팅이 완료되었다.

• 사용하고자 하는 컴포넌트를 import 한 후 사용하면 된다.

  import Button from 'react-bootstrap/Button';
  

// or less ideally
import { Button } from 'react-bootstrap';

```

출처

• VSCode에서 ESLint와 Prettier (+ TypeScript) 사용하기