React) 21장 백엔드 프로그래밍: Koa 1

시작에 앞서 몇가지 정의에 대해 설명해 보자.

 

백앤드
데이터 등록과 조회의 방법과 구성에 관한 로직을 만드는 것

 

Node.js
자바스크립트 엔진 기반으로 웹 브라우저 뿐만 아니라
서버에서도 자바스크립트를 사용할 수 있는 런타임

 

 

Koa
Node.js 환경에서 웹 서버를 구축할 때 사용하는 웹 프레임 워크중 하나이며,
Express의 개발팀이 개발한 프레임워크이다.
Koa는 미들웨어 기능만 갖추고 있으며 나머지는 다른 라이브러리를
적용해서 사용하므로 필요한 기능만 이용해 서버를 만들 수 있어 Express보다 가볍다.
또한, async/await 문법을 정식으로 지원하기에 비동기 작업을 쉽게 관리할 수 있다.

 

 

작업 환경 준비

1. Node 설치 확인

node --version

 

2. 프로젝트 생성

순서는 디렉터리 생성 후 Koa를 설치하는 순서이다.

blog 디렉터리 생성 후 blog안에 blog-backend 디렉터리를 생성해준다.

그리고 npm init -y 으로 패키지 정보를 생성해준다.

 

이제 Koa 웹 프레임워크를 설치해 보자

npm install koa

package.json 파일을 확인해 보면 dependencies에 koa가 추가되어 있는 것을 확일할 수 있다.

 

 

3. ESLint와 Prettier 설정

자바스크립트 문법을 검사하고 깔끔한 코드를 작성하기 위해 설정해 보자

 

ESLint설치에서npm add --dev eslint 해준뒤 npx run eslint --init 해준다.(npm으로 했을 때는 에러가 나서 npx로 했다..)

그리고 체크해야 할 항목들이 나오는데 각각 To check syntax and find problems,

Common JS, None of these, Node를 선택해 준다.

 

그리고 이제 prettier를 설정해주고 eslint-config-prettier를 설치해 주자

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

이렇게 .prettierrc를 생성해 주고

npm add eslint-config-prettier 을 설치해주면 설정 파일을 만들면 된다.

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

 

 

 

Koa 기본 사용법

1. 서버 띄우기

index.js 파일에 코드를 작성해 보자.

const Koa = require('koa');

const app = new Koa();

app.use(ctx => {
  ctx.body = 'hello world';
});

//  서버 포트 설정
app.listen(4000, () => {
  console.log('Listening to port 4000');
});

node src 를 터미널에 입력해주면 서버가 실행된다.

그러면 app.listen으로 설정해준 서버 포트 주소를 입력해 접속해보면 hello world가 잘 나올것이다. 

 

 

2. 미들웨어

app.use 함수는 미들웨어 함수를 애플리케이션에 등록한다.

 

Koa의미들웨어 함수는 두개의 파라미터를 받는다.

첫번째는 ctx라는 값이며, Context의 줄임말로 웹 요청과 응답에 관한 정보를 갖는다.

두번째는 next 값이며, 현재 처리중인 미들웨어의 다음 미들웨어를 호출하는 함수이다.

 

next를 사용하지 않아도 된다.

주로 다음 미들웨어를 처리할 필요가 없는 라우트 미들웨어를 나중에 설정할 때 이러한 구조를 갖는다.

const Koa = require('koa');

const app = new Koa();

//  app.use 함수는 미들웨어 함수를 애플리케이션에 등록
//  ctx는 Context의 줄임말로, 웹 요철과 응답에 관한 정보를 지니고 있다.
//  next는 현재 처리중인 미들웨어의 다음 미들웨어를 호출하는 함수
//  미들웨어를 등록하고 next 함수를 호출하지 않으면, 그다음 미들웨어를 처리할 수 없다.

//  next() 함수가 반환하는 Promise를 이용해 .then()을 사용한 방법
app.use((ctx, next) => {
  console.log(ctx.url);
  console.log(1);
  next();
});

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

//  다음 미들웨어를 처리할 필요가 없는 라우트 미들웨어를 나중에 설정할 때 next생략하고 미들웨어 작성
app.use(ctx => {
  ctx.body = 'hello world';
});

//  서버 포트 설정
app.listen(4000, () => {
  console.log('Listening to port 4000');
});

크롬 브라우저는 사용자가 웹 페이지에 들어가면 해당 사이트의 아이콘 파일인 /favicon.ico 파일을

서버에 요청하기 때문에 결과에 / 경로도 나타나고 /favicon.ico 경로도 나타난다.

 

그리고 첫번째 미들웨어의 next()를 주석처리해주면

그 아래에 있는 미들웨어들은 모두 무시된다.

 

 

그리고 쿼리 파라미터를 사용해 미들웨어를 처리하는 코드를 확인해 보자.

const Koa = require('koa');

const app = new Koa();

//  app.use 함수는 미들웨어 함수를 애플리케이션에 등록
//  ctx는 Context의 줄임말로, 웹 요철과 응답에 관한 정보를 지니고 있다.
//  next는 현재 처리중인 미들웨어의 다음 미들웨어를 호출하는 함수
//  미들웨어를 등록하고 next 함수를 호출하지 않으면, 그다음 미들웨어를 처리할 수 없다.

//  next() 함수가 반환하는 Promise를 이용해 .then()을 사용한 방법
app.use((ctx, next) => {
  console.log(ctx.url);
  console.log(1);
  //  쿼리 파라미터를 조회하여 조건부로 미들웨어를 처리해줌
  if (ctx.query.authorized !== '1') {
    ctx.status = 401; //  Unauthorized
    return;
  }
  //  next() 함수가 반환하는 Promise는 다음에 처리할 미들웨어가 끝나야 완료된다.(Koa와 Express와 차별되는 부분)
  next();
});

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

//  다음 미들웨어를 처리할 필요가 없는 라우트 미들웨어를 나중에 설정할 때 next생략하고 미들웨어 작성
app.use(ctx => {
  ctx.body = 'hello world';
});

//  서버 포트 설정
app.listen(4000, () => {
  console.log('Listening to port 4000');
});

쿼리 파라미터는 문자열이기에 비교할 때는 꼭 문자열 형태로 비교해야 한다.

 

 

2-1 next 함수는 Promise를 반환

Koa가 Express와 차별화 되는 부분이다.

바로 next 함수를 호출하면 Promise를 반환한다는 것이다.

next가 반환하는 Promise는 다음에 처리해야 할 미들웨어가 끝나야 완료된다.

const Koa = require('koa');

const app = new Koa();

//  app.use 함수는 미들웨어 함수를 애플리케이션에 등록
//  ctx는 Context의 줄임말로, 웹 요철과 응답에 관한 정보를 지니고 있다.
//  next는 현재 처리중인 미들웨어의 다음 미들웨어를 호출하는 함수
//  미들웨어를 등록하고 next 함수를 호출하지 않으면, 그다음 미들웨어를 처리할 수 없다.

//  next() 함수가 반환하는 Promise를 이용해 .then()을 사용한 방법
app.use((ctx, next) => {
  console.log(ctx.url);
  console.log(1);
  //  쿼리 파라미터를 조회하여 조건부로 미들웨어를 처리해줌
  if (ctx.query.authorized !== '1') {
    ctx.status = 401; //  Unauthorized
    return;
  }
  //  next() 함수가 반환하는 Promise는 다음에 처리할 미들웨어가 끝나야 완료된다.(Koa와 Express와 차별되는 부분)
  next().then(() => {
    console.log('END');
  });
});

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

//  다음 미들웨어를 처리할 필요가 없는 라우트 미들웨어를 나중에 설정할 때 next생략하고 미들웨어 작성
app.use(ctx => {
  ctx.body = 'hello world';
});

//  서버 포트 설정
app.listen(4000, () => {
  console.log('Listening to port 4000');
});

첫번째 미들웨어에서 next 함수에 다음 미들웨어가 완료되면

.then(() => console.log('END') 로 완료(비동기 작업) 해준다.

 

2-2 async/await 사용하기

Koa는 정식적으로 async/await를 지원하기에 문법을 편하게 사용할 수 있다.

Express도 지원하지만 오류를 처리하는 부분이 제대로 작동하지 않을 수 있기에
express-async-error 라이브러리를 사용해야 한다.

const Koa = require('koa');

const app = new Koa();

//  app.use 함수는 미들웨어 함수를 애플리케이션에 등록
//  ctx는 Context의 줄임말로, 웹 요철과 응답에 관한 정보를 지니고 있다.
//  next는 현재 처리중인 미들웨어의 다음 미들웨어를 호출하는 함수
//  미들웨어를 등록하고 next 함수를 호출하지 않으면, 그다음 미들웨어를 처리할 수 없다.

//  async/await를 이용한 방법(나중에 try, catch를 사용해보자)
app.use(async (ctx, next) => {
  console.log(ctx.url);
  console.log(1);
  //  쿼리 파라미터를 조회하여 조건부로 미들웨어를 처리해줌
  if (ctx.query.authorized !== '1') {
    ctx.status = 401; //  Unauthorized
    return;
  }
  //  next() 함수가 반환하는 Promise는 다음에 처리할 미들웨어가 끝나야 완료된다.(Koa와 Express와 차별되는 부분)
  await next();
  console.log('END');
  
});

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

//  다음 미들웨어를 처리할 필요가 없는 라우트 미들웨어를 나중에 설정할 때 next생략하고 미들웨어 작성
app.use(ctx => {
  ctx.body = 'hello world';
});

//  서버 포트 설정
app.listen(4000, () => {
  console.log('Listening to port 4000');
});