02. 프로젝트 생성

작업환경 준비하기

Koa는 v7 이상버전부터 사용하는 것을 권장합니다. 그 이유는, v7 이상 버전부터 async/await 를 바벨을 통해 트랜스파일링 하지 않고 바로 실행 할 수 있기 때문입니다.

현재 이미 LTS 가 v8.x.x 이니 별 신경 안쓰셔도 됩니다. 강의 초반에 받았었던 Node.js 를 그대로 사용하시면 됩니다.

프로젝트 생성

이번에 만들게 될 백엔드 프로젝트는, 추후 우리가 이 책에서 다루는 마지막 프로젝트인 블로그 서비스에서 연동하게 될 서버입니다. blog 라는 디렉토리를 만들고, 그 내부에 blog-backend 디렉토리를 만드세요. 그리고 나서 해당 디렉토리에서 yarn init 명령어를 사용하여 패키지 정보를 생성해보세요. 

$ mkdir blog
$ cd blog
$ mkdir blog-backend
$ cd blog-backend
$ yarn init
question name (blog-backend): 
question version (1.0.0): 
question description: 
question entry point (index.js): 
question repository url: 
question author: 
question license (MIT): 
success Saved package.json
Done in 2.73s.

yarn init 명령어를 실행하고나면, name, version 등의 정보를 묻는데, 이 때 그냥 엔터를 눌러서 기본값으로 설정하시면 됩니다.

이 작업을 마치고나면, 디렉토리에 package.json 이라는 파일이 생깁니다. 다음 명령어를 통해서 해당 파일을 조회해보세요 (혹은 에디터로 열어보셔도 됩니다)

$ cat package.json 
{
  "name": "blog-backend",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

프로젝트의 패키지정보를 지니고있는 package.json 파일이 잘 생성되었나요? 이제, koa 를 설치해보겠습니다.

$ yarn add koa

한번 다시, package.json 을 조회해보시면, dependencies 쪽에 koa 가 생성되었을 것입니다.

ESLint 설정

이제, 서버 파일을 작성하기 전에, 자바스크립트 문법과 코드 스타일을 검토 시켜주는 ESLint 라는 도구를 설치하고 적용하는 방법을 알아보겠습니다. (초심자에겐 이 검사를 적용하고 나면 자바스크립트 작성이 까다롭게 느껴질 수도 있으니, 이 과정을 생략을 해도 됩니다.)

우선, eslint 를 글로벌로 설치하세요.

$ yarn global add eslint
$ eslint –v
v4.8.0

(만약에 eslint –v 를 실행하였을때 오류가 발생한다면 npm install –g eslint 를 해보세요)

설치가 다 되었다면, 현재 프로젝트에 적용을 해보겠습니다.

$ yarn add eslint
$ eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Airbnb
? Do you use React? No
? What format do you want your config file to be in? JavaScript

이제, VSCode 로 프로젝트 디렉토리를 열으세요. 그리고, VSCode 의 ESLint 확장 프로그램을 아직 설치하지 않았다면, VSCode 좌측의 마켓플레이스 아이콘을 눌러 ESLint 를 검색해서 설치하세요.

확장프로그램이 제대로 설치되었다면, 프로젝트 디렉토리에 src 라는 디렉토리를 만들고, 그 안에 index.js 를 생성하여 다음 코드를 입력하세요.

src/index.js

const hello = 'hello';

ESLint 를 적용하고 나면, 위 코드는 문법적으로는 오류는 없지만 이렇게 빨간 밑줄이 그어지며, VSCode 의 문제 탭 쪽에서 오류메시지가 나타납니다.

그 이유는, 단순 문법검사 뿐 만 아니라, 더 나은 코드를 위해 코딩 스타일도 점검을 해주는데요, 여기서 밑줄이 그어진 이유는 hello 를 선언해놓고 쓰지 않았고, 또 파일의 마지막에 새 줄이 없어서 에러를 띄운 것입니다.

하단 탭이 보여지지 않는다면 VSCode 의 상단메뉴에서 보기 문제 메뉴를 눌러서 열 수 있습니다.

ESLint 커스터마이징

지금은 ESLint 의 설정이 조금 엄격하게 잡혀있습니다. console.log 같은 코드도 방지를 하게 해서 경고를 띄우죠. 혹은, 객체를 만들 땐, 마지막 키의 뒷부분에도 쉼표가 들어가야합니다. { a: ‘1’, b: ‘2’, } 와 같은 형식처럼 말이죠.

ESLint 의 규칙중 몇가지를 변경하는 방법을 알아보겠습니다. 프로젝트의 디렉토리 내부의 .eslintrc.js 파일을 열어서 다음과 같이 수정하세요:

.eslintrc.js

module.exports = {
  "extends": "airbnb-base",
  "rules": {
    "no-unused-vars": 1,
    "comma-dangle": 0,
    "eol-last": 0,
    "no-console": 0
  }
};

rules 객체 내부에 코드 검사 규칙의 이름, 그리고 그 뒤에는 숫자를 넣으면 됩니다. 여기서 숫자는, 0: 아무것도 안함 1: 경고 2: 오류를 의미합니다.

ESLint 를 사용하는것은 필수사항은 아닙니다. 이를 사용 하는 이유는, 더욱 원활한 디버깅과, 좀 더 깨끗한 코드를 작성하기 위함입니다. 문법 설정은, 여러분의 취향 / 협업을 할 때 코딩컨벤션에 따라 설정하시면 됩니다. (예: 코드에서 세미콜론 사용/미사용, 쌍따옴표/따옴표, 들여쓰기 크기 등..)

results matching ""

    No results matching ""