1-1. 프로젝트 생성 및 ESLint 설정

프로젝트 생성

웹서버 프로젝트를 위한 디렉토리를 만들고, 해당 디렉토리에서 yarn init 을 통하여 패키지 정보를 생성하세요.

그 다음엔, koa 를 설치합니다.

$ mkdir heurm-server
$ cd heurm-server
$ yarn init
$ yarn add koa

ESLint 설정

이제, 서버파일을 작성하기 전에 자바스크립트 문법을 검토해주는 ESLint 라는 도구를 적용하는 방법을 알아보도록 하겠습니다.

먼저, eslint 를 글로벌로 설치하세요.

$ npm install -g eslint

그 다음엔, 프로젝트 내에서 다음 명령어를 실행하세요. 이 명령어를 실행하면 질문 몇가지를 물어보게되는데 아래 나오는것처럼 답변 선택을 하세요.

$ eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? JavaScript

그러면, 자바스크립트 문법을 검사하기위한, 설정파일을 생성해줍니다. 이 작업이 끝나면, 프로젝트 루트 디렉토리에 .eslintrc.js 라는 파일이 생깁니다.

기본적으로는, 세미콜론 (;) 를 허용하지 않고, 그 외에도 엄격하게 코드 규칙을 잡는데요. 이를 조금 완화하는 설정을 넣어주도록 하겠습니다.

다음 설정을 .eslintrc.js 안에 넣으세요.

module.exports = {
    "extends": "standard",
    "rules": {
        "indent": [
            "error",
            4
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-trailing-spaces": 0,
        "keyword-spacing": 0,
        "no-unused-vars": 1,
        "no-multiple-empty-lines": 0,
        "space-before-function-paren": 0,
        "eol-last": 0
    }
};

그 다음에는, VSCode (혹은 다른 에디터에서) ESLint 확장프로그램을 설치하세요. 문법검사를 하고 오류가 나는부분이 있으면 에디터에서 나타나게 됩니다.

ESLint 를 사용하는것은 필수사항은 아닙니다. 이를 사용하는 이유는 더욱 원활한 디버깅과, 좀 더 깨끗한 코드를 작성하기 위함 입니다. 문법 설정은, 여러분들의 취향 / 회사의 컨벤션에 따라 설정하시면 되겠습니다.

(예: 코드에서 세미콜론 사용, 쌍따옴표 / 따옴표 사용, 들여쓰기 등..)

ESLint 를 설정하고 나서는, 에디터를 재시작해야 제대로 작동합니다.

1-1. 프로젝트 생성 및 ESLint 설정