[express] 필요한 api 라우팅하기

셀프 레퍼런스

https://flreauniverse.tistory.com/19 (rest API의 사용)

https://flreauniverse.tistory.com/22 (postman으로 api 테스트하기)

개요

• 라우터란?
• api 구상하기
• restful api로 라우팅하기
• api 목적에 따라 URI 분리하기

라우터란?

특정 URL이나 메서드에 대해 처리하는 방식을 결정하는 것을 뜻합니다.

쉽게말해, URL이 갈 길을 알려주는 일이라고 보시면 됩니다.

api 구상하기

먼저, 게시판답게 게시물을 관리하는 api가 필요합니다.

가장 간단한 CRUD(Create, Read, Update, Delete)만 구상했습니다.

 

Restful API로 라우팅하기

전에 만들어놓은 index.js에 다음 코드를 추가해줍니다.

import express from 'express';

const app = express();

app.post("/", (req, res) => {
  res.send('post 요청을 받았습니다.');
});

app.get("/", (req, res) => {
  res.send('get 요청을 받았습니다.');
});

app.patch("/:id", (req, res) => {
  res.send(`${req.params.id}의 업데이트 요청을 받았습니다.`);
});

app.delete("/:id", (req, res) => {
  res.send(`${req.params.id}의 삭제 요청을 받았습니다.`);
});

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

app.(메소드 이름)으로 라우팅을 할 수 있으며, 인수로 URI와 해당 요청을 받았을 때 실행할 함수를 넣으면 됩니다.

위 코드에서는 화살표 함수를 이용해 간결화 했으며, 화살표 함수에서 사용되는 req, res는 해당 요청/응답의 정보를 읽을 수 있도록 도와줍니다.

 

patch와 delete메소드를 받았을 때는 req.params로 URI PARAMS 매개변수를 읽어올 수 있도록 했습니다.

req 안에는 이 외에도 나중에 설명할 토큰에 대한 정보가 담겨있기도 하고, res의 메서드를 사용해 응답에 사용할 status를 지정해줄 수 있습니다.

api 테스트를 해보면 잘 작동하는 것을 알 수 있습니다.

 

그런데, 우리는 지금 '글'에 해당하는 라우팅만 해주었습니다.

나중에는 사용자도 추가해야하고, 이외에도 게시판 관리등 만들어야할 api가 많은데 URI는 한정적일까요?

API 목적에 따라 URI 분리하기

평소 사용하는 URI를 보면 http://url.com/api/post 라거나 http://url.com/api/user 와 같은 api를 본 적 있을겁니다.

이 규칙대로 분리해보겠습니다.

 

src 아래에 routes라는 폴더를 만들고, post.js라는 파일을 만들어줍니다.

앞으로 라우터는 모두 router 폴더(모듈) 안에서 처리하게 됩니다.

post.js 안에 아까 입력했던 코드들을 다시 옮겨옵니다. (index.js의 코드는 삭제해주세요.)

import express from 'express';

var postRouter = express.Router();

postRouter.post("/", (req, res) => {
  res.send('post 요청을 받았습니다.');
});

postRouter.get("/", (req, res) => {
  res.send('get 요청을 받았습니다.');
});

postRouter.patch("/:id", (req, res) => {
  res.send(`${req.params.id}의 업데이트 요청을 받았습니다.`);
});

postRouter.delete("/:id", (req, res) => {
  res.send(`${req.params.id}의 삭제 요청을 받았습니다.`);
});

export default postRouter;

이제 다시 index.js로 돌아가서 app이 router를 사용할 수 있게 해주면 됩니다.

이때, express.Router()는 하나의 클래스처럼 사용된다는 것을 유의해주세요.

import express from 'express';
import postsRouter from './posts/posts.controller.js';

const app = express();

app.use("/post", postsRouter);

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

app이 postRouter를 "post"라는 URI로 사용하게 되어있죠?

따라서 post.js라는 파일의 라우팅은 GET /post/와 같이 처리됩니다.

 

이상으로 간단하게 라우팅을 해봤고, 이제 백엔드 파트에서는 DB를 연결하여 글을 저장하고 불러오거나 업데이트, 삭제하는 함수를 만들면 얼추 모양새를 갖추게 됩니다.

참고) express는 개발자에 따라 파일구조가 천차만별인 프레임워크입니다.

이 글에서는 파일의 목적별로 구분하는 아키텍처를 채택하고 있습니다. 앞으로 폴더를 service나 model등, 파일의 목적별로 구분하여 사용합니다.