NodeJs Backend REST API (2) - Fastify

1. REST API

get	데이터 호출
post	데이터 삽입
put	데이터 수정
delete	데이터 삭제

---

2. Fastify 개발 환경 설정

1) Nodejs와 VSCode 설치

2) TypeScript 설치

• npm i typescript -g

3) Fastify 설치

• npm init
  • 일단 기본 옵션으로 설정하고 필요하면 이후에 package.json에서 수정 가능
• npm i fastify
• package.json에서 정상 설치 확인

4) TypeScript와 관련된 패키지 설치

• npm i -D typescript @types/node
• package.json에서 정상 설치 확인 

5) TypeScript 관련 설정 파일 생성

• npx tsc --init
• tsconfig.json 파일이 생성됨

6) 각종 플러그인 설치

• nodemon: 파일의 변화를 감지해 변경이 있으면 자동으로 재시작
• ts-node: 개발환경에서만이라도 컴파일 없이 바로 타입스크립트 상에서 프로젝트 실행 가능
• npm i -D ts-node nodemon
• package.json에서 확인

7) tsconfig.json

tsconfig.json

8) package.json

서버를 실행하거나 빌드할 때 사용할 커멘드라인 명령어 설정

package.json

#5 type

• type을 module로 설정해야 import/export문 등 사용 가능

#7 start:build

• tsconfig.json 내용을 바탕으로 작성한 코드가 JavaScript로 변환되어 disd폴더에 생성

#8 build:live

• nodemon으로 변경을 감지할 폴더를 watch옵션과 함께 지정
• exec 옵션과 ts-node esm 옵션을 설정하고 실행파일을 src/main.ts로 설정
• verbose를 추가옵션으로 주어 터미널에 정보를 자세히 표현되도록 함

#9 start

• 작성한 빌드 라이브가 실행되도록 함

9) src/main.ts

src/main.ts

#1

• fastify 컴포넌트를 import 불러옴

#3

• fastify상수에 가져온 fastify를 사용할 수 있게 준비

#5~7 

• fastify.get으로 REST api에서 get메서드(데이터 요청 메서드)를 설정
• 접속 주소로 /ping을 준 다음 실제 요청이 왔을 때 그 요청을 처리하는 handler함수 설정
• 기본적으로 이러한 처리는 비동기로 처리되므로 async를 사용
• 이 handler는 기본 매개변수로 requset와 reply를 가지게 됨
• requset는 요청에 대한 매개변수 정보가 되고, reply는 회신에 대한 다양한 정보가 담긴 매개변수가 됨
• 위에서는 /ping이라는 get 요청이 오면 pong이라는 정보를 리턴해주도록 함

#9~18

• start함수를 async와 함께 만듦
• try catch 안에 await에 fastify.listen를 8083으로 설정, 서버가 시작되면 해당 서버는 8083 포트를 가지고 시작
• 시작을 표시할 console문과 catch에서 오류를 표시하는 console과 프로세스 종료기능 추가

10) 서버 시작

• npm start
• 정상적으로 실행 시 터미널에 console.log로 설정했던 '!!SERVER START!!'가 출력

11) Postman

---

3. Fastify 라우트 기본 사용 방법

1) Fastify 주요 기능

• Route: url 정보를 바탕으로 요청 처리
• Hook: 요청에 따른 이벤트 발생 제어
• Plugin: 다양한 기능을 만들고 조립해서 사용하게 하는 기능

2-1) Route

• REST api는 url 주소와 메서드 조합이 기본인데, url로 전달되는 요청에 서버가 대응할 수 있게 해주는 Route는 Fastify Framework의 핵심 역할이 된다.

  

  
  
• Fastify Route의 구조
1. Method: 해당 라우터에 대한 속성 정
2. URL: 해당 라우터에 대한 주소
3. Handler: 요청에 대한 처리
4. Schema

2-2) Handler

• request
  • 요청에 대한 다양한 정보
  • Body, Querystring, Params, Headers로 보내지는 값을 받게 됨
• reply  
  
  • 회신에 대한 다양한 옵션들을 받아 사용
  • status, send, setCookie 등 요청한 내용에 따른 결과를 처리하는데 필요한 요소 호출
• Shortand declaration: 빠른 정의, 간단하게 사용하기 좋은 라우터 정의 방식

 fastify.get(path, [options], handler)

 fastify.post(path, [options], handler)

 fastify.put(path, [options], handler)

 fastify.delete(path, [options], handler)

 

 fastify.head(path, [options], handler)

 fastify.options(path, [options], handler)

 fastify.patch(path, [options], handler)

 

• 좀 더 명시적으로 사용하는 방법

 fastify.route({

    method:'GET', // GET, PUT, POST, DELETE와 같이 대문자로 작성

    url: '/', // 요청 주소

    schema: { // 유효성 검사

        ...

    },

    preHandler: function(request, reply) {// HOOK 부분, 가장 많이 사용

        reply.send({hello: 'world'})

    }

    handler: function(request, reply) { // Handler

        reply,send({hello: 'world'})

    }

})

 

2-3) Schema

• 요청과 응답시에 받거나 내보내는 데이터의 형태 정의
• 정의된 데이터의 유효성 검사필수로 전달받아야 하거나 전달해야 하는 데이터 형태 정의

위의 두 가지 장점으로 url과 handler처럼 필수적으로 배치되는 요소는 아니지만 데이터 부재나 형태의 오류 등으로 발생할 수 있는 오류를 사전에 예방하기 위해 JSON Schema 사용을 권장한다.

// headers에 대한 유효성 검사 예제

const articleSchema = { // JSON Schema

    schema: {

        headers: {

            type: 'object',

            properties: {

                authorization: {type: 'string'} // authorization은 요청 시 꼭 전달되어야 하는 값 의미

            },

            required: ['authorization'],

        },

        response: { // client에게 전달되는 데이터 형태 정의

            200: { // 성공적으로 응답을 처리했을 경우 Client에게 보내질 데이터 = 200

                type: 'object',

                properties: {

                    hello: {type: 'string'}

                }

            }

        }

    }

}

fastify.get('/articles', articleSchema, async (request, reply) => {

    return {hello: 'world'}

})

3) TypeScript로 Fastify Route를 사용할 경우 달라지는 내용은?

Handler의 매개변수로 사용되는 request/reply 사용법이 달라진다.

• 타입이 없는 javaScript
  • body, headers, params로부터 값 전달받을 수 있음

fastify.get('/articles', async (request, reply) => {

    const {title, content} = request.body

    ...

 })

 

• TypeScript
  • 위 예제의 title, content는 body에 속하는 임의의 type이지만, body에 대한 type 속성이 정의되어 있지 않아 값을 받아올 수 없다. 그래서 이런 값들에 대한 타입 주입이 필요하다.

 type TBody { // type 또는 interface로 type 정의

    title: string;

    content: string;

}

fastify.get<{Body: TBody}('/articles', async (request, reply) => { //Generic을 이용해 해당 타입을 주입

    const{ title, content } = request.body

    ...

})

 

• Handler 등에 직접 type 주입 가능한 경우
  • Handler에서 코드를 분리할 경우 유용

import { FastifyRequest, FastifyReply } from "fastify"; // fastify에 정의된 FastifyRequest, FastifyReply를 import

 type TBody {

     title: string;

     content: string;

 }

 

 fastify.route({

     method: 'GET',

     url: '/articles',

     // 사용할 핸들러에 대해 리퀘스트에 FastifyRequest를,

     // reply에 FastifyReply를 타입으로 지정하고

     // FastifyRequest에는 Generic으로 필요한 type 주입

     handler: async (request:FastifyRequest<{Body: TBody}>, reply:FastifyReply) => {

         const{ title, content } = request.body

         ...

     }

 })

---

4. Fastify HOOK

1) Lifecycle (생명주기)

요청이 들어오면 다음과 같은 순서로 처리가 됩니다. 어디선가 server 요청이 이루어지고 그 요청을 처리하는데 필요한 과정이 이 생명주기입니다.

HOOK은 바로 이렇게 처리되는 과정에서 특정 순서 전에 사용자가 임의로 작성한 이벤트를 처리해야 할 때 사용하는 기능입니다. 이 중에서 대표적인 HOOK은 preHandler HOOK입니다. Handler는 Router에서 설명했듯이 요청에 대한 처리를 하는 곳입니다. preHanler는 이 Handler의 작동 전에 먼저 수행해야 하는 과정이 있다면 preHandler HOOK에서 그것을 먼저 처리하고 preHandler로 넘어가게 됩니다. 즉 이벤트 처리 순서 전에 사용자가 따로 개입하는 것을 HOOK이라 합니다.

 

HOOK을 사용하는 가장 기본적인 방법은 route 사용 방법과 비슷합니다. 

fastify.addHook('onRequest', (request, reply, done) => {

    // Some code

    done()

 })

선언된 fastify에 addHook method를 호출하고 사용할 HOOK의 종류를 작성한 다음 함수 형태로 필요한 처리를 하는 것입니다. 그리고 기본 매개변수로 request, reply, done을 route와 마찬가지로 가지게 됩니다. 예제의 경우 addHook을 이용하여 작성할 경우 route에서 request가 발생하기 전에 해당 훅을 이용한 처리를 먼저 하게 됩니다.

 

또 다른 사용방법으로 route에서 필요한 hook을 사용하는 방법입니다. 이전 route 챕터에서 간단하게 확인해 본 것으로, route에서 handler전에 사용할 hook을 배치하고 사용하면 됩니다.

fastify.route({

    mothod: 'GET',

    url: '/',

    schema: {

        ...

    },

    preHandler: function (request, reply, done) {

        reply.send({ hello: 'world' })

    },

    onRequest: function (request, reply, done) {

        ...

    }

    preVaildation: function (request, reply, done) {

        ...

    }

    onError: function (request, reply) {

        reply.send( {hello: 'world' })

    }

})

 

이 두가지 방식의 차이점은 addHook을 사용할 경우 작성된 라우터의 종류에 관계없이 모든 라우터에서 해당 훅을 작동하게 하지만 라우터 안에 명시적으로 hook을 사용하게 되면 필요한 라우팅 시에만 특정 hook을 작동시킬 수 있습니다.

 

2) HOOK의 종류

• Request/Reply Hooks

fastify에서 가장 핵심이 되는 hook입니다. 서버에 대한 요청이 일어나고 최종적으로 처리된 결과가 요청자에게 전달되는 life cycle 중에 발생되는 hook입니다. 라우터에서 발생하는 요청/응답이 아닌 해당 서버 자체에 대한 훅이 되겠습니다. 

 

• onReady/onClose

서버의 시작과 종료에 어떤 처리가 필요할 경우 사용할 수 있습니다. 다만 사용 방법의 경우 addHook을 이용한 방법만 가능합니다. 

fastify.addHook('onReady', function (done) {

    // Some code

    const err = null;

    done(err)

})

fastify.addHook('onClose', async function () {

    // Some async code

    await loadCacheFromDatabase()

})

---

5. Fastify Plugin

1) Plugin

plugin은 fastify의 기능 확장에 사용되는 방법입니다. 기본적으로 거대해진 route를 주제별로 나누어 배치할 때 plugin을 이용하게 됩니다. 또 fastify에서 제공하지 않는 기능을 plugin으로 만들어 사용할 수도 있습니다.

 

• 가장 많이 사용되는 플러그인 사용 방법인 라우터를 이용해서 플러그인을 만들고 등록하는 방법을 알아보겠습니다. 

import fastify, { FastifyInstance, FastifyRequest, FastifyReply } from "fastify";

const articleRoute = async (fastify: FastifyInstance) => {

    fastify.post('register'. ...)

    fastify.get('users'. ...)

    ...

}

export default articleRoute

우선 다음과 같이 특정 주제 라우터 함수를 만들고 이를 export 시키면 됩니다. 이때 매개변수로 fastify를 사용하는데 typeScript의 경우 FastifyInstance 타입을 가져와 배치하면 됩니다. 이렇게 주제별로 만들어진 라우터들은 register를 이용해 모으고 등록하여 사용할 수가 있습니다. 만들어진 플러그인을 import로 가져온 다음 fastify의 register로 가져온 플러그인을 등록하고 옵션 등을 설정하면 됩니다.

 

• 그럼 레지스터를 이용해서 작성된 라우터를 등록하는 방법도 알아보겠습니다. 

mport authRoute from '/auth'

import articleRoute from './article'

const routes = async (fastify: FastifyInstance) => {

    await fastify.register(authRoute, {prefix: '/auth'}) // localhost:8083/auth

    await fastify.register(articleRoute, {prefix: '/articles'}) // localhost:8083/articles

    .

    .

    .

}

fastify.register(routes)

작성된 라우터들을 main.ts 등에서 import하고 다시 라우트 함수를 만든 다음 이 안에 fastify Register를 이용해서 불러온 라우터를 배치하면 됩니다. 여기서 중요한 옵션으로 prefix라는 것이 있는데, 이 prefix 옵션을 이용해서 호출할 하위 URL 등을 등록할 수 있습니다. 즉 main URL 다음에 auth로 명령된 URL을 사용하면 auth Router의 기능들을 호출할 수 있고, articles 주소를 호출하면 article router의 내용을 호출할 수 있게 되는 것입니다. 그리고 이렇게 만든 메인 라우터는 다시 레지스터를 이용해서 등록하면 됩니다.

2) 사용자 정의 Plugin 작성

Pluhin은 route를 분리하는 역할 말고도 fastify 개발자가 원하는 기능을 추가로 만들어서 사용하는 역할도 있습니다. 이를 위해서 우선 fastify-plugin이라는 패키지를 추가로 설치해서 사용하는 것을 권장하고 있습니다. 

• npm i fastify-plugin
• package.json에서 설치 확인 가능

• 사용자 정의 플러그인을 만드는 방법을 알아보도록 하겠습니다.

import fastify from "fastify"

import fp from fastify-plugin

function customPlugin() {

    fastify.decorate('name', null)

    ...

}

export const customPluginName = fp(customPlugin, {

    name: 'customPluginName'

})

...

fastify.register(customPluginName)

먼저 설치한 fastify-plugin에서 fp라는 패키지를 import로 가져오겠습니다. 그리고 플러그인은 일반적인 함수 형태로 만들어 사용하면 됩니다. 이때 많이 사용되는 기능은 fastify의 decorate입니다. decorate의 역할은 해당 플러그인을 사용할 때 필요한 개체들을 등록하는 역할을 합니다. 다음으로 작성된 플러그인은 fp를 이용하여 한번 감싸주어야 합니다. 이때 플러그인의 이름을 따로 등록하는 것도 가능합니다. 그리고 사용하는 방법은 기존과 같이 fastify의 register를 이용해서 만들어진 플러그인을 호출해서 사용할 수 있습니다. 

 

∴ Plugin은 fastify의 핵심기능인 rouyr를 주제별로 분류해서 작성하게 도와주고 fastify에 기본적으로 탑재되지 않는 기능들을 쉽게 확장할 수 있도록 도와주는 역할을 합니다.