이 글은 아하 REST API 서버 개발 의 내용을 토대로 정리하고, 궁금한 것을 공부한 내용입니다..

Express 는 사실 미들웨어 프레임워크. 시작과 끝이 미들웨어이기 때문에.

미들웨어 함수는 요청 객체 (req), 응답 객체 (res) 그리고 다음 미들웨어를 실행하는 next 함수로, 클라이언트 요청을 처리하여 응답하는 과정사이에 거쳐가는 함수 라고 말 할 수 있으며, next 함수를 이용해서 다음 미들웨어로 순서를 넘길 수 있다.

또한, 미들웨어는 순차적으로 실행되므로 미들웨어의 순서가 매우매우 중요하다.

미들웨어의 구조

const app = express();

app.use(express.json())

app.use('/', indexRouter)

app.use(function(req, res, next) {
    next(createError(404))
})

app.js 의 일부 코드인데, app.use() 안에 있는 모든 함수들은 미들웨어라 할 수 있다.

사용자의 요청이 올때마다 순서대로 미들웨어를 쭉 타고 내려가며 클라이언트에게 응답을 하게 된다.

또한, indexRouter 는 라우터임에도 불구하고 use 함수안에 담겨져 있는데, Express 입장에서는 라우트도 하나의 미들웨어 일 뿐이다.

라우터 미들웨어는 express.Router() 인스턴스에 바인드되는 방식으로 동작한다.

Router 객체를 이용해 router.use() 및 router.METHOD() 함수를 사용하여 라우터 레벨 미들웨어를 로드할 수 있다.

또한, Router 객체는 그 자체가 미들웨어이므로 (혹은 똑같은 방식으로 동작하므로) app.use() 나 router.route() 의 인수로 사용될 수 있다.

app.use('/', indexRouter)

app.js 소스에서 라우터 파일이 app.use() 에 바인딩 된 것을 확인할 수 있다.

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.json({message: 'Hello A-ha'})
});

module.exports = router;

indexRouter.js 의 경우 위와 같이 작성되어 있는데, 위 그림에서의 미들웨어 구조와 정확하 똑같다.

라우터 미들웨어는 사용자로부터 요청받은 req 객체를 처리한 후 응답 객체 res 를 리턴하는 방식으로 동작한다.

라우터에서의 next 는 에러 처리를 위해 사용된다.

컨트롤러 파일 분리

controllers/index.controller.js

const index = (req, res, next) => res.json({
  message: 'Hello A-ha!'
})

export {
  index
}

라우팅과 비즈니스 로직을 분리하였다.

위의 코드는 최신 스펙의 js 코드. : export

routes/index.js

import express from 'express'
import {index} from '../controllers/index.controller'

const router = express.Router()

/* GET home page. */
router.get('/', index)

export default router

module.exports = router; 의 코드를 export default router 로 변경

app.js

require('dotenv').config()

import createError from 'http-errors'
import express from 'express'
import cookieParser from 'cookie-parser'
import logger from 'morgan'
import indexRouter from './routes/index'

const app = express()

...
app.use('/', indexRouter)

// catch 404 and forward to error handler
...

// error handler
...

// bin/www 를 그대로 사용하기 위해서 예외적으로 commonJs 문법을 적용
module.exports = app

var express = require('express'); 의 코드를 import express from 'express' 와 같이 변경하였다.

이렇게 하고 실행을 import 구문 같은 경우에는 nodejs 가 어떻게 해석을 해야 하는지 모른다며 에러가 발생하는데, 최신 스펙의 자바스크립트는 현재 nodejs 버전에서 모두 지원을 하는 것이 아니기 때문이다.

nodejs 가 해석할 수 있도록 친절하게 일면 번역 (트랜스파일) 을 해주는 모듈이 있는데, 그게 그토록 유명한 바벨이다.

바벨 세팅

> npm install -g nodemon
> npm install --save @babel/polyfill
> npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

프로젝트 루트에.babelrc 파일을 생성한 후,

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

package.json 파일에서

{
  "scripts": {
    "start": "nodemon ./bin/www --exec babel-node --presets @babel/preset-env"
  }
}

scripts 내용을 수정.

이제 npm start 를 통해 서버를 구동시킬 수 있다.

참고로 Express 는 다음과 같은 미들웨어 유형이 존재한다.

• 애플리케이션 레벨 미들웨어
• 라우터 레벨 미들웨어
• 오류 처리 미들웨어
• 써드파티 미들웨어

라우터를 더욱 세세하게 분리하고 컨트롤러 로직을 작성하고 에러 핸들링을 한곳에서 처리하는 방법

아하 REST API 서버 개발 (3)

Babel(바벨)은 ES6+ 문법으로 작성된 js파일을 ES5문법으로 작성된 js파일로 만들어주는 작업을 해주는 도구다.

대부분의 브라우저가 ES6문법을 완전히 지원해주지 않기 때문에 ES6문법의 자바스크립트 파일을 사용할 수 없다.

따라서 Babel(바벨)을 이용해서 개발은 ES6로 하되 브라우저는 트랜스 파일링된 ES5문법의 js파일을 사용하게 하는 식의 구성을 갖게 해야한다.

Babel은 다양한 작은 모듈들로 구성되어 있다. Babel 다양한 모듈을 담는 일종의 상자 역할을 하며 코드를 컴파일 하기 위해 작은 모듈들(ex. presets)을 사용한다.

Reference

• ES6 바벨(babel)을 이용한 트랜스 파일링
• [Tool] (번역) Everything you need to know about BabelJS
• https://babeljs.io/docs/en/ - 공식문서

This is a new feature of NPM called 'scoped packages', which effectively allow NPM packages to be namespaced.

네임스페이스라고 보면 된다.

바벨 7버전부터는 모든 바벨 패키지들이 @babel이라는 네임스페이스 안에 속하게 되었다고 한다.

Reference

• https://stackoverflow.com/questions/36667258/what-is-the-meaning-of-the-at-prefix-on-npm-packages
• BabelJS(바벨)

패키지 스코프

Babel 의 공식 패키지들은 이제 @babel 이라는 패키지 스코프를 사용한다.

babel-cli
babel-core
babel-preset-env
babel-polyfill

@babel/cli
@babel/core
@babel/preset-env
@babel/polyfill

설치시 아래쪽 같이 진행하면 된다.

Reference : https://www.slideshare.net/ssuser2295821/babel-7

Babel includes a polyfill that includes a custom regenerator runtime and core-js.

This will emulate a full ES2015+ environment (no < Stage 4 proposals) and is intended to be used in an application rather than a library/tool. (this polyfill is automatically loaded when using babel-node).

This means you can use new built-ins like Promise or WeakMap, static methods like Array.from or Object.assign, instance methods like Array.prototype.includes, and generator functions (provided you use the regenerator plugin). The polyfill adds to the global scope as well as native prototypes like String in order to do this.

바벨을 사용하면 새로운 문법을 구형 자바스크립트 문법으로만 바꿔줍니다. 문법만 바꿔주면 됐지 뭘 더 바라냐고요? 바벨 그 자체로는 ES2015의 새로운 객체(Promise, Map, Set 등등)과 메소드(Array.find, Object.assign 등등)을 사용할 수 없습니다. 왜냐하면 ES2015에서 처음 생긴 거라 구형 자바스크립트에는 그에 상응하는 코드가 없거든요. 그래서 babel-polyfill을 설치해야 새로운 기능을 사용할 수 있습니다

폴리필은 하나의 프로젝트에 한 번만 사용해야 합니다. 그렇지 않으면 충돌이 발생합니다. 따라서 가장 먼저 로딩되는 스크립트 제일 위에 추가하도록 합시다.

Reference

• https://babeljs.io/docs/en/babel-polyfill](https://babeljs.io/docs/en/babel-polyfill)
• https://www.zerocho.com/category/ECMAScript/post/57a830cfa1d6971500059d5a

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

.babelrc라는 파일을 만들어 설치한 preset을 연결해줍니다. .babelrc는 바벨에 대해 설정을 하는 파일입니다. 여기에 preset이나 plugin을 연결하면 됩니다. preset은 여러 플러그인의 모음집입니다.

유명한 preset으로는 react나 es2015, es2016, es2017, env, ~~stage-0, stage-1, stage-2, stage-3 ~~등이 있습니다. 7버전부터 stage-0, stage-1, stage-2, stage-3은 deprecated되었습니다. 앞으로는 새로운 스펙은 프리셋 대신 플러그인 형식으로 넣어야 합니다.

react 프리셋은 react 환경(jsx)을 위한 프리셋이고, es2015는 ES2015 문법을 사용할 수 있게 도와주는 플러그인들의 프리셋입니다.

env 프리셋은 한 술 더 떠서 특정한 문법 버전을 입력할 필요 없이, 타겟 브라우저를 입력하면 알아서 사용자가 환경에 맞춰 최신 EcmaScript를 사용할 수 있게 해줍니다

Reference

• https://babeljs.io/docs/en/babel-preset-env

• https://www.zerocho.com/category/ECMAScript/post/57a830cfa1d6971500059d5a

Babel comes with a built-in CLI which can be used to compile files from the command line.

In addition, various entry point scripts live in the top-level package at @babel/cli/bin. There is a shell-executable utility script, babel-external-helpers.js, and the main Babel cli script, babel.js.

bael-cli는 command line을 통해 코드를 transpile 할 수 있는 도구.

Reference

• https://babeljs.io/docs/en/babel-cli
• https://jaeyeophan.github.io/2017/05/16/Everything-about-babel/

babel-node is a CLI that works exactly the same as the Node.js CLI, with the added benefit of compiling with Babel presets and plugins before running it.

babel-node는 REPL로도 동작한다.

Reference

• https://babeljs.io/docs/en/babel-node
• http://blog.jeonghwan.net/2016/07/19/babel.html

Babel 7 + Node.js로 모던 자바스크립트 사용하기

ES6 부터 사용 가능한 모듈 시스템.

정리 : https://ychooni.tistory.com/480

export { a, b, c } 와 같이 내보낸 것은 다른 파일에서 import { a, b, c } from './path' 와 같이 불러올 수 있다.

export default router 와 같이 내보낸 것은 다른 파일에서 import indexRouter from './path' 와 같이 불러올 수 있다.

자바스크립트 개발을 하다보면 require나 import 키워드를 통해 외부 라이브러리를 불러오는 코드를 자주 보게 됩니다. require는 NodeJS에서 사용되고 있는 CommonJS 키워드이고, import는 ES6(ES2015)에서 새롭게 도입된 키워드입니다.

Reference : [http://www.daleseo.com/js-module-require/](