Node.js로 뭔가 만들어보자 - 3. express router 로 라우팅하기

지금까지 만들어진 코드 중 다음과 같은 부분이 있었다.

// routes/index.js var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.render('index', { title: 'Express' }); });

무슨 내용이냐하면, express 의 router 모듈을 활용하여 요청에 대한 방향(?)을 잡아주는 내용이다.

현재 node 명령을 통해 이 서버를 구동 시키면 다음과 같은 url로 만들고 있는 서비스에 접속할 수 있다.

http://localhost:3000

이 url 뒤의 내용부터가 이 서비스에서 어떤 기능을 사용할 지 요청의 목적지를 가리키는 부분이다.

예를 들어 이 서비스가 여러가지 페이지를 제공한다고 했을 때, 게시판 페이지로 이동하고 싶으면 다음과 같은 경로로 접근할 수 있을 것이다.

http://localhost:3000/board

따라서 위의 코드 내용은 '/' 라는 주소를 요청을 했을 때 어떤 서비스(기능, 데이터)를 제공해줄지 서술된 함수라고 할 수 있다. 너무 기본적인 내용이었나.....

아무튼 그리하여 지금부터 짧게 라우팅 부분을 만들어보도록 하자.

여기서 만들어 볼 게시판 기능은 앞서 언급했던 것 처럼 고작 게시판 주제에 Restful 서비스를 제공할 것이다.

Rest한 서비스가 뭐냐하면................나도 잘 모르지만;;

여하튼 내가 접근할 자료(resource)를 어떻게 핸들링 할 지를 url로 표현하는 것 정도로 정리할 수 있겠다.

예를 들어 설명하면 사용자에 대한 정보를 다루는 서비스는 url이 다음과 같을 것이다.

http://localhost:3000/user

이 url에 대한 http 요청 method(GET, PUT, POST, DELETE)를 통해 어떻게 핸들링 할 지 결정해주는 것이다.

"무조건 이거다." 라는 정답은 아니지만 Restful 서비스 예를 다시 정리해보겠다.

• 사용자 목록 조회 : GET - /user
• 사용자 단건 조회 : GET - /user/:id
• 사용자 추가 : POST - /user
• 사용자 수정 : PUT - /user/:id
• 사용자 삭제 : DELETE - /user/:id

이 글에서는 게시판을 간단히 만들어 볼 것이기 때문에 게시글에 대한 Restful 서비스를 구현해보도록 하자.

지난 포스팅에서 구조를 잡을 때 Restful 서비스에 대한 기능은 "api" 폴더에 구성하기로 했었다.

게시글에 대한 서비스를 만들기 위해 먼저 api 폴더 하위에 "board" 라는 폴더를 만들자. (나중에 다른 서비스들이 추가되었을 때 구분하기 위해)

그리고 기본 파일로 index.js를 추가하자.

위에서 언급했던 것 처럼 board 라는 resource에 대한 서비스를 이 api/board 폴더에 구현할 것이기 때문에, 

"/board" 라는 url로 요청이 올 때 이 폴더로 라우팅을 해주어야 한다.

현재 라우팅에 대한 코드는 다음 두개의 파일에 명시되어 있다.

//app.js app.use('/', routes); app.use('/users', users);

// routes/index.js var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.render('index', { title: 'Express' }); }); module.exports = router;

app.js 에 라우팅을 위한 router를 등록하고 각 router에서 페이지를 리턴하는 등의 서비스를 제공하고 있는 모습이다.

이제 api 폴더에 구현할 서비스에 대해 라우팅을 설정해보자.

우선 어떤 모델(resource)에 대한 Restful 서비스 요청은 url의 시작을 /api 로 하는 것으로 정의하자.

그러면 게시글에 대한 조회 서비스는 다음과 같을 것이다.

게시글 목록 조회 : GET - /api/board

이것에 해당하는 라우터를 등록해보겠다.

//app.js const routes = require('./routes'); // 메인 router 등록 app.use('/', routes);

// routes/index.js const express = require('express'); const router = express.Router(); router.use('/api', require('../api')); module.exports = router;

// api/index.js 'use strict'; const express = require('express'); const router = express.Router(); router.use('/board', require('./board')); module.exports = router;

// api/board/index.js 'use strict'; const express = require('express'); const router = express.Router(); // logic이 들어갈 controller 부 const controller = require('./board.controller'); // 요청 method 별로 라우팅 router.get('/', controller.list); router.get('/:id', controller.detail); router.post('/', controller.create); router.put('/:id', controller.update); router.delete('/:id', controller.delete); module.exports = router;

뭐가 많다.

파일이 3~4개 있지만 모두 라우팅을 담당하는 파일 들이다.

1. 우선 app.js 에서 최초로 정의한 router인  routes/index.js 에서는 '/api' 요청에 대한 라우팅을 담당했다.

추후에 api 서비스 외 페이지나 기타 다른 종류의 서비스를 분기할 때 이 router에서 처리해주면 된다.

2. 다음 api 하위 서비스들에 대해서 resource 별로 요청을 처리하는 라우터를 등록하는 '/api/index.js' 파일이 있다.

3. 마지막으로 board 리소스에 대한 서비스를 처리하는 '/api/board/index.js' 파일이 있다.

꼭 저렇게 할 필요는 없지만.........그냥 나는 저게 익숙하고 구분이 잘 가서 (찾기 쉬워서) 저런 식으로 구성하는 편이다.

더 좋은 구성이 있으면 알려주세요...

이제 진짜로 무언가 내용을 만들어서 보내주는 controller 를 구성해보자.

// api/board/board.controller.js 'use strict'; module.exports.list = function (req, res){ res.status(200).json({ method: '목록조회' }); } module.exports.detail = function (req, res){ res.status(200).json({ method: '단건조회' }); } module.exports.create = function (req, res){ res.status(200).json({ method: '추가' }); } module.exports.update = function (req, res){ res.status(200).json({ method: '수정' }); } module.exports.delete = function (req, res){ res.status(200).json({ method: '삭제' }); }

여기에서는 간단하게 json 데이터를 응답 데이터로 포함해주었다.

원하는 요청이 잘 처리되는지 확인하기 위해서 브라우저에서 다음과 같이 url을 입력해보자.

http://localhost:3000/api/board

위 url을 브라우저를 통해 접속하게 되면 GET method가 호출되게 되어 다음과 같은 내용이 출력된다.

{"method":"목록조회"}

우선 목록 조회에 해당하는 요청은 테스트 해보았는데...

POST나 PUT, DELETE에 해당하는 서비스는 어떻게 테스트 해 볼 수 있을까?

간단하게 해당 method로 서비스를 호출하는 페이지를 javascript로 만들면 된다.!!!! 

지금부터 메모장을 열어서 test.html 파일을 만들고 javascript 로 ajax 서비스를 호출하기 위해서 jquery를 import하고...

이런 삽질 수고로움을 줄이기 위해서 잠깐 간단한 Tool을 소개해보겠다.

구글에서 "postman"이라고 검색해보면 우체부 아저씨 사진이 나올 줄 알았는데, 왠 앱이 하나 나온다.

이 Tool은 API서비스를 테스트해 볼 수 있는 기능을 가지고 있다. (윈도우에서는 Chrome extension 형태만 제공된다.)

Postman 을 활용하여 POST나 PUT, DELETE에 해당하는 기능을 테스트 할 수 있다.

 

POST 테스트

PUT 테스트

DELETE 테스트

지금까지 Express의  router를 활용하여 Restful 서비스 개발을 위한 기본적인 구조를 만들어보았다.

다음 포스팅을 통해 진짜 데이터를 CRUD 하는 실습을 해보자.