[ Koa ] koa-router 사용하기

ma.caron_g·2022년 12월 26일
Koakoa router코아코아 라우터
0

koa

목록 보기
3/3
post-thumbnail

<참고 링크>

[ koa-router 사용 ]

요청이 들어왔을 때, 경로에 따라 다른 작업을 할 수 있게 해주는 koa-router에 대해서 알아보겠습니다.

이는 Koa에 내장되어 있는 것이 아니므로, 따로 모듈을 설치해주어야합니다.

$ yarn add koa-router

[ 기본 사용법 ]

이제 koa-router의 기본 사용법을 알아보도록 하겠습니다.

그 전에 아까 작성했었던 미들웨어는 모두 제거합니다.

[ 📁src/📋server.js ]

const koa = require('koa');
const app = new Koa();

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

이제 라우터를 불러와서 적용하는 코드를 입력해봅시다.

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

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

router.get('/', (ctx, next) => {
  ctx.body = '홈';
});

app.use(router.routes());
app.use(router.allowedMethods());

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

Router 인스턴스를 새로 생성하여 router 값에 넣었고, /경로를 들어오면 "홈" 이라는 내용으로 응답하도록 라우터를 설정하였습니다.

이제 포트 4000번 (http://localhost:4000)에 들어가면 "홈"이라는 텍스트가 뜰 것입니다.

[ 여러 개의 라우터, 라우트 파라미터 ]

여러 개의 라우트를 설정하는 방법과, 라우트 파라미터를 읽어오는 방법을 알아보겠습니다.

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

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

router.get('/', (ctx, next) => {
  ctx.body = '홈';
});

router.get('/login', (ctx, next) => {
  ctx.body = '로그인';
});

router.get('/login/:name', (ctx, next) => {
  const { name } = ctx.params;
  ctx.body = name+'의 소개'
});

router.get('/post'. (ctx, next) => {
  constt { name } = ctx.params;
  ctx.body = name + '님의 소개};
)};

routger.get('/post', (ctx, next) => {
  const { id } = ctx.request.query;
  if(id) {
    ctx.body = '포스트 #' + id;
  } else {
    ctx.body = '포스트 아이디가 없습니다.;
  }
});

app.use(roter.routes()).use(router.allowedMethods());

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

다음과 같이 라우트를 설정해주었습니다.

  • /
  • /login
  • /login/[사용자 정의 값 = name]
  • /post

3번 째의 경우에는 값이 동적으로 들어갈 수 있도록, 뒤에 name이라는 파라미터를 넣어줍니다.
4번 째의 경우엔 ?id=10 이런식으로 쿼리 파라미터가 들어갈 수 있게 해주었습니다.

다음 주소들을 하나씩 들어가서 잘 작동하는지 확인해보세요.



[ 라우트 모듈화 ]

프로젝트에는 여러가지의 라우터를 작성하게 됩니다.

하지만, 각 라우트를 지금 server.js에 다 작성하게 되면 코드가 너무 길어집니다.

그러면 유지보수도 하기 어려워집니다.

이를 해결하기 위해서 라우터를 다른 파일에 작성 후 불러오는 방법을 알아보겠습니다.

📁src 폴더에 📁api 폴더를 생성하고 📋index.js 파일을 생성합니다.

// src/api/index.js
const Router = require('koa-router');

const api = new Router();

api.get('/books'/, (ctx, next) => {
  ctx.body = 'GET' + ctx.request.path;
});

module.exports = api;

books라는 API를 준비했다고 가정합니다.

우리가 이번에 백 엔드 서버 작업을 본격적으로 시작하기 전에, 우리는 예제 삼아 책에 관련된 REST API를 만들어보고, 작동 방식을 이해하고 난 다음에, 프로젝트를 위한 API를 만들도록 하겠습니다.

이제, 이렇게 묘듈로 작성된 라우트를 서버 엔트리 파일에

📁src폴더에 📋server.js에서 불러와서 사용해보겠습니다.

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

const app = new Koa();
const router = new Router();
const api =require('./api');

// api 라우트를 /api 경로 하위 라우트로 설정
router.use('/api', api.routes());

app.use(router.routes()).use(router.allowedMethods());

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

그 후, http://localhost:4000/api/books 경로로 브라우저를 접속합니다.

다음과 같이 작동합니다.

우리가 앞으로 api를 여러 종류를 만들건데, 각 종류들마다 파일을 분리해보도록 하겠습니다.


📁api 디렉토리 안에 📁books라는 디렉토리를 만들고 그 안에 📋index.js를 만듭니다.

// src/api/books/index.js

const Router = require('koa-router);

const books = new Router();

books.get('/', (ctx, next) => {
  ctx.body = 'GET' + ctx.request.path;
});

module.exports = books;

그 다음에 api 인덱스 파일에서 /books 경로에 방금 만든 라우트를 연결해주겠습니다.

// src/api/index.js

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

const api = new Router();
const books = require('./books');

api.use('/books', books.routes());

module.exports = api;

[ 여러 메소드 사용해보기 ]

REST API에서는 요청의 종류에 따라 다른 HTTP 메소드를 사용합니다.
HTTP 메소드는 여러 종류가 있는데 그 중 주로 사용되는 것은

  • GET : 데이터를 가져올 때 사용합니다.
  • POST : 데이터를 등록할 때 사용합니다. 혹은 인증 작업을 거칠 때도 사용됩니다.
  • DELETE : 데이터를 지울 때 사용합니다.
  • PUT : 데이터를 교체할 때 사용합니다.
  • PATCH : 데이터의 특정 필드를 수정할 때 사용합니다.

라우터에서 각 메소드에 대한 요청을 준비할 때는,
.get, .post, .delete, .put, .patch를 사용하면 됩니다.

// src/books/index.js
const Router = require("koa-router");

const books = new Router();

const handler = (ctx, next) => {
  ctx.body = `${ctx.request.method} ${ctx.request.path}`;
};

books.get('/', handler);

books.post('/', handler);

books.delete('/', handler);

books.put('/', handler);

books.patch('/', handler);


module.exports = books;

이제 Postman이라는 프로그램을 사용하여
HTTP 클라이언트 도구를 사용해서 우리가 준비한 get/post/delete/put/patch 메소드를 테스트해보세요.

방금 작성했던 코드처럼, 각 메소드를 처리하는 함수를 따로 분리시켜서 작성 할 수도 있습니다.
라우트를 작성 할 때에는, 각 라우트에 해당하는 핸들러를 따로 작성하는 것이 좋습니다. 그 이유는, 그러게 해야 라우트들을 한 눈에 보기 쉽습니다.

이제 라우트에 대한 핸들러 books 디렉토리에 books.controller.js 파일로 분리시켜보도록 하겠습니다.

exports.list = (ctx) => {
  ctx.body = "listed";
};

exports.create = (ctx) => {
  ctx.body = "created";
};

exports.delete = (ctx) => {
  ctx.body = "deleted";
};

exports.replace = (ctx) => {
  ctx.body = "replaced";
};

exports.update = (ctx) => {
  ctx.body = "updated";
};

이렇게, exports.변수명 = ...으로 내보내기 한 코드는, 파일을 불러올 때 다음과 같이 사용할 수 있습니다.

const [모듈명] = require('[파일명]');
[모듈명].[변수명]

코드를 내보낼 때에는, 일반 변수값을 내보낼 수도 있으며, 함수를 내보낼 수도 있습니다.

그럼 방금 작성한 코드에 맞춰서 books 인덱스 파일을 업데이트 해주겠습니다.

// src/api/books/index.js

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

const books = new Router();
const booksCtrl = require('./books.controller');

books.get('/', booksCtrl.list);
books.post('/', booksCtrl.create);
books.delete('/', booksCtrl.delete);
books.put('/', booksCtrl.replace);
books.patch('/', booksCtrl.update);

이제 각 API들이 잘 동작하는지 테스팅 해보세요.

PATCH 사용 시 아래 updated가 출력됩니다.

profile
ma.caron_g
다른 사람이 만든 것을 소비하는 활동보다, 내가 생산적인 활동을 하는 시간이 더 많도록 생활화 하자.
이전 포스트

[ Koa ] Nodemon 사용

0개의 댓글