express 서버 설정

express 서버를 생성할 때 다음의 방법을 따른다.

---

패키지 라이브러리 설치

npm i express dotenv hpp helmet cors
npm i gitignore
npm i mongoose
npm i @babel/cli @babel/preset-env @babel/core @babel/node babel-loader @babel/polyfill -D
npm i morgan nodemon -D

---

nodemon 설정

package.json

"scripts": {
  "build": "babel src -d dist",
  "start": "npm run build && node dist/app.js",
  "dev": "nodemon ./server/app.js --exec babel-node"
}

---

babel 환경설정

server/.babelrc

{
  "presets": ["@babel/preset-env"]
}

---

express 서버 생성

server/app.js

import express from "express"
const app = express();
const port = 7000

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

app.listen(port, () => {
  console.log("port on 7000 express server")
})

---

dotenv로 코드보안

.env

MONGO_URI = "붙여넣기"

위와 같이 .env파일 내에 변수명 = 값 으로 구성한다.

다른 파일에서 불러올 때,

require("dotenv").config();

위와 같이 dotenv 모듈을 넣어주고,
proccess.env.변수명 으로 해당 변수를 불러올 수 있다.

---

.gitignore 설정

.gitignore

node_modules
.env

---

mongoose 연결

server/app.js

import mongoose from 'mongoose'

require("dotenv").config();

mongoose.connect(process.env.MONGO_URI).then(() => console.log("connected"))
  .catch((err) => console.log(err))

---

helmet, hpp로 서버 보안, morgan으로 요청/응답 정보 로그

server/app.js

import helmet from 'helmet'
import hpp from 'hpp'

//hpp는 개발환경에서 필요없는 모듈이므로 배포환경일 때만 사용.
if (process.env.NODE_ENV === "production") {
  app.use(morgan("combined"));
  app.use(helmet());
  app.use(hpp());
} else if (process.env.NODE_ENV === "development") {
  app.use(morgan("dev"));
}

---

파싱 설정

server/app.js

//express에 내장되어 있음.
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

Client to Server

body데이터를 분석해서 req.body로 출력 후 넘겨주어야 한다.
이 때, req.body를 사용하기 위해 파싱해주어야 한다.
파싱의 역할은 클라이언트에서 보낸 body데이터의 정보를 서버에서 번역할 수 있게 해준다.
만약 안하면, default값으로 undefined가 뜸.
프론트에서 보낸 데이터를 req.body 안에 넣어주는 역할을 함.

라우팅 코드 위에 적어놔야 한다.

cors 사용하기

server/app.js

모든 도메인 허용할 때.

import cors from 'cors'

app.use(cors())

또는, 특정 도메인만 허용할 때.

import cors from 'cors'

const corsOptions = {
  origin: "https://www.domain.com",
  credentials: true
}

app.use(cors(corsOptions))

브라우저와 백엔드 서버의 포트 넘버가 다를 경우 브라우저에서 차단하는 것을 cors라 한다.
반면, 프론트 서버와 백엔드 서버의 포트넘버가 다를 경우는 상관 없는데,
이를 이용한 cors 회피 방법을 proxy라 한다.
이를 미들웨어로 처리한 방법이다.

---

router 설정

client에서 다음과 같이 서버로 post를 할 때, routes 폴더를 만들고 분기해준다.

Axios.post('/api/users/login')
  .then(res => {
    if(res.data.success) return console.log(res.data.type)
  	else return console.log(res.data.err)
  })

server/app.js
미들웨어로 라우트 분기 설정.

app.use('/api/users', require('./routes/users'))

server/routes/users.js
분기 설정했기 때문에 url을 생략하여 적을 수 있다.

import express from 'express'
const router = express.Router()
router.post('/:type', (req,res,err) => {
  const { type } = req.params
  if(err) return res.json({ success: false, err })
  res.json({ success: true, type })
})

export default router

---

폴더, 파일 설정

• server
  • .babelrc
  • app.js
  • routes
    • users.js
• .gitignore
• .env
• package.json