(반응을 기다리는 😎) 모든 사람들이 요즘 Typescript를 사용하고 있다는 것을 ❤느끼고 있습니다. 그래서 여기 Ornio AS에서 Node.js 애플리케이션을 설정하는 방법을 여러분과 공유하고 싶다고 생각했습니다.

이 부분에서는 다음을 다룰 것입니다.

프로젝트 초기화

Typescript 설정

Express.js 설정

Nodemon 설정

바쁘신 분들은 스크롤을 내려서 소스코드를 확인해보세요 :)

Btw did I tell you this is my first post here @dev.to so share some love 👊.

프로젝트 초기화

터미널을 열어 Createpackage.json 폴더를 만들고(원하는 이름으로 지정) 다음을 입력합니다.

npm init

터미널의 질문에 답하고 마지막에 package.json 파일 생성을 확인합니다.

내 package.json 파일은 다음과 같습니다.

{
  "name": "nodejs-express-typescript-howto",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ornio-no/post-nodejs-express-typescript-howto.git"
  },
  "keywords": [
    "Nodejs",
    "typescript",
    "express"
  ],
  "author": "Flamur Mavraj (Ornio AS)",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ornio-no/post-nodejs-express-typescript-howto/issues"
  },
  "homepage": "https://github.com/ornio-no/post-nodejs-express-typescript-howto#readme"
}

Typescript 설치 및 구성

npm i -D typescript ts-node

typescript는 Typescript 패키지를 설치합니다.ts-node는 Typescript 노드 러너를 설치하므로 변경할 때마다 애플리케이션을 빌드할 필요가 없으며 Nodemon과 함께 사용됩니다.

설치 후 다음 명령을 실행하십시오.

npx typescript --init

이렇게 하면 기본 옵션이 활성화된 파일tsconfig.json이 생성되고 각 옵션을 설명하는 주석이 생성됩니다.

일부 정리 후 내 파일은 다음과 같습니다.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "outDir": "./build",
        "rootDir": "./src",
        /* Strict Type-Checking Options */
        "strict": true,
        "noImplicitAny": true,
        /* Module Resolution Options */
        "moduleResolution": "node",
        "baseUrl": "./src",
        "esModuleInterop": true,
        /* Advanced Options */
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
    },
    "lib": ["es2015"],
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

위의 각 옵션을 설명하지는 않겠지만 다음 두 가지 옵션이 중요합니다.
outDir 소스 코드를 컴파일할 디렉토리로, 다른 사람들이 dist라고 부를 수도 있습니다.rootDir Typescript 파일이 위치할 디렉토리입니다.

다음 단계는 package.json에서 스크립트를 설정하는 것입니다.

{
    // ...
    "scripts": {
        "start": "nodemon",
        "build": "tsc",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    // ...
}

start는 nodemon을 시작하고 나중에 구성합니다.build는 tsconfig.json 파일을 기반으로 Typescript를 사용하여 코드를 컴파일합니다.

Express 설치 및 서버 시작

필요한 패키지를 설치합니다.

npm i -S express
npm i -D @types/express

Express에는 Typescript 정의에 빌드가 없기 때문에 두 번째 패키지가 필요합니다.

그런 다음 다음 내용으로 src/index.ts를 만듭니다.

import express, { Application, Request, Response, NextFunction } from 'express';

// Boot express
const app: Application = express();
const port = 5000;

// Application routing
app.use('/', (req: Request, res: Response, next: NextFunction ) => {
    res.status(200).send({data: 'Hello from Ornio AS'});
});

// Start server
app.listen(port, () => console.log(`Server is listening on port ${port}!`));

위의 코드에서 무슨 일이 일어나고 있는지 설명할 수 있도록 잠시 멈추겠습니다.

첫 번째 줄에서 express와 그 정의를 가져옵니다(@types/express를 기억하세요). 그런 다음 익스프레스를 시작하고 포트를 정의합니다(마지막에 사용). 그리고 서버를 시작하기 전에 간단한 경로와 해당 기능을 인수 정의와 함께 추가합니다.

그렇다면 이러한 정의가 필요한 이유는 무엇입니까?
이것이 Typescript의 힘입니다. 이러한 정의는 함수/인수의 서명이며 사용 방법을 알려줍니다. 예, 자신만의 정의를 만들 수 있지만 여기서는 설명하지 않겠습니다. 이러한 정의는 더 나은 코드를 작성하는 데 도움이 됩니다!

애플리케이션 컴파일/빌드 및 실행

애플리케이션을 실행하려면 먼저 애플리케이션을 빌드한 다음 실행해야 합니다.

npm run build

그런 다음 노드를 사용하여 실행합니다.

node build/index.js

콘솔에 다음이 표시되어야 합니다. Server is listening on port 5000! .
curl를 사용하여 서버를 테스트할 수 있습니다.

curl localhost:5000

{"data":"Hello from Ornio AS"} 를 반환해야 합니다.

거의 끝났으니 nodemon 설정으로 마무리합시다.

개발을 위한 Nodemon 설정

애플리케이션을 개발하는 동안 매번 서버를 빌드하고 다시 시작하지 않고 파일 변경을 처리하는 더 나은 방법이 필요합니다. 이를 위해 우리는 nodemon을 사용할 것입니다.

nodemon 설치:

npm i -D nodemon

그런 다음 nodemon.json라는 새 파일을 만들어 구성합니다.

{
    "watch": ["src"],
    "ext": ".ts",
    "ignore": [],
    "exec": "ts-node ./src/index.ts"
}

이렇게 하면 nodemon이 .ts 파일을 감시하여src 폴더를 감시하고 이러한 파일이 변경되면 실행/재실행ts-node ./src/index.ts할 수 있습니다.

서버를 실행하고 ./src/index.ts에서 무언가를 변경하면 nodemon이 변경 사항을 감지하고 서버를 다시 시작하는 것을 볼 수 있습니다.

npm run start

start 명령은 어디에서 왔습니까? Typescript를 구성하는 동안 :)

소스 코드

소스 코드here를 찾을 수 있습니다.

도움이 필요하다?

여기에 댓글을 달거나 Twitter에서 저를 핑하면 기꺼이 도와드리겠습니다 :)

무엇 향후 계획?

Eslint, Prettier and Husky 설정(2부)

Jest 및 Supertest를 사용한 테스트(3부)