리액트를 다루는 기술 - Koa 프레임워크, nodemon, koa-router

Node.js 환경에서 웹 서버를 구축하는 Koa 웹 프레임워크

 

1. Koa는 필요한 기능들만 붙여서 서버를 만들 수 있다.

Koa는 미들웨어 기능만 있으며 나머지는(라우팅, 템플릿 파일 호스팅 등) 기능들은 다른 라이브러리를 적용하여 사용한다.

(무게 : koa < Express

Express는 미들웨어, 라우팅, 템플릿 파일 호스팅 등 다양한 기능이 내장되어있다.)

2. Koa는 async/await 문법을 정식으로 지원해 비동기 작업을 더 편리하게 관리 할 수 있다.

 

---

Koa 기본 사용법

0. Koa 웹 프레임워크 설치하기

yarn add koa

1. 서버 띄우기

const Koa = require('koa');

const app = new Koa();

// app.use() : 미들웨어 함수를 애플리케이션에 등록함.
app.use(ctx=>{
	ctx.body='hello world'
});

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

Koa의 미들웨어 함수의 구조

(ctx, next) => { }

ctx : Context의 줄임말, 웹 요청과 응답에 대한 정보를 지님 (ctx.params, ctx.query 등으로 사용)

next : 현재 처리중인 미들웨어의 다음 미들웨어를 호출하는 함수 (Promise를 반환 - 다음 처리할 미들웨어가 끝나야 완료.) next 함수를 호출하지 않으면, 그다음 미드루에어를 처리하지 않는다. 미들웨어는  app.use()를 사용해 등록되는 순서대로 처리된다. 이를 적용해, 조건부로 다음 미들웨어 처리를 무시하게 만들 수 있다,

 

 

2. async/await 사용하기

const Koa = require('koa');

const app = new Koa();

app.use(async (ctx, next) => {
  console.log(ctx.url);
  console.log('1');
  if (ctx.query.authorized !== '1') {
    ctx.status = 401; // Unauthorized
    return;
  }
  await next();
  console.log('END');
});

app.use((ctx, next) => {
  console.log('2');
  next();
});

// 서버를 포트 4000번으로 열고, 서버에 접속하면 'hello word'라는 텍스트를 반환
app.use((ctx) => {
  ctx.body = 'hello world';
});

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

---

nodemon 사용하기

nodemon이라는 도구를 사용하면 코드를 변경할 때마다 서버를 자동으로 재시작함.

 

0. nodemon 개발용 의존 모듈로 설치하기

yarn add --dev nodemon

1. package.json 수정하기 (하단 코드 추가)

  "start:dev" : "nodemon --watch src/ src/index.js "

→ src 디렉터리를 주시하며, 해당 디렉터리 내부의 파일 변경을 감지해 src/index.js 파일 재시작

  "scripts": {
    "start": "node src",
    "start:dev" : "nodemon --watch src/ src/index.js "
  }
}

2. 명렁어를 사용해 서버를 시작하기

yarn start # 재시작이 필요 없을때
yarn start:dev # 재시작이 필요할 때

---

koa-router 사용하기

Koa도 다른 주소로 요청이 들어올 경우 다른 작업을 처리할 수 있도록 라우터를 사용해야 하지만, 

Koa 자체에 이 기능이 내장되어 있지않아,  koa-router  모듈을 설치해야 한다.

 

0. koa-router 설치하기

yarn add koa-router

 

1. 기본 사용법

router.get(라우트의 경로, 해당 라우트의 적용할 미들웨어 함수)

↗ 여기서  get 키워드는 해당 라우트에서 사용할  HTTP 메서드를 의미 (≒post, delete 등)

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('Listen to port 4000');
});

---

라우트 파라미터와 쿼리

 

라우터의 파라미터를 설정할 때는 

/about/:name 

콜론(:)을 사용해 라우트 경로를 설정한다. (리액트 라우터와 비슷)

파라미터가 있을 수도, 없을 수도 있다면 → about/:name?

 

설정한 파라미터는 ctx.params 객체에서 조회가 가능

 

URL 쿼리, /posts/?id=10 같은 형식으로 요청했다면

해당 값은 ctx.query로 조회할 수 있다.

 

파라미터와 쿼리 둘 다 주소를 통해 특정 값을 받아올 때 사용한다.

일반적으로

파라미터는 처리할 작업의 카테고리, 고유 ID, 이름 등 특정 데이터 조회 시 사용

쿼리는 옵션에(조건, 정렬 기준) 관한 정보를 받아온다.