express ) Router

라우팅이란 ?

• 처리 로직을 따로 관리해 사용자가 접속한 URL 과 method 에 따라 해당 록직을 실행하는 것입니다.

라우팅 등록

먼저 express 를 설치합니다.

npm install -s express

express 에서는 라우팅을 직관적으로 표현합니다.

const express = require('express');
let app = express();

• require 를 이용해 express 를 가져옵니다. 그 다음 express 로 만들 서버를 세팅하기 위해 app 변수를 만듭니다.
  app 변수에는 우리가 필요한 각종 서버의 라우팅, 미들웨어, 에러 처리 로직을 설정합니다.

const http = require('http');

• http 서버를 만들기 때문에 http 모듈을 가져옵니다.

app.get('/', (req, res, next) => {
    res.send('Hello Express');
});

• 이 부분이 http 모듈에서 method와 URL 을 이용해 라우팅을 한 부분입니다. http 모듈에서는 GET 메소드를 이용해 / 로 접속했는지 조건검사를 했지만, expresss 에서는 app.[메소드]('[URL]', 처리로직) 형태로 이루어져 있습니다.
• 라우팅을 추가하고 싶다면 해당 형태로 늘려주기만 하면 됩니다.

http.createServer(app).listen(3000, () => {
    console.log('server on : 3000 PORT');
})

• 라우팅을 등록한 app 을 http 서버에 등록한 뒤 실행하면 등록된 라우팅에 따라 API 를 사용할 수 있습니다.

전체코드 & 실행결과

const express = require('express');
let app = express();

const http = require('http');

app.get('/', (req, res, next) => {
    res.send('Hello Express');
});

http.createServer(app).listen(3000, () => {
    console.log('server on : 3000 PORT');
})

---

라우팅 콜백함수 인자

사용자 요청에 따라 실행하는 콜백함수는 3개의 인자를 받습니다.
첫 번째는 요청 객체, 두 번째는 응답 객체, 세 번째는 next 객체 입니다.
요청 객체와 응답 객체는 http 에서 사용할 때와 크게 다르지 않습니다. 하지만 데이터를 사용하기 더욱 편해졌습니다.

요청 객체

http 통신 요청 객체에서 클라이언트가 포함한 데이터를 사용하기 위해서는 URL 을 직접 파싱해서 사용했습니다. 하지만 express 에서는 이런 것들을 미리 파싱해 주기 때문에 더욱 편리합니다.

params, query, body

const express = require('express');
let app = express();

const http = require('http');

app.get('/user/:id', (req, res, next) => {
    let params = req.params;
    let querys = req.query;
    console.log(params, querys);
    res.send('Hello Express');
});

app.post('/', (req, res, next) => {
    let body = req.body;
    console.log(body);
    res.send('/POST 요청')
})

http.createServer(app).listen(3000, () => {
    console.log('server on : 3000 PORT');
})

• GET 요청 /user/:id

라우팅을 추가했고 요청 객체에서 params, query, body 를 출력하고 있습니다.

실행 결과

• POST 요청 /

POST 로 localhost:3000/ 을 요청했다면 undefined가 출력될겁니다. body 를 사용하기 위해서는 body-parser 를 미들웨어로 등록해야 합니다.

const bodyParser = require('body-parser'); // 모듈 호출
app.use(bodyParser()); // 미들웨어 등록

위 코드를 추가하고 다시 POST 요청을 실행하면 아래와 같은 결과가 뜨게 됩니다.

http 에서 body 데이터를 파싱하기 위해 on('data') 로 파싱하고 on('end') 로 사용했지만, 미들웨어에 등록한 body-parser 가 이 작업을 대신 해주기 때문에 우리는 요청 객체에서 body 를 가져와 사용하면됩니다.

응답객체

express 에서는 클라이언트에게 다양한 형태로 응답할 수 있습니다.

• download() : 해당 파일을 다운로드 합니다.
• json() :JSON 형태로 데이터를 응답합니다.
• redirect() : 해당 경로로 강제이동하게 됩니다.
• render() : express 에서 제공하는 pug 와 ejs 템플릿 엔진을 HTML 로 렌더링 할때 유용하게 쓰입니다.
• send() : 전송된 데이터에 따라 알맞은 형식으로 바뀌어서 전송합니다.
• status() : 상태코드를 바꿔줄 때 사용합니다.

예시

app.get('/send', (req, res, next) => {
  res.send('hello express');
})

app.get('/redirect', (req, res, next) => {
  res.redirect('/send')
})
...

---

router

많은 API 를 관리할 때 API 에서 같은 end point 끼리 API 를 묶어서 관리할 수 있습니다.

유저에 대한 API와 게시글에 대한 API가 동시에 작성된 코드를 나누어 효율적인 API 관리를 할 수 있습니다.
express 에서 Router() 를 호출해 라우터를 등록할 수 있습니다.

Router() 는 같은 end point 들을 관리할 수 있게 도와줍니다.

const express = require('express');
let router = express.Router();

예시

router.js

const express = require('express')
let app = express();
const http - require('http')
const users = require('./users.js')
const boards = require('./boards.js')

app.use('/users', users) // endpoint 가 /users 면 users 모듈 호출
app.use('/boards', boards) // endpoint 가 /boards 면 boards 모듈 호출

http.createServer(app).listen(3000, () => {
  console.log('server on : 3000 PORT')
})

users.js

const express = require('express');
let router = express.Router();

router.get('/:id', (req, res, next) => {
  res.send('유저 정보 가져오기')
});
...
module.exports = router;

boards.js

const express = require('express');
let router = express.Router();

router.get('/:id', (req, res, next) => {
  res.send('게시글 가져오기')
});
...
module.exports = router;

---

참고도서 : 자바스크립트로 서버와 클라이언트 구축하기