블로그 만들기 - koa-router 사용하기

기본 사용법

리액트 라우터와 유사하게 Koa를 사용할 때도 다른 주소로 요청 들어오면 처리하기 위해 라우터를 사용해야 합니다.

Koa 자체에 이 기능이 내장되어 있지는 않으므로, koa-router 모듈을 설치해야 합니다.

$ yarn add koa-router

index.js 에서 라우터를 불러와 적용해 봅니다.

const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();
const router = new Router();

// 라우터 설정
router.get('/', (ctx) => {
  ctx.body = '홈';
});
router.get('/about', (ctx) => {
  ctx.body = '소개';
});

// app 인스턴스에 라우터 적용
app.use(router.routes()).use(router.allowedMethods());

app.listen(4000, () => {
  console.log('Listening to port 4000');
});

라우터를 설정할 때 router.get의 첫 번째 파라미터는 라우트의 경로를 넣고, 두 번째 파라미터에는 해당 라우트에 적용할 미들웨어 함수를 넣습니다. get은 HTTP 메서드로 post, put, delete를 넣을 수 있습니다.

 

라우트 파라미터와 쿼리

라우터의 파라미터를 설정할 때는 /about/:name 형식으로 콜론(:)을 사용하여 라우트 경로를 설정합니다.

만약 파라미터가 옵션인 경우 /about/:name? 형식과 같이 파라미터 이름 뒤에 물음표를 사용합니다.
이렇게 설정한 파라미터는 ctx.params 객체에서 조회할 수 있습니다.

 

URL 쿼리의 경우 (예: /posts/?id=10) 해당 값을 ctx.query 에서 조회 가능

쿼리 문자열을 자동으로 객체 형태로 파싱 하므로 별도의 파싱 함수를 둘 필요 없습니다.

(문자열 형태의 쿼리 문자열을 조회해야 할 때는 ctx.querystring 을 사용)

// 라우터 설정
router.get('/', (ctx) => {
  ctx.body = '홈';
});
router.get('/about:name?', (ctx) => {
  const { name } = ctx.params;
  // name의 존재 유무에 따라 다른 결과 출력
  ctx.body = name ? `${name}의 소개` : '소개';
});

router.get('/posts', (ctx) => {
  const { id } = ctx.query;
  // id 존재 유무에 따라 다른 결과 출력
  ctx.body = id ? `포스트 #${id}` : '포스트 아이디가 없습니다.';
});

파라미터와 쿼리는 둘 다 주소를 통해 특정 값을 받아올 때 사용하지만 용도가 다릅니다.

일반적으로 파라미터는 처리할 작업의 카테고리를 받아 오거나 고유 ID 혹은 이름으로 특정 데이터를 조회할 때 사용

쿼리는 옵션에 관련된 정보를 받아옴

(예: 쿼리는 여러 항목을 리스링 하는 API 경우 어떤 조건을 만족하는 항목을 보여줄지, 어떤 기준으로 정렬할지 정해야 할 때 사용)

 

REST API (Representational  State Transfer API)

웹 애플리케이션을 만들려면 데이터베이스에 정보를 입력하고 읽어 와야 하는데 보안 목적으로 직접 데이터베이스에 접근하는 것을 막기 위해 REST API를 만들었습니다.

REST API는 요청 종류에 따라 다음과 같이 다른 HTTP 메서드를 사용합니다.

메서드	설명
GET	데이터를 조회할 때 사용
POST	데이터를 등록할 때 사용. 인증작업을 거칠 때 사용하기도 함
DELETE	데이터를 지울 때 사용
PUT	데이터를 새 정보로 통째로 교체할 때 사용
PATCH	데이터의 특정 필드를 수정할 때 사용

REAT API를 설계할 때는 API 주소와 메서드에 따라 어떤 역할을 하는지 쉽게 파악할 수 있도록 작성해야 합니다.

블로그 포스트용 REST API 를 예시로 살펴보면 다음과 같습니다.

종류	기능
POST /posts	포스트 작성
GET   /posts	포스트 목록 조회
GET   /posts/:id	특정 포스트 조회
DELETE /posts/:id	특정 포스트 삭제
PATCH /posts/:id	특정 포스트 업데이트 (구현 방식에 따라 PUT 사용 가능)
POST /posts/:id/comments	특정 포스트에 댓글 등록
GET /posts/:id/comments	특정 포스트의 댓글 목록 조회
DELETE /posts/:id/comments/:commentId	특정 포스트의 특정 댓글 삭제

라우트 모듈화

프로젝트 진행시 여러 종류의 라우트를 만들게 되는데 각 라우트를 index.js 파일 하나에 모두 작성하면 코드가 너무 길어지고 유지보수도 힘들어 집니다.

따라서 라우터를 여러 파일에 분리시켜서 작성하고, 이를 불러와서 적용하는 예시를 만들어 봅니다.

src 디렉토리에 api 디렉토리를 만들고 그 안에 아래와 같이 index.js 파일을 만듭니다.

const Router = require('koa-router');
const api = new Router();

api.get('/test', (ctx) => {
  ctx.body = 'test 성공';
});

// 라우터를 내보냅니다.
module.exports = api;

그 다음에 이 api 라우트를 src/index.js 파일에 불러와서 기존 라우터에 /api 경로를 적용합니다.

기존에 만들었던 라우트는 제거합니다.

const Koa = require('koa');
const Router = require('koa-router');

const api = require('./api');

const app = new Koa();
const router = new Router();

// 라우터 설정
router.use('/api', api.routes()); // api 라우트 적용

// app 인스턴스에 라우터 적용
app.use(router.routes()).use(router.allowedMethods());

app.listen(4000, () => {
  console.log('Listening to port 4000');
});

api 라우터를 서버의 메인 라우터의 /api 경로로 설정하여 /api/test 경로로 요청하면 'test 성공' 문자열이 표출됩니다.

posts 라우트 생성

api 라우트 내부에 posts 라우트를 만들어 봅니다.

api 디렉터리에 posts 디렉터리를 만들고 그 내부에 index.js 파일을 다음과 같이 만듭니다.

const Router = require('koa-router');
const posts = new Router();

const printInfo = (ctx) => {
  ctx.body = {
    method: ctx.method,
    path: ctx.path,
    params: ctx.params,
  };
};

posts.get('/', printInfo);
posts.post('/', printInfo);
posts.get('/:id', printInfo);
posts.delete('/:id', printInfo);
posts.put('/:id', printInfo);
posts.patch('/:id', printInfo);
module.exports = posts;

posts 라우트에 여러 종류의 라우트를 설정한 후 모두 printInfo 함수를 호출하도록 설정했습니다.

문자열이 아닌 JSON 객체를 반환하도록 설정하고, 이 객체에는 요청의 메서드, 경로, 파라미터를 담았습니다.

그리고 posts 라우트를 api 라우트에 다음과 같이 연결 합니다. 

const Router = require('koa-router');
const posts = require('./posts');

const api = new Router();

api.use('/posts', posts.routes());
// 라우터를 내보냅니다.
module.exports = api;

기존 test 라우트는 지우고 posts 라우트를 불러와서 설정합니다.

우선 GET /api/posts 라우터부터 테스트해봅니다.

이와 같이 GET 메서드를 사용하는 API는 웹브라우저에서 주소를 입력하여 테스트 할 수 있지만,

POST, PUT, DELETE, PATCH 메서드를 사용하는 API는 자바스크립트를 호출해야 합니다.

 

우선 자바스크립트로 호출하는 대신 편의상 REST API 요청 테스트를 쉽게 할 수 있는 Postman 이라는 프로그램을 설치하여 사용해 봅니다.