작업환경 설정

• 여태까지 작업했던 모든 파일을 client 내부로 옮기고, client 폴더 외부에 package.json 파일 생성
• .gitignore 복사해서 갖고오기

Nodemon 설치

npm install -g nodemon

npm install nodemon body-parser express

실습 1 - Node.js Express

package.json

// package.json
{
	"name": "managemant",
	"version": "1.0.0",
	"scripts": {
		"client": "cd client && yarn start",
		"server": "nodemon server.js",
		"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yan client\""
	},
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.4"
  },
  "devDependencies": {
    "concurrently": "^4.0.1"
  }
}

일단 강의를 듣는 동안은 이 버전으로 실습 진행

• “management”: 관리 프로그램 ”version”: 1.0.0 이라고 설정
• “client”: 클라이언트 폴더로 이동한 다음 yarn start ”server”: server.js를 실행시킴 ”dev”: server와 client 모두 동작시킴

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/api/hello', (req, res) => {
    res.send({message: 'Hello, Express!'});
});

app.listen(port, () => console.log(`Listening on port ${port}`));

실행 시 node server.js ⇒ localhost:5000 에서 열림

(결과 화면)

• express: 익스프레스를 불러옴 bodyParser: 서버 모듈을 위한 기능 불러오기 위한 선언 port: 서버의 포트 설정
• API 명세: app.get(’/api/hello’, (req, res) ⇒ {…}); /api/hello로 접속하면 ‘Hello, Express!’라는 메시지를 출력