[Koa] Koa를 사용한 웹 서버 만들기 - 1.프로젝트 생성 및 ESLint 설정 및 Koa 기본 사용법

지금부터 Koa를 사용한 웹서버 만들기를 시작해보겠 습니다.

Koa는 Node.js를 기반으로 하기 때문에 프로젝트를 생성할 때에도 

 

Node 프로젝트를 생성하는 방식과 동일합니다.

1. 프로젝트 생성 

웹서버 프로젝트를 만들기 위해 개발 폴더를 하나 생성해주고

해당 디렉토리에 yarn 명령어를 사용해 패키지 정보를 생성해줍니다.

$ mkdir koa-server 
$ cd koa-server 
$ yarn init 
$ yarn add koa

2. ESLint 설정

프로젝트를 생성했다면 이제부터는 서버파일을 작성하기 전 자바스크립트 문법을 검토해주는 

ESLint 라이브러리를 설치해서 적용하는 방법을 알아보겠습니다.

 

먼저 eslint를 설치해줍니다.

$ yarn global add eslint

그 다음, 프로젝트 내에서 다음 명령어를 실행해줍니다. 

이 명령어를 실행 시 몇가지 질문사항이 발생하는데 

아래 나오는 것과 같이 답변을 택해줍니다.

$ npx eslint --init
✔ How would you like to use ESLint? · syntax
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn

그 다음 자바스크립트 문법을 검사하기 위한, 설정파일이 하나 생성됩니다. 

이 작업이 끝나면 프로젝트 루트 디렉토리에 .eslintrc.js 파일이 하나 생성됩니다.

 

기본적으로, 세미콜론( ; )을 허용하지 않으며 그 외 엄격하게 코드 규칠을 잡는데 

이를 조금 완화할 수 있도록 설정을 넣어주면 됩니다.

 

다음 설정을 .eslint.js 파일안에 넣어줍니다.

module.exports = {
    "extends": "standard",
    "rules": {
        "indent": [
            "error",
            4
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-trailing-spaces": 0,
        "keyword-spacing": 0,
        "no-unused-vars": 1,
        "no-multiple-empty-lines": 0,
        "space-before-function-paren": 0,
        "eol-last": 0
    }
}

그 다음, VSCode(혹은 다른 에디터에서) ESLint 확장프로그램을 설치해줍니다.

문법검사를 하고 오류가 나는 부분이 있다면  해당 에디터 내에 나타납니다.

 

ESLint를 사용하는 것을 필수사항이 아닙니다. 이를 사용하는 이유는 

더욱 원활한 디버깅과, 더 깨끗하고 깔끔한 코드를 작성하기 위해서 입니다.

 

문법 설정으로는 각자 본인의 취향에 따라서 설정해주시고

ESLint를 설정하고 나서 에디터를 재시작해야 정상적으로 작동됩니다.

3. Koa 기본 사용법

3-1. 헬로 솔저

 

먼저 서버를 여는 방법부터 알아보면 다음 코드를 src 디렉토리를 생성 후 그 안에 

index.js 파일을 생성해서 그 내부에 작성합니다.

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

app.use(ctx => {
    ctx.body = "Hello Koa nice me to!!";
});

app.listen(4000, () => {
    console.log("koa server is listent to port 4000");
})

서버를 설정한뒤 그 다음 아래 명령어로 실행해봅니다.

$ node src
koa server is listent to port 4000

이제, 브라우저 내에 http://localhost:4000/ 으로 들어갈 시, Hello Koa nice me to!! 라는 텍스트가 뜹니다.

3-2. 미들웨어

Koa 어플리케이션에서는 미들웨어의 배열로 구성되어있습니다. 

우리가 위 코드에 app.use 라는 함수를 사용했는데 

 

이 코드는 미들웨어를 어플리케이션에 등록 해줍니다.

app.use(ctx => {
    ctx.body = "Hello Koa nice me to!!";
});

위 부분에  ctx => { ... } 코드가 하나의 미들웨어 인 것이고

koa의 미들웨이 함수에선 두가지의 파라미터를 받습니다.

 

첫번째는 위 코드에서 나오는 ctx 부분입니다.

두번째는 next 입니다.

  

ctx는 웹 요청과, 응답에 대한 정보를 지니고

next는 다음 미들웨어를 실행시켜주는 함수입니다.

 

만약 미들웨어에서 next를 호출하지 않을 시 

그 부분에서 요청처리를 완료시키고 응답을 하게 됩니다.

 

그리고, 미들웨어는 등록하는 순간 실행을 하게 됩니다.

우선 다음과 같이 기록을 하는 미들웨어 두개를 

기존 미들웨어 상단에 넣어보세요

 

src/index.js

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

app.use(ctx => {
    console.log(1);
});

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

app.use(ctx => {
    ctx.body = "hello Koa";
});

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

이제 브라우저에 localhost:4000에 들어가면 Not Found가 뜨면서,

터미널 쪽에는 다음과 같이 기록됩니다.

$ node src
heurm server is listening to port 4000
1

그 다음 미들웨어를 실행하지 않고, 첫번째 미들웨어에서 멈춰버립니다.

이것은, next()를 호출하지 않았기 때문인데 

 

함수의 파라미터 부분에 next를 받아와 

호출하면 해결됩니다.

app.use((ctx, next) => {
    console.log(1);
    // node src 첫번째 미들웨어에서 멈춰버리는 이유는 next()를 호출하지 않기 떄문 
    next();
});

app.use((ctx, next) => {
    console.log(2);
    // 다음 문장들을 넣기 위해 next()를 띄워준다.
    next();
});

app.use((ctx, next) => {
    ctx.body = "hello Koa";
    next();
});

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

$ node src
heurm server is listening to port 4000
1
2

이제 우리가 원했던대로 작동 되는것을 확인할 수 있습니다.

3-3. next()는 Promise(프로미스) 다

next()를 실행하면, 프로미스를 반환합니다.

작업들이 끝난 뒤 다음에 할 작업들을 정해줄 수 있습니다.

 

첫번째 미들웨어의 코드를 다음과 같이 수정 후 다시 페이지를 열어봅니다.

app.use((ctx, next) => {
    console.log(1);
    const started = new Date();
    next().then(() => {
        console.log(new Date() - started + 'ms');
    });
});

heurm server is listening to port 4000
1
2
2ms

코드를, Express 라이브러리처럼 Callback 위주로 코딩을 짠다면 

이러한 코딩 방식을 짜는 것은 굉장히 번거로운데

Koa에서는 매우 편리한 것을 볼 수 있습니다.

3-4. async/await 사용하기

Koa 에서는 별도 작업없이 async/await를 바로 사용할 수 있습니다.

방금 작업한 미들웨어를 다시 작성해보겠습니다.

app.use(async (ctx, next) => {
    console.log(1);
    const started = new Date();
    await next();
    console.log(new Data() - started - 'ms');
});

app.use((ctx, next) => {
    console.log(2);
    // 다음 문장들을 넣기 위해 next()를 띄워준다.
    next();
});

app.use((ctx, next) => {
    ctx.body = "hello Koa";
    next();
});

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

위 코드는 아까와 동일 하게 작동됩니다. 다만 이렇게 미들웨어에서 next()를 

기다리는 것 말고도, 서버 측에서 async/await는 자주 사용되는데 

 

이는 데이터베이스에 요청을 할 시 매우 유용하게 사용됩니다.

이 문법이 있으니 콜백이 여러개 겹치는 일이 전혀 없게 될 것 입니다.

---

참고 자료

1장. Koa 를 사용하여 웹서버 만들기 · GitBook