2017. 8. 9. 11:57ㆍ다시 하자 Back-End/Koa framework
지난 포스팅에서는 KoaJS의 개념과 특징, ES6에서 새롭게 추가된 제너레이터 객체를 이용한 비동기 처리에 대해서 살펴보았다.
지난 포스팅 보기 : [KoaJS] 1. KoaJS 시작하기
이번 포스팅에서는 KoaJS를 사용하여 프로젝트를 진행하기 전에 필요한 환경설정에 대해서 알아보자.
1. Babel 설정
KoaJS는 ECMA 2017 명세의 async / await로 미들웨어의 비동기 작업을 수행한다. 따라서 이전 버전의 NodeJS를 사용할 경우 KoaJS를 사용하는데 어려움이 있다. (NodeJS 7.6.0 이하에서는 async / await 명세가 적용되어 있지 않다.)
그림 1. KoaJS 설치 시 요구사항에 대한 설명
가장 쉬운 방법은 NodeJS 버전을 업그레이드 하는 것이지만, 실제 프로젝트에서 아무런 검증 없이 프레임워크 혹은 라이브러리의 버전을 올리는 행위는 예측하기 힘든 문제를 발생시킬 가능성이 높다. 따라서 새로운 프로젝트를 진행할 때 이 방법을 선택하는 것이 좋다.
만약 이미 진행되고 있는 Express 프로젝트에서 KoaJS로 바꾼다고 가정을 해보자. 하필 사용하고 있던 NodeJS가 7.6.0보다 이전 버전이라면 async / await를 사용할 수 없을 것이다.
다행히도 우리는 [KoaJS] 1. KoaJS 시작하기를 통하여 async / await가 제너레이터와 Promise의 조합으로 대체할 수 있다는 것을 알고 있다. async / await 부분만 제너레이터와 Promise로 바꿀 수 있다면 KoaJS를 사용할 수 있을 것이다. 이러한 작업들을 자동으로 처리해주는 유용한 도구가 있다.
바로 Babel 이라는 자바스크립트 변환기이다.
그림 2. 대놓고 (?) 최신 자바스크립트를 사용할 수 있게끔 해주는 컴파일러라고 소개하고 있는 Babel
KoaJS의 공식 홈페이지에서는 Babel을 사용할 수 있는 2가지 방법을 제시하고 있다. 첫 번째 방법은 Babel-core를 내부에서 require 하여 사용하는 방법이다.
require('babel-core/register'); const app = require('./app');
이 방법은 서버가 구동 될 때 Babel 모듈을 메모리에 상주시켜야 되기 때문에 리소스 관리면에서 좋은 방법은 아니다. 또 다른 방법은 Babel-cli를 설치하여 빌트-인 환경에서 자동으로 변환되도록 하는 것이다.
npm install --save-dev babel-cli babel-preset-env babel-plugin-transform-async-to-generator
Babel에 관련된 모듈을 설치할 때 옵션으로 --save-dev 를 주는 것이 좋다. 패키지를 릴리즈 할 때 Babel 에서 이미 변환된 코드로 릴리즈 되므로 릴리즈 패키지에서 Babel 모듈이 필요하지 않다. 따라서 의존성 모듈로 따로 분류하는 것이 좋다. 설치가 완료되면 .babelrc 파일을 생성하여 아래의 설정을 넣어준다.
{
"presets": ["env"],
"plugins": ["transform-async-to-generator"]
}
presets은 Babel에서 사용하는 소형 모듈의 모음이다. preset을 추가하면 최신 자바스크립트 명세를 변환해주는 기능들을 추가할 수 있다. babel-preset-env 모듈은 공식적으로 확정되지 않은 예비 명세들을 포함한 최신 자바스크립트 명세 모두를 포함한 모듈이다. 따라서 presets에 env를 설정하면 최신 자바스크립트 명세 모두를 적용할 수 있다.
transform-async-to-generator 플러그인은 async / await 명세를 제너레이터로 변환해주는 플러그인이다. ECMA 2017을 지원하지 않더라도 이전의 자바스크립트로 변환해주기 때문에 NodeJS 버전이 낮다면 필수로 설정 해줘야한다.
최신 자바스크립트를 사용할 준비가 끝났으니 본격적으로 Koa를 설치해보자.
2. KoaJS 설치
자 이제 KoaJS 프로젝트를 생성해보자. 디렉터리를 하나 생성하고 아래의 명령어를 입력한다.
npm init
npm init 명령어를 실행하면 프로젝트에 관련된 정보를 package.json 파일에 기록한다. npm init 으로 입력되는 정보는 패키지 이름, 버전, 설명, 엔트리 포인트, 테스트 명령어, Git 저장소 주소, 키워드, 개발자, 라이센스 종류가 있다. 이 정보들은 자신이 만든 패키지가 NPM 저장소에 올라갈 때 필요한 부가 정보를 저장하고 있는 메타 데이터 파일이다.
그림 3. npm init 명령어로 입력되는 정보들
npm init 이 완료되면 위에서 살펴본 Babel 모듈을 설치하자. (위에 설명되어있는 그대로 설치하면 된다.) 모듈을 설치하고 package.json 파일을 열어보면 아래와 같이 데이터들이 작성되어 있음을 볼 수 있다.
{
"name": "koa_blog",
"version": "0.0.1",
"description": "kim1124 블로그에 올릴 예제 프로젝트입니다.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"koa_first"
],
"author": "kim1124",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-preset-env": "^1.6.0"
}
}
개발용 의존 모듈에 Babel 모듈의 이름과 버전이 기록되어 있음을 확인할 수 있다. 다음은 Koa를 설치할 차례이다. 아래의 명령어로 Koa를 설치하자.
npm install --save koa
--save 옵션은 설치 시 package.json에 자동으로 기록 할 때 사용하는 옵션이다. 뒤에 dev가 빠진 것은 릴리즈 할 때 필요한 모듈이기 때문이다. 다시 package.json 파일을 열어보면 아래와 같이 하나가 더 추가되어있다.
{
"name": "koa_blog",
"version": "0.0.1",
"description": "kim1124 블로그에 올릴 예제 프로젝트입니다.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"koa_first"
],
"author": "kim1124",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-preset-env": "^1.6.0"
},
"dependencies": {
"koa": "^2.3.0"
}
}
그림 4. package.json에 명시된 모든 모듈을 한꺼번에 설치하는 화면
KoaJS 설치가 완료되면 프로젝트 디렉터리의 Root에 index.js 파일을 생성하여 아래와 같이 입력하자.
const Koa = require("koa");
const app = new Koa();
app.use(async ctx => {
ctx.body = "<h1>First koa example !!</h1>";
});
app.listen(7777);
다음 터미널에서 node index.js를 실행하고 브라우저에서 localhost:7777로 접속해보자.
그림 5. 처음으로 만들어 본 Koa 예제
클라이언트에서 정상으로 서비스에 접속된 것을 확인할 수 있다.
다음 포스팅에서는 클라이언트의 요청에 응답하기 위해 경로를 설정해주는 Koa-router 모듈에 대해 알아보도록 하자.
'다시 하자 Back-End > Koa framework' 카테고리의 다른 글
| [KoaJS] 4. Mongoose (1) (0) | 2017.10.13 |
|---|---|
| [KoaJS] 3. Router (0) | 2017.09.04 |
| [KoaJS] 1. KoaJS 시작하기 (0) | 2017.08.03 |