05. koa-router 사용하기

우리가 리액트를 배울 때, react-router 라는, 브라우저상의 라우팅을 돕는 라이브러리를 사용해보았습니다. Koa 를 사용 할 때에도, 다른 주소로 요청이 들어 왔을 때, 다른 작업을 처리하기 위하여 라우터를 사용해야합니다. 이 기능은, Koa 자체에 내장되어있지 않으므로, koa-router 라는 모듈을 설치해주어야 합니다.

$ yarn add koa-router

기본 사용법

이제, koa-router 의 기본적인 사용법을 알아봅시다. 우선, 아까전에 연습용으로 작업했던 미들웨어들을 모두 제거하세요.

`src/index.js`

const Koa = require('koa');

const app = new Koa();

app.listen(4000, () => {
  console.log('listening to port 4000');
});
</코드>

이제, 라우터를 불러와서 적용하는 코드를 입력해보겠습니다.

<코드>src/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');
});

koa-router 를 불러온 다음, 이를 사용하여 Router 인스턴스를 생성하였습니다. 그리고, / 경로로 들어오면 “홈” 을 띄워주도록 하고, /about 경로로 들어오면 “소개” 라는 텍스트가 나타나도록 설정했습니다.

라우트를 설정 할 때에는 이렇게, 첫번째 파라미터엔 라우트의 path 를, 그 다음엔 이 라우트를 처리 할 함수를 전달하여 설정합니다.

코드를 저장 후, http://localhost:4000/ 과 http://localhosts:4000/about 페이지에 들어가보세요.

라우트 파라미터와 쿼리

이번엔, 라우트의 파라미터와 쿼리를 읽는 방법을 알아보겠습니다. 라우트의 파라미터를 설정 할 때에는, 우리가 리액트 라우터에서 파라미터를 설정 할 때와 비슷하게 라우트의 경로를 설정 할 때 /about/:name 의 형식으로, 콜론(:)을 사용하여 설정합니다. 또한, 만약에 파라미터가 있을수도 있고 없을 수도 있다면 /about/:name? 와 같은 형식으로, 파라미터의 이름 뒤에 물음표를 사용합니다. 이렇게 설정한 파라미터는, 함수 상에서 ctx.params 객체에서 조회 할 수 있습니다.

URL 쿼리의 경우엔, 예를들어 /posts/?id=10 과 같은 형식으로 요청이 되었다면, { id: ‘10’ } 의 형태의 객체를 ctx.query 에서 조회 할 수 있게 됩니다. 쿼리 스트링을 자동으로 객체형태로 파싱 해 주므로 별도로 파싱함수를 돌릴 필요가 없습니다. (만약에 문자열 형태의 쿼리스트링을 조회해야 할 경우엔 ctx.querystring 을 사용하시면 됩니다)

파라미터와 쿼리를 사용하는 라우트를 다음과 같이 생성해보세요:

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/:name?', (ctx) => {
  const { name } = ctx.params;
  // name 의 존재 유무에 따라 다른 결과 출력
  ctx.body = name ? `${name}의 소개` : '소개';
});

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

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

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

코드를 작성하고, http://localhost:4000/about/react, http://localhost:4000/posts, http://localhost:4000/posts/?id=10 링크에 들어가보세요.

다음 이미지처럼, 다른 경로에 따라 다른 결과물이 나타나나요?

05. koa-router 사용하기