라우터 설정

node.js 강의를 한번 듣고나서 복습을 위해 처음부터 다시 해보고 있다. 그러던 중 저번 강의때는 server.js파일안에 모든 get, post, put, delete 등 많은 라우터를 한 파일에 넣어서 사용했더니, 가독성이 정말 문제가 많고 어느 부분에는 이상한 자료가 생기고 어디가 오류가 발생하는지 쉽게 알지 못해서 이번 복습할 때는 라우터를 이용해 정리하고 넘어가도록 해야겠다.

const express = require('express')
const post = require('./router/routs')
const app = express()
const PORT = 8080

app.use('/post_page', post)

app.listen(PORT, () => {
  console.log(`http:${PORT} 에서 서버 실행중`)
})

post변수에 router/routs파일을 불러온다. router폴더 안에 routs.js가 들어있지만, 확장자를 붙이면 오류가 발생하기 때문에 확장자를 제거하고, use키워드를 통해 '/post_page'를 접속하면 post변수를 자동으로 불러온다. post_page 경로가 바뀌면 404 Error이 발생하기 때문에 저 부분을 신경써준다. 즉, 기본경로라는것.

const express = require('express')
const router = express.Router()
const bodyParser = require('body-parser')

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

router.get('/', (req, res) => {
  try {
    res.render('routs.ejs')
  } catch(err) {
    console.error(err)
  }
})

router.post('/', (req, res) => {
  let id = req.body.id
  let pwd = req.body.pwd
  let title = 'Post page'
  console.log("id : ", id)
  console.log("pwd : ", pwd)
  res.send(
    `<h1>${title}</h1>
    <p>당신의 아이디는 ${id}</p>
    <p>당신의 비밀번호는 ${pwd}</p>`
  )
})

module.exports = router

• express를 설치하면 Router가 같이 설치되므로, 추가설치할 필요는 없지만 로딩할 때, router = express.router()를 통해 불러와야 사용할 수 있다. 
• body-parser가 설치되어 있지 않다면, 요청을 통해 값을 넣을 때 body.id, body.pwd를 넣을 수 없다. body-parser.json()은 본문의 body가 json형태로 되어있다면 이것을 파싱해서 자바스크립트 객체 형태로 받을 수 있도록 한다. urlencoded는 url형태로 되어있다면 url을 파싱해서 body에 저장한다. urlencoded가 없다면 html을 통해 전송된 자료를 읽어올 수 없다. post 요청의 경로가 '/post_page'로 전송되기 때문에 urlencoded도 필요하다. 즉, 둘 다 필요하다.
• router.get()을 통해 routs.ejs파일을 전송해서 보여주도록 한다. 
• router를 module.exports하면, server.js에서 post라는 변수에 저장된 router를 불러와서 사용할 수 있도록 해준다. 즉, 라우터 폴더 밑의 경로들을 사용할 수 있도록 해준다.

동작

server.js파일에서 use()를 사용해 'post_page'경로를 지정하고나면 자동으로 post변수의 routs.js파일을 실행한다. 그러면 routs.js파일에 정의된 router.get(), router.post() 함수를 실행해서 클라이언트에게 전송한다. 

 

get요청은 routs.ejs파일을 불러와서 페이지를 보여주고, post요청은 routs.ejs파일 안에 있는 action경로가 'post_page'이기 때문에 'post_page'경로로 form의 body를 전송해준다.

 

routs.ejs의 action의 경로와 server.js의 use()키워드에서 'post_page'경로가 일치해야 제대로 작동한다. 만약 둘이 다르면 전송은 다른곳에 하고, 페이지에는 변화가 없다.