[Node.js] nodemon 설치하고 typescript 적용하기

node.js

 

1. nodemon 설치

코드를 변경하고 저장했을 때 변경 사항이 바로 적용되도록 하기 위해서 nodemon을 사용한다.

개발 시에만 사용할거니까 -save-dev 옵션을 줘서 설치한다.

// 패키지 설치
npm install -save-dev nodemon

 

2. typescript 관련 패키지 설치

express로 프로젝트를 구동해서 express 관련 패키지도 설치해줬다.

npm install --save-dev typescript ts-node @types/node @types/cookie-parser @types/debug
@types/express @types/http-errors @types/morgan

• ts-node: node.js 프로젝트 구동 시에 ts 파일을 수동으로 컴파일하지 않고 바로 실행시킬 수 있도록 도와주기 위함.

 

3. package.json 수정

scripts 부분을 보면 초기에는 "start": "node ./bin/www"로 되어있을텐데, script 부분을 아래처럼 수정해준다.

• "start": tsc로 빌드 후 만들어진 js 파일을 실행한다. 진입 js 파일이 있는 위치가 ./build/bin/www다.
• "build": npm run build 시 ts 파일이 js 파일로 컴파일 된 폴더가 생성된다.
• ts 형식으로 된 파일을 ts-node가 실행시킨다.

"scripts": {
    "start": "node ./build/bin/www",
    "build": "tsc",
    "dev": "nodemon --exec ts-node ./bin/www.ts --watch"
},

 

 

4. tsconfig.json 수정

프로젝트를 새로 생성해서 tsconfig.json이 없을 경우 tsc --init 명령어를 사용하면 tsconfig.json 파일이 만들어진다.

// tsconfig.json 생성
tsc --init

 

tsconfig.json 파일을 열어보면 여러 옵션들과 주석처리된 옵션들을 확인할 수 있다. 여기에서 수정해줄 옵션이 있다면 수정해준다.

나는 컴파일 된 js 파일이 생성되는 위치를 기존 "./"에서 "./build"로 변경해줬다.

{
  "compilerOptions": {
    // ...
    "outDir": "./build",
    // ...
  }
}

 

5. js 파일 전부 다 ts로 바꿔주기

 

6. 프로젝트 실행

npm run dev