블로그 만들기 - 프로젝트 생성

Node.js Koa 라이브러리 이용하여 블로그 서비스를 만들어 보겠습니다.

블로그 프로젝트 생성

$mkdir blog

$cd blog

$mkdir blog-backend

$cd blog-backend

$yarn init -y

   => 디렉토리에 package.json 생성

$yarn add koa

  ==> Koa 웹 프레임워크 설치

package.json 다시 조회시 dependencies에 koa 추가된 것 확인

{
  "name": "blog-backend",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "koa": "^2.14.2"
  }
}

서버 파일 생성전에 ESLint 와 Prettier 를 프로젝트에 적용

$yarn add --dev eslint

$yarn run eslint --init

  => --dev 는 개발용 의존모듈로 설치된다는 의미. package.json에 devDependencies에 버전 정보가 추가

 

(ESLint install error)

 $yarn add --dev eslint (실행)

 yarn add v1.22.19

[1/4] 🔍  Resolving packages...

[2/4] 🚚  Fetching packages...

error @eslint-community/eslint-utils@4.4.0: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "14.16.0"

error Found incompatible module.

info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

 

==> node --version 

         v14.16.0

version 정보가 14.17.0 이 되어야 해서 node 버젼관리 프로그램인 nvm 을 설치

nvm github site

$curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current

                                 Dload  Upload   Total   Spent    Left  Speed

100 15916  100 15916    0     0  38492      0 --:--:-- --:--:-- --:--:-- 39889

=> Downloading nvm from git to '/Users/wonsuk/.nvm'

=> '/Users/wonsuk/.nvm'에 복제합니다...

remote: Enumerating objects: 360, done.

remote: Counting objects: 100% (360/360), done.

remote: Compressing objects: 100% (306/306), done.

remote: Total 360 (delta 40), reused 170 (delta 28), pack-reused 0

오브젝트를 받는 중: 100% (360/360), 219.83 KiB | 9.16 MiB/s, 완료.

델타를 알아내는 중: 100% (40/40), 완료.

* (HEAD FETCH_HEAD 위치에서 분리됨)

  master

=> Compressing and cleaning up git repository

 

=> Appending nvm source string to /Users/wonsuk/.zshrc

=> Appending bash_completion source string to /Users/wonsuk/.zshrc

=> You currently have modules installed globally with `npm`. These will no

=> longer be linked to the active version of Node when you install a new node

=> with `nvm`; and they may (depending on how you construct your `$PATH`)

=> override the binaries of modules installed with `nvm`:

 

/usr/local/lib

├── nodemon@2.0.21

└── pm2@4.5.6

=> If you wish to uninstall them at a later point (or re-install them under your

=> `nvm` Nodes), you can remove them from the system Node as follows:

 

     $ nvm use system

     $ npm uninstall -g a_module

 

=> Close and reopen your terminal to start using nvm or run the following to use it now:

 

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

 

터미널을 종료 하고 다시 실행하여 nvm 버전 정보 확인

Node.js LTS 버전 설치

$nvm install --lts 

 

다시 eslint 를 설치합니다.

$yarn run eslint --init

.eslintrc.json 파일이 생성

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

Prerrier 설정합니다. 

.prettierrc

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

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

.eslintrc.json 을 다음과 같이 만듭니다.

{
  "env": {
    "commonjs": true,
    "es2021": true,
    "node": true
  },
  "extends": ["eslint:recommended", "prettier"],
  "globals": {
    "Atomics": "readonly",
    "ShareArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off"
  }
}

no-unused-vars : warn 으로 적용하면 const로 값을 선언하고 사용하지 않으면 에러로 간주하지 않도록 설정합니다.

no-console을 off 로 설정하면 ESLint 기본설정에서는 console.log 사용하는 것을 지양하는데 사용 가능하도록 합니다.

이제 두 도구가 제대로 작동하는지 확인해봅니다. 

blog-backend 디렉토리에 src 디렉토리를 만들고 index.js 파일을 만듭니다.

const hello = "hello";

const 값을 선언하고 사용하지 않으면 오류 나는데 오류가 나지 않고 저장하면 prettier가 적용되어 "hello" -> 'hello' 로 홀따옴표로 바뀝니다.