[Koa] Koa 작업 환경 세팅하기 (설치, ESLint, Prettier)

1. Node 설치 확인하기

node --version

 

2. 프로젝트 생성하기

mkdir back

yarn init-y

이 작업을 하고 나면 디렉터리에 pakage.json 파일이 생성됩니다.

 

3. Koa 웹 프레임워크 설치하기

yarn add koa

설치한 뒤 다시 한번 pakage.json을 열어 보면, koa가 dependencies에 추가되어 있을 것입니다.

 

4. ESLint와 Prettier 설정

두 기능을 VSC에서 사용하려면 VS 마켓플레이스에서 Prettier-Code formatter와 ESLint 확장 프로그램을 설치해둔 상태여야 합니다.

yarn add --dev eslint

yarn run eslint --init

 

Prettier 설정하기

디렉터리에 다음 파일을 만드세요.

.prettierrc

.prettierrc 

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

다음으로 Prettier에서 관리하는 코드 스타일은 ESLint에서 관리하지 않도록 eslint-config-prettier를 설치하여 적용하세요.

yarn add eslint-config-prettier

 

설치한 후 다음 설정 파일을 만들면 됩니다.

.eslintrc.json

{
  "env": {
    "commonjs": true,
    "es2021": true,
    "node": true
  },
  "extends": ["eslint:recommended", "prettier"],
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "rules": {}
}

 

5. 제대로 작동하는지 확인하기

src 디렉터리를 생성하고, 그 안에 index.js 파일을 만들고 아래와 같이 작성하세요

src/index.js

const hello = "hello";

const로 값을 선언하고 사용하지 않으면, ESLint 기본 설정은 이를 에러로 간주합니다. 

사용되지 않은 const 값은 문법적으로 문제없지만, 더 나은 코드를 작성하도록 장려하기 위해 ESLint는 이를 오류로 취급합니다. 이러한 규칙을 끌 수도 있습니다. 오류 이름을 알아 두면 .eslintrc.json에서 해당 오류를 경고로 바꾸거나 비활성화 할 수 있습니다.

 

.eslintrc.json을 다음과 같이 한번 수정해보세요

.eslintrc.json
{
  "env": {
    "commonjs": true,
    "es2021": true,
    "node": true
  },
  "extends": ["eslint:recommended", "prettier"],
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off"
  }
}

 

ESLint 기본 설정에서는 console.log를 사용하는 것을 지양하고 있습니다. 그러나 Koa를 실습하면서 console.log를 사용할 것이므로 이 규칙을 비활성화한 것입니다.