[Express] 간단한 서버 만들기 (Typescript 사용) #Node.js #Express

Express로 아주 간단한 서버를 만들어 초기 세팅하고,

라우팅하는 방법까지 정리해보고자 한다.

(라우팅은 다음 포스팅에서)

 

 

package.json 생성

// terminal 실행
yarn --init

위와 같이 이름만 입력하고 엔터로 넘기면 package.json 파일이 생성된다.

 

 

Express, TS용 모듈 설치

yarn add express	// express 설치
yarn add -D @types/node @types/express	// typescript용 모듈 설치
yarn add -D nodemon	// 서버 코드 변경 시 자동 재시작을 도와주는 nodemon

 

 

Express 세팅하기

tsc --init	// tsconfig.json 파일 생성

Typescript를 JS로 컴파일하는 옵션을 설정할 수 있다.

 

 

서버 만들기

express 프로젝트 폴더 내부에 src 폴더를 만들고,

그 내부에 index.ts 파일을 만든다.

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

const app = express();	// express 객체 받아옴

app.get('/', (req: Request, res: Response, next: NextFunction) => {
    res.send('Hi! This is my first express server');
});	// HTTP GET method 정의

app.listen('8000', () => {
    console.log(`
    #############################################
        🛡️ Server listening on port: 8000 🛡️
    #############################################    
    `)
})	// 8000번 포트에서 서버 실행

 

프로젝트 루트 디렉토리에 'nodemon.json' 파일을 만든다.

// nodemon.json

{
    "watch": [ 
        "src",
        ".env"
    ], 
    "ext": "js,ts,json",
    "ignore": [
        "src/**/*.spec.ts"  
    ],
    "exec": "ts-node  --transpile-only ./src/index.ts"
}

nodemon은 서버 실행 및 동기화 역할이다.

watch: 변경 감지 경로

ext: 변경 감지 확장자

ignore: 변경 감지 제외

exec: nodemon 수행 명령

 

nodemon을 실행하기 위해 'package.json'을 수정하자.

// package.json

{
  "name": "express-example",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "nodemon",
    "build": "tsc && node dist"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^17.0.25",
    "nodemon": "^2.0.15"
  },
  "dependencies": {
    "express": "^4.17.3"
  }
}

dev 명령어로 nodemon을 실행하고

build 명령어로 dist 폴더에 js로 트랜스파일된 파일을 만들 수 있다.

yarn run dev	// nodemon으로 서버 실행
yarn run build	// 프로젝트 build

 

 

 

서버 실행

터미널에 yarn run dev 를 실행한다.

서버가 실행된다.

 

브라우저에 'localhost:8000'을 입력하고 접속한다.

 

서버가 정상적으로 구동되고 있음을 확인할 수 있다.

 

nodemon의 정상 구동을 확인하기 위해

../src/index.ts 에서 코드를 수정해본다.

// ../src/index.ts

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

const app = express();

app.get('/', (req: Request, res: Response, next: NextFunction) => {
    res.send('Hi! This is my first express server. My name is Woojin.');
});	// 문구 수정!!

app.listen('8000', () => {
    console.log(`
    #############################################
        🛡️ Server listening on port: 8000 🛡️
    #############################################    
    `)
})

수정 후 저장하면, 터미널에서 서버가 재시작됨을 볼 수 있다.

 

브라우저도 새로고침해보자.

정상적으로 변경되었다!

 

 

 

프로젝트 build

터미널에 아래와 같이 실행시킨다.

yarn run build

dev와 마찬가지로 서버가 실행되는데,

'dist'라는 폴더가 생성됨을 확인할 수 있다.

dist 폴더에는 TS로 작성한 파일이 JS로 트랜스파일되어 저장되는데, node로 서버를 실행하기 위함이다.

실제 서버를 배포할 때는 dist 폴더에 있는 파일들이 배포된다.

(참고 : 트랜스파일이란 비슷한 추상화 수준을 가진 언어로의 컴파일, 컴파일에 속하는 개념)

 

 

 

 

 

 

다음 포스팅에서는, 방금 세팅한 서버를 기반으로

라우팅을 정의해보자.