[node.js] node.js + typescript 실행환경 세팅하기

node.js를 사용할 사이드 프로젝트 아이디어가 생각이 나지 않아 일단 개발 서버 환경부터 만들어 두려고 한다.

Node.js 설정

0. Nodejs란

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.

 

즉, nodejs는 자바스크립트 파일을 독립적으로 사용할 수 있도록 해주는 런타임(환경)이다.

nodejs에 내장되어 있는 http 라이브러리를 통해 아파치와 같은 별도의 웹서버 없이 서버를 실행할 수 있다.

1. node 설치하기

node.js 공식 페이지에서 순서대로 설치하면 된다.

웬만하면 안정성이 높은 LTS로 설치하면 된다.

설치가 완료 되면 터미널 또는 명령 프롬프트에서(cmd) 잘 설치되었는지 확인한다.

위의 node를 설치하면 node의 패키지 매니저인 npm (Nodejs Package Manager)도 자동으로 설치 된다.

npm은 nodejs의 대표 패키지 매니저로서 명령어만 입력하면 node로 만들어진 패키지를 설치하고 관리해주는 역할을 한다.

2. node 프로젝트 생성하기

먼저 프로젝트를 시작할 폴더를 만들고 터미널에서 아래 명령어를 실행한다.

npm init

명령어를 실행하면 아래와 같은 질문들이 차례대로 나오는데 딱히 작성할 내용이 없다면 엔터로 넘어가자 (아래 이미지는 내용 작성 없이 엔터로 다 넘어감)

작성하지 않아 빈 내용은 나중에 package.json 파일에서 수정할 수 있다.

이제 package.json 파일이 생성된 걸 확인할 수 있다.

이제 패키지를 설치하게 되면 package.json에 패키지에 대한 정보가 저장된다.

3. js 파일 실행하기 

처음 시작의 국룰인 Hello World를 출력하도록 하자!

먼저 app.js 파일을 생성하고   console.log("hello world"); 작성한다.

그리고 해당 경로의 터미널에서 아래 명령어를 입력한다.

node index.js

그러면 hello world가 출력되는 걸 확인할 수 있다. 

4. nodemon

위에 app.js 파일이 변경될 때마다 명령어를 입력해서 다시 실행하는 건 번거로운 일이다.

nodemon은 파일의 변경을 감지하고 프로그램을 자동으로 다시 시작해주는 라이브러리이며 번거로운 작업에 도움을 준다.

먼저 라이브러리를 설치한다. nodemon은 개발 환경에서만 사용하기 때문에 -dev 옵션을 걸어준다. (로컬에서만 사용)

# npm
npm i -D nodemon
# yarn
yarn add -D nodemon

nodemon을 설치한 후 package.json script에 nodemon 명령어를 작성한다.

package.json

  "scripts": {
    "dev": "nodemon index.js",
  },

script에 설정한 이름으로 nodemon을 실행하면 app.js 파일을 저장할 때마다 프로그램이 재시작된다.

# npm
npm run dev
# yarn
yarn dev

 

Typescript 설정

1. Typescript 관련 모듈 설치

• typescript : Typescript를 사용하기 위한 모듈이다. (컴파일러)
• ts-node : 개발 단계에서 ts 파일을 js 파일로 컴파일 없이 바로 실행할 수 있게 해주는 모듈.
• @types/node : 이 패키지에는 Node.js에 대한 Type 정의가 포함되어 있다.

node는 typescript 파일을 읽을 수 없다. 그래서 실제 배포할 때는 tsc 명령어로 .ts 파일을 .js 파일로 컴파일해서 배포해야 한다.
개발 환경에서는 ts-node를 사용해서 ts 파일을 js 파일로 컴파일하는 단계를 생략하고 ts 파일을 독립적으로 실행할 수 있게 해준다.

1) typescript 모듈 설치 및 tsconfig.json 설정

본인은 프론트엔드 백엔드 모두 typescript를 사용하기 때문에 글로벌 옵션으로 설치한다.

# npm
npm i -g typescript
# yarn
yarn global add typescript

본인은 linux 환경에서 yarn으로 global 설치 시 정상 실행이 되지 않았다. npm은 node를 설치하면서 PATH 설정이 되었지만 yarn은 global설치 시 PATH 설정을 따로 해줘야 한다는 것 같다...

 

또는 typescript를 프로젝트별로 설치해도 해결된다.

yarn add -D typescript

 

tsconfig.json 생성

tsc --init

tsconfig의 주요 속성

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "esModuleInterop": true,
    "outDir": "dist"
  },
  "include": ["./"],
  "exclude": ["node_modules"]
}

•  target : 컴파일될 js 파일의 형식을 정의한다. 예를 들어 화살표 함수를 사용하고 target을 ES5로 작성했다면 function 키워드를 사용한 코드로 컴파일되고, target을 ES6로 작성했다면 화살표 함수 그대로 컴파일된다.
•  module : 컴파일될 js파일의 모듈 형식을 지정한다. 종류로는 none, commonjs, amd, es5, es6, es7 등이 있으며, commonjs는 require 문법, es2015부터는 import/export 문법을 사용한다. 
•  esModuleInterop : commonjs 모듈 형태의 파일을 es2015(es6) 모듈 형태로 불러올 수 있다. https://pewww.tistory.com/26 이 글을 읽으면 esModuleInterop 속성이 이해되리라 생각된다.
•  outDir : 컴파일이 될 파일의 경로를 지정
•  include : 컴파일에 포함할 파일을 작성
•  exclude : 컴파일에 제외할 파일을 작성

만약  IE에도 지원이 가능하게 하기 위해선 module은 commonjs, target은 ES5를 사용해야 한다. 
IE가 문제다.. 

 

ts -> js 컴파일

위에서 tsconfig.json 파일을 설정했으니 테스트를 해보자

index.ts

const func = () => "test1";

위와 같이 작성한 후에 tsc 명령어를 실행하면 index.ts 파일이  dist 폴더에 index.js 파일로 컴파일된다.

# global로 설치했다면
tsc
# 로컬로 설치했다면 
yarn tsc
npm tsc

dist/index.js

var func = function () { return "test1"; };

 

nodemon 실행

typescript 모듈을 설치하고 나면 nodemon로  ts 파일을 실행할 수 있다.

  "scripts": {
    "dev": "nodemon index.ts",
  },

 

2)  ts-node 설치 및 실행

# yarn 
yarn add -D ts-node
#npm 
npm i -D ts-node

ts-node는 개발 환경에서 사용하기 때문에 -D 옵션을 사용한다.

테스트해보기 위해 index.ts 파일을 생성한다.

package.json script에는 ts-node index.ts 를 설정한다.

  "scripts": {
    "dev": "ts-node index.ts",
  },

주의! 실행할 때 typescript 모듈이 설치되어 있지 않으면 Error: Cannot find module 'typescript' 에러가 발생한다.

3) @type/node 설치

# yarn
yarn add -D @types/node
# npm
npm i -D @types/node

@type/node는 node.js에 대한 타입 정보를 제공한다고 한다.