게시판 프로젝트 설정 - 풀스택개발 EastFlag

게시판 프로젝트 개요

프로젝트가 보통 아래와 같은 순서로 진행된다.

UI 시나리오 작성 ( XD, 스케치, 제플린, figma)
DB 설계
REST api 개발
SPA 프런트엔드 화면 개발

1번에 해당하는 피그마는 없지만 아래 데모 사이트에서 UI를 확인해 볼 수 있다.

2번 DB 설계는 여기를 참고해서 생성하면 된다.

3번이 여기서 하고자 하는 목적이다.

NodeJS로 REST API를 만드는건 좋은 선택이 아니였다. 왜냐하면 spring의 JPA 같은 ORM or MyBatis 같은 ORM이 없었기 때문에 객체를 쿼리문으로 변경하는게 쉽지 않았다.

지금은 Sequalize ORM 의 도움으로 Node도 쉽게 REST api를 만들수 있다. 또한, java의 swagger와 같은 swagger도 적용할 수 있다.

최근에는 NodeJS에 타입스크립트를 적용하는 추세라서 typescript ORM인 typeORM 도 좋은 선택이 될 수 있다.

+ 여기에 사용된 기술

NodeJS + Express + Typescript + TypeORM

4번은 리액트로 화면 구현을 하는 단계로 API 개발후에 진행되며 다음 챕터를 참고하면 된다.

git 저장소 바로가기

데모 사이트 바로 가기

express 설정

디렉토리 적당한 곳에 node-rest-tutorial 이라는 이름의 폴더를 만든다.

C:webnode&gt;mkdir node-rest-tutorial

1	C:webnode>mkdir node-rest-tutorial

폴더를 만든후 IDEA 에서 File > Oen 메뉴에서 해당 폴더를 연다. IDEA 하단의 Terminal 메뉴를 열고 아래 명령어로 npm 저장소를 만든다.

npm init -y

1	npm init -y

package.json 화일이 생성되었음을 확인하자. 해당 화일을 열어서 확인하자.

이제 node 로 REST 서버를 구성하기 위해 필수 라이브러리인 express 모듈을 설치한다. 타입스크립트 버전인 @types/express 도 같이 설치한다.

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

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

package.json에 의존성 모듈이 설치되었고 node_module에 해당 모듈이 설치됨을 확인하자.

src/index.js 화일을 만들고 아래와 같이 입력한다.

src/index.js

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

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');

});

terminal 창에서 실행해보자

node src/index.js
server is listening 8080

1 2	node src/index.js server is listening 8080

콘솔에 서버가 실행중임을 확인한후에 브라우저를 열어서 접속 테스트를 해본다. http://localhost:8080/api/hello 로 접속하면 브라우저에 hello world가 찍힐것이다.

typescript 적용

첫번째로, typescript 를 개발의존성으로 설치한다.

npm install -D typescript

1	npm install -D typescript

두번째로 typescript 환경화일을 설정한다.

tsconfig.json 을 생성하고 아래 내용을 추가한다. typescript 는 es5와 es6를 모두 포함하고 typescript 언어의 특성까지 갖고 있는 super set 언어이다. typescript 언어는 변수를 선언하면 변수의 타입을 선언을 해야 하는 언어이다. 아래 설정을 하기 전에 index.js를 보면 req, res에 타입을 선언하지 않아서 에러가 나는것을 볼것이다. 하지만 아래 설정을 적용하면 그 에러가 보이지 않을 것이다. 아래 설정은 es6 언어를 타겟으로 설정하겠다는 것이다.

host, port, usename, password, database 는 각각 설정에 맞게 수정한다.

tsconfig.json

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

{

"compilerOptions": {

"module": "commonjs",

"esModuleInterop": true,

"target": "es6",

"moduleResolution": "node",

"sourceMap": true,

"outDir": "dist"

"lib": ["es2015"]

}

이제 typescript 적용은 끝마쳤다.

좀전에 만든 index.js 를 이제 index.ts로 수정한다. 타입스크립트 화일은 확장자가 ts이다. 수정하고 보면 require(‘express’) 부분에서 에러가 날것이다. require는 commonjs 모듈스펙인데 설정에서 esmodule 스펙을 사용하도록 설정했기 때문이다. 따라서 es module 방식인 import 구문으로 바꾼다.

src/index.ts

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

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');

});

개발환경 설정

앞에서 우리가 설정한 서버는 localhost 서버로 본인이 사용하는 컴퓨터가 서버가 되었다. 그러나 개발이 끝나면 서버는 아마존 클라우드 서버같은 public 한 망에 배포가 되어야 한다.

배포환경을 설정하는것은 맨 뒤에 할 것이고 여기서는 개발환경을 먼저 구성해보자. 개발환경에서 가장 중요한것은 HMR의 구성이다. 소스를 수정하면 수정된 내용을 바로 확인할 수 있어야 한다.

HMR은 Hot Module Replace의 약자로서 변경 사항을 수정하면 바로 컴파일되고 만약 프런트개발을 하고 있다면 브라우저까지 리프레쉬를 해줘서 수정사항을 바로바로 확인할 수 있는 설정이다.

앞에서와 같이 실행하게 되면 소스를 수정할때 마다 control – c 를 눌러서 프로그램을 종료시키고 다시 실행해야 한다.

먼저 nodemon, ts-node 두개를 개발의존성으로 설치한다. nodemon은 소스가 수정되었는지를 watch하고 있고, 수정이 되었으면 ts-node 를 사용하여 ts를 컴파일 하고 실행까지 해준다.

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

1 2	npm install -D nodemon npm install -D ts-node

이제 package.json에 start 스크립트를 추가한다. nodemon은 개발의존성으로 설치했으므로 mode_modules/nodemon/bin 에 nodemon 이 존재한다. 하지만 package.json에 스크립트로 작성하게 되면 해당 폴더를 찾아서 실행해준다.

package.json

{
  "name": "node-rest-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --exec ts-node src/index.ts",
    "test": "echo "Error: no test specified" &amp;&amp; exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.11",
    "nodemon": "^2.0.7",
    "ts-node": "^9.1.1",
    "typescript": "^4.2.3"
  }
}

{

"name": "node-rest-tutorial",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

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

"test": "echo "Error: no test specified" && exit 1"

"keywords": [],

"author": "",

"license": "ISC",

"dependencies": {

"express": "^4.17.1"

"devDependencies": {

"@types/express": "^4.17.11",

"nodemon": "^2.0.7",

"ts-node": "^9.1.1",

"typescript": "^4.2.3"

}

이제 스크립트로 실행해보자.

npm run start

1	npm run start

정상적으로 실행됨을 확인한다.