Fastify 설치 및 실행

설치 

npm 및 nvm 설치 방법은 https://kis-story.tistory.com/18을 이용

npm을 이용해서 설치 

 

1. npm 이용하여 직접 설치

fastify-autoload : 디렉토리에 있는 모든 플러그인을 로드하고, 폴더 구조와 일치하는 URL경로를 자동으로 구성

npm i fastify fastify-autoload

2. Cli 이용하여 설치

cli를 이용하여 기본 프로젝트 생성 (cli global 설치 필요)

npm에서 다양한 옵션 확인 가능 (https://www.npmjs.com/package/fastify-cli)

# 설치가 안되어 있다면 설치 필요
npm i -g fastify-cli
# ESM 베이스 설정 --esm
# lint 설정 --standardlint
# typescript 설정 --lang=ts
fastify generate --lang=ts myproject

 

fastify typescript 설정

install typescript & node.js types

npm i -D typescript @types/node

package.json의 scripts section에 아래 내용 추가

{
  "scripts": {
    "build": "tsc -p tsconfig.json",
    "start": "node index.js"
  }
}

Initialize typescript config file (다양한 옵션 : https://github.com/tsconfig/bases#node-14-tsconfigjson)

npx tsc --init

fastify 관련 명령 옵션 (fastify-cli 추가 참고 필요)

• -l [log_level] : 로그 레밸 출력
• -w : 변경 사항 있을 때 자동 reload
• -P : prettiy log (로그 이쁘게 출력)

# package.json
{
  "name": "server",
  "version": "0.0.1",
  "main": "index.js",
  "license": "MIT",
  "type": "module",
  "scripts": {
    "start": "fastify start -l info app.js",
    "dev": "fastify start -w -l info -P app.js"
  },
  "dependencies": {
    "fastify": "^3.23.1",
    "fastify-autoload": "^3.9.0"
  }
}

fastify-overview

: 플러그인 구조(tree structure)를 가시적으로 확인 할 수 있는 플러그인 

async function start() {
  const app = fastify({ logger: true })
  await app.register(require('fastify-overview'))
  // ... plugin-hell ...
  await app.ready()
  const appStructure = app.overview({ hideEmpty: true })
  require('fs').writeFileSync('./appStructure.json', JSON.stringify(appStructure, null, 2))
}

위의 코드는 Fastify 애플리케이션을 시작하고 트리 구조를 JSON 파일로 내보냅니다. 프로젝트 root 디렉토리에  appStructure.json 이름으로 파일이 생성됨

저장된 파일은 fastify-overview-ui 플러그인 또는 https://jsoncrack.com 웹사이트을 이용하여 시각화된 애플리케이션 시각화 자료 확인 가능

ESLint 설정

https://eslint.org/docs/latest/use/getting-started

Getting Started with ESLint - ESLint - Pluggable JavaScript Linter

# 따라오는 설정 선택
npm init @eslint/config

Prettier

https://prettier.io/docs/en/install.html

Prettier · Opinionated Code Formatter

npm install --save-dev --save-exact prettier
echo {}> .prettierrc

// .prettierrc
{
	"useTabs": true,
	"semi": true,
	"singleQuote": false,
	"trailingComma": "all",
	"printWidth": 100,
	"arrowParens": "always"
}

# ESlint와 Prettier 같이 쓰기 위한 권장 사항
npm install --save-dev eslint-config-prettier

VSCode Debug 설정

vscode 폴더 하위 lauch.json 

// lauch.json 
{
    // Use IntelliSense para saber los atributos posibles.
    // Mantenga el puntero para ver las descripciones de los existentes atributos.
    // Para más información, visite: https://go.microsoft.com/fwlink/?linkid=830387

    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "attach",
            "name": "Attach by Process ID",
            "processId": "${command:PickProcess}",
            "skipFiles": ["<node_internals>/**"]
        },
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Start fastify",
            "skipFiles": ["<node_internals>/**"],
            "runtimeArgs": ["--inspect"],
            "program": "${workspaceFolder}/node_modules/fastify-cli/cli.js",
            "args": [
                "start",
                "-w",
                "--ignore-watch='test .vscode'",
                "-l",
                "debug",
                "${workspaceFolder}/dist/app.js"
            ]
        }
    ]
}

// package.json 중간에 추가
"debug": "npm run build:ts && concurrently -k -p \"[{name}]\" -n \"TypeScript,App\" -c \"yellow.bold,cyan.bold\" \"npm:watch:ts\""