(8) 백엔드 프로그래밍: Node.js의 Koa 프레임워크 2

2. 작업 환경 준비

(1) Node 설치 확인

* Node.js 개발을 하기 위해서는 당연히 Node.js 런타임이 설치되어 있으야 한다. 우리는 이미 이전에 설치했다. Node.js가 잘 설치되어 있는지 터미널에서 다시 버전을 확인해 보자.

$ node --version

---

(2) 프로젝트 생성

* 이번에 만들 백엔드 프로젝트는 우리가 마지막으로 다룰 블로그 서비스와 연동할 서버이다. blog 디렉터리를 만들고, 그 내부에 blog-backend 디렉터리를 만들자. 해당 디렉터리에서 yarn init -y 명령어를 실행하여 패키지 정보를 생성한다.

$ mkdir blog
$ cd blog
$ mkdir blog-backend
$ cd blog-backend
$ yarn init -y

* 이 작업을 하고 나면 디렉터리에 package.json 파일이 생성된다. 다음 명령어를 실행하여 해당 파일이 잘 만들어졌는지 확인해 보자(혹은 에디터로 직접 열어 보아도 된다).

$ cat package.json

* 이제 우리에게 필요한 Koa 웹 프레임워크를 설치해 보자.

$ yarn add koa

* 설치한 뒤 다시 한 번 package.json 을 열어 보면, 다음과 같이 koa가 dependencies에 추가되어 있을 것이다.

---

(3) ESlint와 Prettier 설정

* 서버 파일을 작성하기 전에 ESLint와 Prettier를 프로젝트에 적용하겠다. 자바스크립트 문법을 검사하고 깔끔한 코드를 작성하기 위해서이다.

* 두 기능을 VS Code에서 사용하려면 VS Code 마켓플레이스에서 Prettier-Code formatter와 ESlint 확장 프로그램을 설치해 둔 상태여야 한다. 이전에 그 설치 과정을 소개했는데, 아직 설치하지 않았다면 이전의 내용을 참고하여 설치하길 바란다.

$ yarn add --dev eslint
$ yarn run eslint --init

* yarn add 명령어를 사용할 때 --dev는 개발용 의존 모듈로 설치한다는 의미이다
  이렇게 설치하면 package.json에서 devDependencies 쪽에 모듈의 버전 정보가 입력된다.

* 이렇게 하고 나면 프로젝트 디렉터리에 다음과 같은 파일이 생성되었을 것이다.

* 이제 Prettier를 설정하겠다. blog-backend 디렉터리에 다음 파일을 만들자.

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

$ yarn add eslint-config-prettier

* 설치한 후 다음 설정 파일을 만들면 된다.

* 이제 두 도구가 제대로 작동하는지 확인해 보자. blog-backend 디렉터리에 src 디렉터리를 생성하고, 그 안에 index.js 파일을 만들자.

* const 로 값을 선언하고 사용하지 않으면, ESLint 기본 설정은 이를 에러로 간주한다. 위 코드를 입력했을 때 다음과 같이 오류가 뜨는지 확인해 보자.

* VS Code에서 오류 내용을 자세히 확인하려면 빨간색 줄에 마우스를 올리거나, 좌측 하든에 있는 X 아이콘을 클릭하면 된다.

* 사용되지 않는 const 값을 문법적으로 문제 없지만, 더 나은 코드를 작성하도록 장려하기 위해 ESLint는 이를 오류로 취급한다.

* 이러한 규칙을 끌 수도 있다. 오류 이름을 알아두면 .eslintrc.json 에서 해당 오류를 경고로 바꾸거나 비활성화할 수 있다.

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

* 이렇게 수정한 뒤 저장하면, 기존에 빨간색 줄로 나오던 코드가 초록색 줄로 바뀌게 된다(수정된 설정을 반영하려면 에디터에서 파일을 닫고 다시 열어주어야 한다).

* 그리고 no-console 값에는 "off"를 설정해 주었다. ESLint 기본 설정에서는 console.log를 사용하는 것을 지양하고 있다. 그러나 이번 실습에서 console.log를 사용할 것이므로 이 규칙을 비활성화한 것이다. 규칙을 비활성화할 때는 위와 같이 값을 "off"로 설정하면 된다.

에러에서 주의로 바뀐 것을 확인할 수 있다.

* 또한 저장할 때 Prettier를 통해 쌍따옴표(")가 홀따옴표(')로 바뀌었는지도 확인해 보자. 저장할 때 자동으로 코드를 정리하는 설정을 활성화하지 않았다면 F1을 누른 후 format이라고 입력하여 문서 서식(Format Document)를 실행해 보자.

* ESLint와 Prettier가 잘 작동하는 것을 확인했는가? 이제 본격적으로 Koa를 통한 서버 프로그래밍을 배워보자.

---