Typescript와 NodeJS를 이용한 간단한 목킹 서버 띄우기 01

이 포스팅에서 사용한 모든 소스는 깃헙에서 확인할 수 있습니다.

최근 이직을 하며 새로운 조직에 합류하게 되었다. 이 새로운 조직에서는 새로운 팀원이 합류하였을 때, 새로운 팀원에게 비즈니스와 무관한 플랫폼에 대한 미션을 주는데 이번에 나에게 주어진 미션은 프론트 엔드 개발시 필요한 목 서버(MOCK Server)를 구축 하는 미션이었다. 아마 프론트 엔드 개발을 해본 사람이라면 한 번쯤은 백엔드 API가 개발되어지지 않은 상태에서 먼저 개발을 시작해야하는 곤란한 상황에 처해본적이 있을 것이다.

(이거 너무 한거 아니냐고)

그래도 하늘이 무너져도 솟을 구멍은 있다고 이러한 상황에 닥치면 보통 백엔드 개발자와 API에 대한 인터페이스 미리 협의 후 진행하기 때문에 어찌되었던 개발은 진행할 수 있을 것이다. 이후에는 아마 2가지 선택권으로 나뉠 것이다. 먼저 별도의 API 레이어를 분리해놓고 쓴다면 그냥 해당 API 레이어의 함수에서 정해져있는 결과값을 반환해주면 될 것이다.

1
2
3
4
5
6
7
8
9
10

function fetchTodo () {
  return {
    isSuccess: true,
    message: "",
    data: [
        { id: "1", text: "투두 API 샘플1", isDone: true },
        { id: "2", text: "투두 API 샘플2", isDone: false },
    ]    
  }
}

개발 서버의 API가 나오기 전까진 일단은 Vuex던 Redux던 API 레이어 함수를 호출하여 개발을 진행하다 API 서버가 나오면 API 레이어 코드를 AJAX로 호출하는 형태로 변경하면 된다. 하지만 개발을 하다보면 모든 상황이 낙관적이지 않듯, 개발 서버의 API 배포되어도 여러 비즈니스의 개발 소스가 모이기 때문에 개발 서버가 제대로 돌아가리란 보장이 되지 않는다. 백엔드 API의 코드를 분석할 수 있다고 하더라도 여러 비즈니스가 얽키고 설켜있기 때문에 이것이 내가 사용하는 API가 문제인지, 아니면 내가 사용하는 API가 의존하고 있는 다른 API에서 문제가 생겼는지 알 수가 없다.

그렇다고 강 건너 불구경 하듯 나올 때까지 기다릴 수도 없을 따름이니 다시 API 레이어 코드를 AJAX를 통하지 않도록 수정해야 한다. 이러한 상황이 반복되다보면 비즈니스 코드를 수정하는 게 아니라 별도의 목킹 서버의 필요성을 느끼게 된다.

그래서 이참에 한번 NodeJS와 타입스크립트를 이용한 간단한 API 서버를 구축해보며 그 과정을 정리해보고자 한다. 만약 이러한 과정이 귀찮다면 JSON Server를 이용하는 것도 하나의 방법이다.

NodeJS 서버 환경 구축

일단 NodeJS의 서버 프레임워크 중 유명한 프레임워크인 Express를 이용하여 API 서버를 구축해볼 예정이다. 간단하게 Express Generator를 이용하여 환경을 구축한다. Express generator가 설치되어 있지 않다면 express 명령어를 사용할 수 있도록 express-generator를 전역적으로 설치한다.

1

$ npm install express-generator -g

설치가 되었다면 아래와 같이 환경을 구축한다.

1

$ express --view=pug nodejs-express-typescript-sample

API 서버이기 때문에 view 템플릿을 무엇이든 상관없다. 위의 명령어를 이용하면 Express 서버를 띄우기 위한 모든 코드가 자동으로 생성된다. 생성되었다면 package.json에 있는 모듈을 npm install 명령어를 이용하여 설치해준다. 설치되었다면 다음으로 Nodemon에 대해서 살펴보도록 하자.

Nodemon 이용하기

Nodemon은 마치 webpack-dev-server와 같이 NodeJS 서버의 코드가 수정되면 자동으로 서버를 재시작시켜주는 모듈이다. Nodemon을 이용하면 별도의 설정 없이 간단하게 이용할 수 있다.

nodemon을 이용하여 앱을 실행할 경우, 아래의 명령어를 이용하여 간편하게 앱을 실행시킬 수 있다.

1

nodemon [your node app]

단, nodemon의 경우 개발할 경우 사용하고 실제 서비스에 올릴 때는 PM2 모듈을 사용하는 것을 권장한다. PM2에 대해서는 뒤에서 따로 다루도록 한다. nodemon을 이용하기 위해서는 nodemon을 전역으로 설치 해야 하지만, NPX를 이용한다면 전역적으로 설치하지 않고도 해당 명령어를 사용할 수 있다. NPX는 Create-React-App을 이용해봤다면 한번쯤은 다들 접해봤을 것이다. NPX는 npm@5.2+ 이상의 버전에는 자동으로 추가되는 도구로서 주로 npm run scripts 없이 패키지 바이너리를 쓸 경우 사용하게 된다.

예를 들어, npx를 사용하지 않았을 경우 create-react-app을 사용해야한다고 하면 다음과 같이 create-react-app을 글로벌로 설치한 후 사용해야 한다.

1

$ npm install create-react-app -g

물론 create-react-app의 경우 큰 문제가 되지 않을 수 있지만, mocha나 grunt, bower, webpack 등과 같은 툴의 경우 프로젝트 별로 버전을 관리하기가 힘들 수 있다. 또 이런 경우 다른 버전의 패키지를 사용하려고 한다면 해당 패키지를 새로 설치해야 한다.

물론 이러한 문제점을 scripts에 포함하여 사용하면 문제없이 사용할 수 있지만, 이보다 더 편한 방법으로 npx를 이용할 수도 있다.

일단 먼저 NPX를 사용하기 전 NPX가 패키지 바이너리를 사용하는 순서를 살펴보면 다음과 같다.

1
2

1. 해당하는 프로젝트의 node_modules/.bin 안에 존재하는 패키지를 기준으로 호출한다.
2. 로컬에 해당 패키지가 없다면 npx 레지스트리에서 해당 이름의 패키지를 자동으로 다운로드 받은 후 호출한다.

NPX는 패키지 명령어를 위와 같은 방법으로 실행시키기 때문에 Global로 패키지를 설치하지 않아도 해당하는 패키지의 명령어를 사용할 수 있다. 다만 2번과 같이 자동으로 다운로드 받은 후 호출된다고 하더라도 전역적으로 설치를 시키는 게 아니라, 패키키를 호출한 후 삭제해버리니 글로벌로 설치되지 않을까 하는 걱정은 하지 않아도 된다. 다만 매번 명령어를 실행할 때마다 설치를 진행하므로 명령어를 한번 실행할 때 시간이 오래 걸리기 때문에 로컬 프로젝트에 설치하여 사용하는 것을 권장한다.

일단 nodemon을 사용할 수 있도록 로컬에 설치해주도록 하자.

1

$ npm install nodemon --save-dev

설치되었다면 npm 명령어 한번으로 실행시킬 수 있도록 scripts에 명령어를 수정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{
  "name": "nodejs-express-typescript-sample",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    // "start": "node ./bin/www",
    "start": "nodemon ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.15.5",
    "morgan": "~1.9.0",
    "pug": "2.0.0-beta11",
    "serve-favicon": "~2.4.5"
  },
  "devDependencies": {
    "nodemon": "^1.19.2"
  }
}

그 후에 start 명령어를 이용해 정상적으로 서버가 재실행이 되는지 확인한다. 여기까지 확인이 되었다면 로컬 내에서 개발하기 위한 NodeJS를 이용한 Mock API 서버에 대한 기본적인 환경은 갖춰졌다. 이후의 포스팅에서는 타입스크립트와 레디스(Redis)를 이용하여 Mock 데이터를 키-벨류(Key-Value) 형태로 저장할 수 있는 API 서버를 구축할 예정이다. 만약 간단하게 SUCCESS(성공)/FAILURE(실패)에 대한 결과만 클라이언트 앱에 던져주고자 한다면 여기까지 환경을 구축하여 컨트롤러(Controller)에 각각의 응답값을 정의해서 써보도록 하자. 이후의 단계에 대해서 궁금하신 분은 다음 포스트을 살펴보도록 하자.

출처

• PM2 공식 홈페이지