NodeJS 프로젝트 만들기

참고

https://eastflag.co.kr/fullstack/rest-with-nodejs/node-rest_setup/

 

angular, react, vue 등의 최신프런트엔드로 풀스택 개발

1. express 설정

• IDEA를 열고 원하는 NodeJS 프로젝트를 설정할 디렉토리를 연 후, IDEA 하단의 Terminal 메뉴를 열고 아래 명령어npm 저장소를 만들자. pakage.json 파일이 생성될 것이다.

npm init -y

• 그 다음, node로 REST 서버를 구동하기 위한 필수 라이브러리 express 모듈을 설치하고 타입스크립트 버전인 @types/express도 설치하자.

npm install --save express
npm install -D @types/express

• src 디렉토리를 만들고 거기에 index.js 파일을 아래처럼 만들자.

src/index.js

const express = require('express');

const app = express();

app.get('/api/hello', (req, res) => {
    res.send('hello world');
})

app.listen(8080, () => {
    console.log('server is listening 8080');
});

• 터미널에서 아래 명령어를 사용해서 서버를 실행시켜보자.

node src/index.js

• 서버가 실행중임을 확인할 수 있다.

• 이제 http://localhost:8080/api/hello 에 접속하면 브라우저에 hello world가 찍힐 것이다!

2. typescript 적용

• 우선 아래 명령어로 typescript를 개발 의존성으로 설치하자.

npm install -D typescript

• 그 다음, typescript 환경 파일을 설정한다.
• tsconfig.json 을 생성하고 아래 내용을 추가하자. typescript 는 es5와 es6를 모두 포함하고 typescript 언어의 특성까지 갖고 있는 super set 언어이며 변수를 선언하면 변수의 타입을 선언을 해야 하는 언어이다.
• 아래 설정은 es6 언어를 타겟으로 설정하겠다는 것이다.

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["es2015"]
}

• typescript 적용은 끝냈으므로, src 폴더 아래에 있는 index.js 파일을 index.ts 파일을 만들고 아래처럼 바꿔주자.

import express from 'express';
 
const app = express();
 
app.get('/api/hello', (req, res) => {
  res.send('hello world');
})
 
app.listen(8080, () => {
  console.log('server is listening 8080');
});

3. 개발환경 설정

• 개발환경에서 가장 중요한것은 HMR의 구성이다. 소스를 수정하면 수정된 내용을 바로 확인할 수 있어야 한다.
• HMR은 Hot Module Replace의 약자로서 변경 사항을 수정하면 바로 컴파일되고 만약 프런트개발을 하고 있다면 브라우저까지 리프레쉬를 해줘서 수정사항을 바로바로 확인할 수 있는 설정이다.
• 만약, 앞에서와 같이 실행하게 되면 소스를 수정할때 마다 CTRL + C 를 눌러서 프로그램을 종료시키고 다시 실행해야 한다.

 

• 이를 해결하기 위해 nodemon, ts-node를 설치하자.
• nodemon은 소스가 수정되었는지 watch 하고, 수정이 되었으면 ts-node가 타입스크립트 파일을 컴파일하고 실행시켜준다.

npm install -D nodemon
npm install -D ts-node

• 설치가 다 끝났으면 아래 start 스크립트를 package.json 파일에 추가하자. 

"start": "nodemon --exec ts-node src/index.ts",

• 이제 아래 명령어로 프로젝트를 실행할 수 있다!

npm run start