게시판 서버 만들기 #3 - 라우터 분리

지금까지 만든 라우터들을 분리하고 로그인 여부에 따라 메인 화면이 달라지도록 코드를 살짝 정리해보자.

 

1. 라우터 분리

지금까지 만든 사용자 관련 라우터들을 server.js 에서 빼서 따로 모아두자. 

 

이렇게 코드들을 모듈화해 분리해두면 나중에 서버를 관리하기 더 편해질 것이다.

 

/*  front/server.js  */

const express = require('express')
const nunjucks = require('nunjucks')
const app = express()


app.set('view engine', 'html')
nunjucks.configure('views', {express:app})

app.get('/', (req, res) => {
    res.render('main.html')
})

app.get('/user/join', (req, res) => {
    res.render('join.html')
})

app.get('/user/login', (req, res) => {
    res.render('login.html')
})

app.listen(3001, ()=> {
    console.log('server run 3001')
})

 

지금까지 작성한 라우터들은 다음과 같다.

 

이 중 메인 페이지를 제외한 나머지를 분리할 것이다.

 

front 폴더 바로 아래에 routes 폴더를 만들어주고, index.js 파일을 만들어준다.

 

/*  front/routes.index.js  */

const express= require('express')
const router = express.Router()

router.get('/user/join', (req, res) => {
   res.render('join.html')
})

router.get('/user/login'), (req, res) => {
   res.render('login.html')
})

module.exports = router

 

이렇게 export된 라우터들을 받아주기 위해 server.js에도 코드를 추가해주어야 한다.

 

다음과 같이 수정해줄 수 있다.

 

/*  front/server.js  */

const express = require('express')
const nunjucks = require('nunjucks')
const app = express()

const router = require('./routes/index.js') // 이 코드를 추가

app.set('view engine', 'html')
nunjucks.configure('views', { express: app})

app.get('/', (req, res) => {
   res.render('main.html')
})

app.user(router) // 이 코드를 추가

app.listen( 3001, () => {
   console.log('server run 3001')
})

 

이렇게 하면 라우터들을 따로 분리할 수 있다.

 

앞으로 우리는 게시판 관련 라우터들도 작성을 할텐데, 게시판 관련 라우터와 사용자 관련 라우터가

 

혼동되지 않도록 이 두 종류의 라우터들을 분리하고 싶다.

 

따라서 여기서 다시 사용자 관련 라우터들을 한 번 더 밖으로 빼내는 작업을 할 것이다.

 

routes/index.js 파일을 다음과 같이 수정한다.

 

/*  front/routes/index.js */

const express = require('express')
const router = express.Router()
const userRouter = require('./user/index.js')

router.use('/user', userRouter)

module.exports = router

 

/user가 앞에 붙은 uri에 관련된 라우터들을 밖으로 빼낸 것이다.

 

이제 밖으로 빼낸 라우터들을 다시 따로 작성해줄 것이다.

 

routes 폴더 안에 user 폴더를 하나 만들고 index.js 파일을 생성해 다음과 같이 작성한다.

 

/*  front/routes/user/index.js  */

const express = require('express')
const router = express.Router()


router.get('/login', (req, res) => {
   res.render('login.html')
})

router.get('/join', (req, res) => {
   res.render('join.html')
})

modile.exports = router

 

마지막으로 여기서 다시 한 번 미들웨어만을 따로 분리할 수 있다.

 

user 폴더에 userController.js를 만들고 다음과 같이 미들웨어를 옮긴다.

 

/*  front/routes/user/userController.js  */

exports.join = (req, res) => {
    res.render('join.html')
}

exports.login = (req, res) => {
    res.render('login.html')
}

 

다시 routes/user/index.js 로 돌아가 분리한 미들웨어를 import 해주고 cb 대신 미들웨어 이름을 써준다.

 

/*  front/routes/user/index.js  */

const express = require('express')
const router = express.Router()
const userController = require('./userController.js')

router.get('/login', userController.login)
router.get('/join', userController.join)

module.exports = router

 

여기까지 하면 라우터 분리는 얼추 마무리 되었다고 볼 수 있다.

 

앞으로 게시판에 관련된 라우터도 이런 식으로 작성을 해볼 것이다.

 

 

2. 로그인 여부에 따라 다른 메인 페이지 렌더링하기

여러 가지 방법이 있지만 여기서는 가장 간단한 방법으로 쿠키 유무에 따라 다른 html을 렌더링 하는 식으로 해보자.

 

로그인을 하지 않은 사람에겐 회원가입, 로그인 링크가 있는 main.html을 그대로 사용하면 되고

 

로그인을 한 사람에겐 (쿠키가 있는 사람에겐) 다른 html을 렌더링하도록 미들웨어를 재작성 할 것이다.

 

front/server.js 를 다음과 같이 수정하자.

 

(필요 외부 라이브러리 : cookie-parser)

 

/*  front/server.js  */

const express = require('express')
const nunjucks = require('nunjucks')
const app = express()
const cookieParser = require('cookie-parser')  // 추가
const router = require('./routes/index.js')

app.use(cookieParser())  // 추가

app.set('view engine', 'html')
nunjucks.configure('views', { express: app })

app,get('/', (req, res) => {  // 이 라우터를 수정
   const { token } = req.cookies
   if(token) {
      res.render('main2.html')
   }
   else {
   res.render('main.html')
   }
})

app.use(router)

app.listen(3001, () => {
   console.log('server run 3001')
})

 

우선 쿠키 중 token (저번에 로그인 할 때 만들어준 쿠키 이름) 이 있는지 확인한다.

 

있다면 main2.html 을, 없다면 main.html을 렌더링해준다.

 

main2.html은 다음과 같이 작성한다.

 

/*  front/views/main2.html  */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1><a href='/'>main page</a></h1>
    <br>

    <a href="#">게시판</a>
</body>
</html>

 

다음 글에서는 본격적으로 게시판 페이지를 만들기 전에

 

로그인한 사용자만을 추려내서 게시판 페이지로 갈 수 있게 해주는 미들웨어를 짜보자.