간단한 API 만들기

어제 밤 밍석이의 열띤 설명으로! 이제 프론트엔드와 백엔드의 경계에 대해 어느 정도 파악할 수 있었다.

나는 이제까지 response.send(html);을 하는 방법으로 웹사이트를 만들었다. 현재는 html로 프론트엔드를 간단하게 만들었지만, 나중에 html이 아닌 react 같은 프론트엔드로 프로젝트를 하면 백엔드에서 어떻게 대해야 하는지?!에 대한 고민이 많았다. 간단하게, 그쪽에서 요청(request)을 던지면 응답(response)으로 json 등 요구하는 정보를 던져주면 되는 것이었다!

이제까지 그걸 던져준 다음 어떡해?!와 같은 고민을 했는데 내가 했던 고민들은 프론트엔드의 영역이었던 것이다.

그러니까 백엔드를 하고 싶다면 API를 어떻게 만들고, 또 어떻게 해야 잘 만들지 그 쪽으로 고민하면 될 것 같다 !

---

참고한 글 목록

• https://hanswsw.tistory.com/18 
• https://gaemi606.tistory.com/entry/Nodejs-Express-generator-%EA%B0%84%EB%8B%A8-%EA%B5%AC%EC%A1%B0-%ED%8C%8C%EC%95%85-PM2%EC%82%AC%EC%9A%A9

---

프로젝트 생성

express generator을 이용하여 기본적인 구조와 파일을 생성하자.

나는 이전에 express generator을 설치하였는데, 설치되지 않았다면

npm install -g express-generator

로 설치할 수 있다.

 

프로젝트를 만들 폴더로 이동해서, express (프로젝트 이름)으로 프로젝트를 생성하자.

express testapp
express testapp --no-view (view 폴더 없이 하고 싶을 때)

 

서버를 구동하기 위해서 '>'에 나온 명령어대로 따라하자.

cd testapp
npm install
SET DEBUG=testapp:*
npm start

** SET DEBUG=testapp:* & npm start라고 치는거 아님! (사실 내가 이렇게 했음 ㅋㅋ ^_ㅠ)

 

서버 구동 성공

 

프로젝트 구조 및 GET 요청에 응답하는 API 제작

디렉토리 구조

express generator로 생성한 프로젝트의 디렉토리 구조에 대해 먼저 알아보자.

실질적인 웹 서버 구축에 관한 파일은 bin/www와 app.js이다.

• bin/www는 app.js에서 정의한 express에 관한 설정을 받아서 서버를 실행하게 된다.
• app.js에서는 app.use()를 통하여 각종 미들웨어를 추가한다.
• 또, app.use('/', indexRouter);를 통해 라우팅을 해준다. ( var indexRouter = require('./routes/index'); )

이제, indexRouter가 의미하는 routes/index.js로 들어가보자.

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

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

index.js의 기본 코드로, router.get()을 통해 '/'로 get 방식의 요청이 왔을 때, render 함수로 응답을 해주도록 되어있다.

 

API서버 구축을 위해 res.render() 대신 res.status.json()을 이용하자.

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

/* GET home page. */
router.get('/', function(req, res, next) {
  res.status(200).json({
    "success": true
  });
});

module.exports = router;

 

npm start를 다시 해주어 GET 요청이 왔을 때 응답을 잘 해주는지 확인해보자.

잘 되는 것을 확인할 수 있다!

 

 

express generator 프로젝트에서 pm2 사용하기

 

나는 패키지 매니저로 pm2를 사용하고 있는데, node start 대신 내가 사용하던 pm2를 사용하여 서버를 열고 싶다!

POST 방식의 요청을 처리하는 API를 만들기 전에 express generator로 생성한 프로젝트에서 pm2를 사용하는 방법을 알아보자.

 

package.json을 아래와 같이 수정해주자.

"start": "pm2 start ./bin/www --watch --no-daemon",
"stop": "pm2 kill"

{
  "name": "testapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "pm2 start ./bin/www --watch --no-daemon",
    "stop": "pm2 kill"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  }
}

pm2 start ./bin/www가 기본 명령어이다. 나는 코드 변경을 즉각 반영해주기 위해 --watch를, log를 확인하기 위해 --no-daemon을 추가로 작성해주었다.

그리고, --no-daemon 때문인지 Ctrl+C로 로그에서 나왔을 때 서버가 꺼지는 경우가 있고, 아닌 경우가 있다. 그래서 서버를 확실히 끄기 위해 pm2 kill을 사용했다.

 

이제 이어서 POST 방식의 요청을 처리하는 API를 만들어보자~

 

POST 요청에 응답하는 API 만들기

 

원리는 앞에서 했던 것과 비슷하다. 근데 이번에는 다른 방식으로 확인을 해보자.

 

router.get('/msg', function(req, res){
  var html =
  `
  <form action="/msg/content" method="post">
    <p><input type="text" name="message"></p>
    <p><input type="submit"></p>
  </form>
  `;
  res.send(html);
});

이렇게 간단하게 message를 전달하는 페이지를 만들자.

POST 방식으로 message를 요청하면, 서버 쪽에서 유저가 보낸 message를 응답해주도록 하자.

 

router.post('/msg/content', function(req, res){
  const msg = req.body.message;
  res.status(200).json({
    "message from user": msg
  });
});

req.body.message를 이용하여 유저가 보낸 message를 읽었다.

이번에도 응답이 제대로 전달된 것을 볼 수 있다! (oﾟvﾟ)ノ

 

 

컨트롤러 생성 및 리팩토링

 

라우터에서는 API의 URL만 정의하도록 하고, 실질적인 요청에 대한 처리는 컨트롤러를 만들어서 처리하도록 구조를 바꿔보자.

 

우선 controllers 폴더를 만들고 앞서 작성한 index.js를 그 안으로 옮기자.

 

< controllers/index.js >

const { response, request } = require('express');
var express = require('express');
var router = express.Router();

/* GET home page. */
function basicAPI(req, res){
  return res.status(200).json({
    "success": true
  });
}

function msgAPI(req, res){
  const msg = req.body.message;
  return res.status(200).json({
    "message from user": msg
  });
}

module.exports = {
  basicAPI: basicAPI,
  msgAPI: msgAPI
}

 

그리고 routes/index.js를 아래와 같이 수정해준다.

< routes/index.js >

const { response, request } = require('express');
var express = require('express');
var router = express.Router();

const index = require('../controllers/index');

router.get('/', index.basicAPI);

router.get('/msg', function(req, res){
  var html =
  `
  <form action="/msg/content" method="post">
    <p><input type="text" name="message"></p>
    <p><input type="submit"></p>
  </form>
  `;
  res.send(html);
});

router.post('/msg/content', index.msgAPI);

module.exports = router;

 

이런 식으로 controllers에서는 API를 모듈화하여 정의하고, routes에서는 API들을 불러와 사용하기만 하면 프로젝트가 좀 더 구조화되고, 깔끔해질 수 있다.

 

+ 현재 프로젝트에서는 모든 API를 하나의 컨트롤러에 담았지만, 용도나 목적에 따라 여러 컨트롤러에 API를 나눠서 작성하는 것이 권장된다 !