koa-router
Koa 프레임워크를 처음 소개할 때, Express와 비교했었죠? Express에는 기본적으로 다양한 미들웨어, 기능들이 포함되어 있지만, Koa는 가볍게 만들어져서 필요한 기능들만 사용자가 직접 추가할 수 있다고 했었습니다.
Koa에는 Express와 다르게 라우터 기능이 내장되어있지 않아서, 따로 설치해서 이용해야하는데, 이 모듈이 바로 koa-router입니다.
npm install koakoa-router 사용해보기
그러면 koa-router를 사용해보겠습니다.
const koa = require('koa');
const Router = require('koa-router');
const app = new koa();
const router = new Router();
const PORT = process.env.PORT || 3000;
router.get('/', context => {
context.body = '홈';
});
router.get('/about', context => {
context.body = 'about';
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(PORT, () => {
console.log(`Koa is listening to port number: ${PORT}`);
});먼저, koa-router 모듈을 불러옵니다. 그리고 HTTP 요청 메소드인 get()을 이용해서 라우트를 설정합니다.
router.get('/', context => {
context.body = '홈';
});
router.get('/about', context => {
context.body = 'about';
});get()의 첫 번째 인자로 라우트 경로를 넣고, 두 번째 인자로 해당 라우트에서 동작하는 미들웨어 함수를 넣습니다. 그래서 해당 경로로 이동하면 미들웨어 함수의 내용이 실행되게 됩니다. 한 번 http://localhost:3000/와 http://localhost:3000/about에서 확인해볼까요?
파라미터와 쿼리 읽기
라우트를 통해 주소를 만들게 되면 파라미터와 쿼리를 이용하게 되는데, 이번에는 파라미터와 쿼리를 읽는 방법에 대해서 알아보겠습니다.
먼저 파라미터는 라우트 경로 설정 과정에서 콜론:으로 설정하게됩니다. 방금 사용했던 예시에 파라미터를 더한다고 치면/about/:name과 같이 사용하게 됩니다. 만약 선택적(존재/비존재가 동시에 가능한)파라미터의 경우 파라미터 이름 뒤에 물음표?를 붙여서 표기합니다. /about/:name? 처럼요. 이렇게 작성한 파라미터는 미들웨어 함수의 인자로 준 context의 .params 프로퍼티에서 접근할 수 있습니다.
쿼리스트링
쿼리는 URL에 붙어서 입력 데이터를 전달해주는 방식입니다. 원래 이름은 쿼리 스트링(Query String)이지만 편의상 쿼리라고 줄여 부르도록 하겠습니다. 쿼리는 URL 마지막에 ?로 시작되는 부분을 의미합니다.
https://velog.io/write?id=ece6214c-0317-4f1e-b320 이 URL은 지금 작성중인 포스트의 URL인데요. 마지막에 write? 이후에 나오는 값들이 쿼리입니다.(쿼리는 일부 수정을 가했습니다.) 이 처럼 쿼리는 변수=값의 쌍으로 이루어진 URL의 값입니다.
다시 돌아와서 쿼리를 읽는 방법에 대해 알아보겠습니다. 위에서 쿼리를 소개하며 나온 URL인 /write?id=ece6214c 처럼 사용되는데, 이 값은 역시 미들웨어 함수의 인자로 준 context의 .query 프로퍼티에서 읽을 수 있습니다. 만약 쿼리가 문자열형으로 이루어져 있다면 context.querystring을 이용해서 파싱 과정을 거쳐야합니다.
방금 전에 사용했던 예제 코드로 파라미터와 쿼리를 읽어보겠습니다. 위 코드에서 /about 라우터를 수정하고, /post 라우터를 추가해주세요.
router.get('/about/:name?', context => {
const {name} = context.params;
context.body = name ? `about me: ${name}` : `about`;
});
router.get('/posts', context => {
const {id} = context.query;
context.body = id ? `포스트 id: #${id}` : `포스트 id 없음`;
});먼저 http://localhost:3000/about/Bam을 입력해보세요.
다음은 http://localhost:3000/posts입니다.
마지막으로 /posts에 id쿼리를 줘보겠습니다.
