React로 간단한 ToDo List 만들기 (#1 프로젝트 생성)

목표

• 프로젝트를 생성
• prettier와 eslint를 설정

 

프로젝트 생성

react-create-app으로 프로젝트를 생성한다. 아래 명령어 수행

$ yarn create react-app todo-app

 

생성 후 실행 확인해보자. 아래 명령어 수행 후 localhost:3000으로 접속

$ cd todo-app
$ yarn start

 

(리액트 로고가 뱅글뱅글 돌아가는 화면이 나온다)

첫 화면

 

vscode에서 prettier와 eslint 설정

본 프로젝트는 vscode를 이용해서 개발할 예정이므로, vscode 환경에서 본 글을 작성한다.

 

prettier와 eslint의 설정은 필수는 아니지만, 가독성 좋고 좋은(?) 코드를 작성하기 위해서 사용합니다. 특히 협업으로 개발할때는 거의 필수적으로 사용한다고 보면 됩니다. (마치 단체 생활을 위한 규칙 같은것)

 

vscode 플러그인 설치

eslint 와 prettier 플러그인을 설치한다.

vscode 플러그인 설치

 

yarn을 통해 prettier와 eslint 설치

우선 아래 명령어를 통해 prettier와 eslint를 설치한다

• prettier와 eslint는 개발할때만 필요한 모듈이므로 --dev 옵션으로 설치한다.

$ yarn --dev add prettier eslint eslint-config-prettier eslint-plugin-prettier

--dev 옵션으로 설치하면 아래와 같이 devDependencies에 추가된다.

{
  ...
  "devDependencies": {
    "eslint": "^7.30.0",
    "prettier": "^2.3.2",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
  },
  ...
}

 

eslint 설정

아래 명령어로 eslint 설정파일인 .eslintrc.json 파일을 생성할 수 있다.

• 대화 형식으로 이루어지기 때문에 손쉽게 만들 수 있다

$ yarn eslint --init

yarn run v1.22.10
$ /Users/hong/dev/git/project/todo-app/node_modules/.bin/eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.21.5 eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0
✔ Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-react@^7.21.5, eslint-config-airbnb@latest, eslint@^5.16.0 || ^6.8.0 || ^7.2.0, eslint-plugin-import@^2.22.1, eslint-plugin-jsx-a11y@^6.4.1, eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0

• How would you like to use ESLint? · style
• What type of modules does your project use? · esm
• Which framework does your project use?: 프레임워크 선택 (react 선택)
• Does your project use TypeScript?: 타입스크립트 사용여부 (No)
• Where does your code run?: 동작 환경 (browser 선택)
• How would you like to define a style for your project? · guide
• Which style guide do you want to follow?: 스타일 가이드 (airbnb 선택)
• What format do you want your config file to be in?: config 파일 포맷 선택 (JSON 선택)
• Would you like to install them now with npm?: 필요한 모듈 설치 여부 (yes)

 

react에서는 airbnb 코드 컨벤션을 많이 사용한다. strict 하여 품질 좋은 코드를 작성할 수 있도록 도와준다.

• 명령어 수행을하고 나면, 필요한 모듈을 추가적으로 가지고오고 package.json에 추가된다.

{
  ...
  "devDependencies": {
    "eslint": "^7.30.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.2"
  },
  ...
}

 

그리고 프로젝트 root에 .eslintrc.json 파일이 생성된다.

• 그리고 아래와 같이 약간의 수정 작업을 해준다.

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:prettier/recommended", "airbnb"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["prettier", "airbnb"],
  "rules": {
    "prettier/prettier": "error"
  }
}

 

그리고 vscode 설정 파일인 settings.json 파일에 아래 내용을 추가한다.

{
  ...
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

 

Prettier 설정

.prettierrc.json 파일을 생성한다

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 80
}

• "trailingComma": "es5": 객체, 배열을 사용할 때, 맨 뒤에 쉼표를 붙임 ([1, 2, 3,])
• "tabWidth": 2: 탭의 길이 (위에서는 스페이스 2번)
• "semi": true: 맨 뒤에 세미콜론 사용
• "useTabs": false: 탭 사용하지 않음
• "singleQuote": true: 쌍따옴표가 아닌 홑따옴표 사용
• "printWidth": 80: 한 줄의 길이