Node.js 서버를 Typescript를 사용해 구축하는 방법을 설명해보려고 합니다.😊
💡 필수 조건
Typescript와Express.js를 사용해요.
Node.js는 미리 설치하셔야 합니다! (v18.18.0 사용)
작업할 폴더 만들기
일단, 작업을 할 폴더를 만듭니다.
필자는 base-server-boilerplate라는 폴더를 만들겠습니다.
# 폴더 생성 (mkdir [원하는 폴더 생성 경로])
$ mkdir /workspace/base-server-boilerplate
# 생성한 폴더 이동 (cd [폴더 생성 경로])
$ cd ./base-server-boilerplatepackage.json 생성
우리가 설치하는 라이브러리들의 버전을 관리해야하고, package.json이 그 역할을 담당합니다.
npm을 통해 초기 구성을 지원받아 설정할 수 있습니다.
# package manger 파일 생성하기
$ npm init -y
# 이런 식으로 터미널에 나타날거고, package.json 파일이 생겼을거예요!
{
"name": "base-server-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}❓ -y 옵션은?
-y는 "전부 OK 하겠다."는 옵션입니다. 폴더명으로 이름이 설정되고, 나머지는 기본값으로 설정돼요.
Typescript
설치
Typescript를 사용하기 위해 관련 모듈을 설치합니다.
ts-node : typescript를 알아서 컴파일하여 실행시켜주는 도구
# typescript, ts-node 설치하기
$ npm i -D typescript ts-node이제 샘플 파일을 만들고 잘 동작하는지 테스트합니다.
index.ts 파일을 만들고 테스트하겠습니다.
// index.ts
let value : number | string = 0;
value = 'test';
console.log(value);실행을 해보면..!!
잘 동작하고 있습니다!
❓ 왜 node_modules 폴더 안에 있는 ts-node를 사용하지?
ts-node 모듈을 프로젝트 내에 설치했기 때문에(전역 설치 X), 설치한 프로젝트 내에 있는 명령어를 실행시켜야해요.
만약 이미 전역으로 설치했다면 프로젝트에 설치하지 않아도 돼요.😁
설정
Typescript는 컴파일 설정을 정의해 둔 파일을 제공합니다.
아래 명령어로 쉽게 만들 수 있습니다.
# tsconfig.json 초기 파일 생성하기
$ ./node_modules/.bin/tsc --init프로젝트 root 경로에 tsconfig.json이 생기면 성공입니다!
근데 아마 에러가 나고 있을텐데..
에러 내용은, tsconfig.json 파일에서 컴파일할 대상이 없으니 대상을 설정해달라는 뜻입니다.
include 속성에 컴파일할 대상 파일을 지정해주고, exclude 속성에는 빈 배열을 넣어달라고 합니다.
❓ exclude 속성은 언제 사용하지?
exclude는 컴파일하지 않을 대상을 작성하는 속성이예요.
작성하지 않으면 default로 node_modules가 컴파일 제외 대상으로 설정돼요.
따라서 빈 배열을 넣지 않고 exclude 속성을 아예 적지 않을게요.😜
출처 : https://www.typescriptlang.org/tsconfig#exclude
tsconfig.json 제일 하단에 아래와 같이 작성합니다.
// tsconfig.json
{
"compilerOptions": 중략...,
"include": ["src/**/*.ts"]
}그리고 프로젝트 root에 src 폴더를 만들고, 이전에 만든 index.ts를 src 하위로 옮기겠습니다.
이제 에러가 사라졌을겁니다! (사라..졌겠죠?ㅎㅎ)
Express
설치
이제 서버 구축을 위해 express 프레임워크를 설치합니다.
그런데 express는 typescript로 만들어지지 않았습니다.
그래서 express의 타입을 알 수 있도록 따로 정의해둔 @types/express도 설치합니다.
# express 설치하기
$ npm i express
# express 타입 정의 모듈 설치하기
$ npm i -D @types/express이제 구축을 해봅시다!
아까 테스트용으로 작성한 index.ts를 아래 내용으로 수정해주세요.
// index.ts
import http from "http";
const PORT = 3000;
const server = http.createServer();
server.listen(PORT, () => {
console.log(`Start service on ${PORT} port!`);
});
그리고 이제 실행을 해봅시다!
아까와 다르게 계속 실행 중인걸 볼 수 있습니다.
근데 파일을 수정을 할 때마다 껐다 켜야하는 번거로움이 있습니다..
nodemon
설치
nodemon은 소스 수정이 감지되면 알아서 서버를 재시작해주는 라이브러리입니다.
간단하게 말하자면, 파일을 저장하면 서버가 다시 시작됩니다!!
# nodemon 설치하기
$ npm i -D nodemon이제 실행해보겠습니다.
벌써 서버 구축이 완료됐습니다!
저장을 하면 서버가 바로 재시작됩니다.
스크립트 등록
계속 실행할 때마다 저 명령어를 타이핑하는건 힘듭니다.😦
package.json의 scripts에 등록하면 좀 더 간편하게 실행할 수 있습니다.
// package.json
{
중략...,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon --exec \"ts-node src\"" // 👈 이 부분!
},
중략...,
}이제 npm run dev로 실행하겠습니다.
아주 간편해졌습니다!
API 만들기
간단한 GET API를 만들겠습니다.
./src/app.ts 에 아래 내용을 작성합니다.
// app.ts
import express from "express";
const app = express(); // 서버 만들기
/**
* @description 상태 체크하는 API
*/
app.get("/status", (req, res, next) => {
console.log("Request status API success!!");
res.send('GOOD!');
});
export default app;
./src/index.ts는 약간만 수정합니다.
// index.ts
import http from "http";
import app from './app'; // 👈 위에서 작성한 app.ts import 하기
const PORT = 3000;
const server = http.createServer(app); // 👈 모듈 적용하기
server.listen(PORT, () => {
console.log(`Start service on ${PORT} port!`);
});
이제 브라우저에서 http://localhost:3000/status 로 접속합니다.
브라우저에서 위처럼 나온다면 성공입니다!
서버 로그에도 나타난다면 성공입니다!
💡 요청 처리 과정
브라우저 접속 (/status) => 서버로 접근 (/status) => 콜백 함수 처리 => 응답 (res.send)
빌드
추후 배포 시에는 Typescript로 서비스를 실행하지 않습니다.(대부분)
Javascript로 변환하는 트랜스파일링 과정이 필요합니다.
tsc가 이 과정을 담당해줍니다.
package.json에 script를 추가하겠습니다.
// package.json
{
중략...,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon --exec \"ts-node src\"",
"build": "tsc -p ." // 👈 이 부분!
},
중략...,
}그리고 실행..!
# 빌드하기
$ npm run build
js 파일이 생겼습니다!
근데 ts 파일과 같이 있네..?
❓ -p 옵션은?
-p는 tsconfig.json 파일을 찾는 옵션이예요.
.을 작성하면 현재 경로(root)를 기준으로 tsconfig.json 파일을 찾아 참조해요. :)
결과물
트랜스파일된 결과물을 특정 폴더에 만들 수 있습니다.
tsconfig.json의 outDir을 사용하겠습니다. (필자는 dist라는 폴더명을 만들겠습니다.)
// tsconfig.json
{
"compilerOptions": {
중략...,
"outDir" : "dist",
중략...,
},
}다시 npm run build 해보면..
dist 폴더 하위에 js 파일이 생겼습니다.
이제 node로 서비스를 실행해보겠습니다.
성공입니다!! 간단하게 서버를 구축했습니다.🎉
의견은 언제든 댓글로 남겨주세요.🙂
