DB에 있는 데이터 게시판 페이지로 넘기기

이전 포스팅에서는 DB를 셋팅했습니다. 그럼 DB에 있는 데이터를 표시해야하겠죠? 그럼 server와 client 간의 통신이 필요할 것입니다. 쉽게 말하면 앞 단과 뒷 단 간의 데이터를 주고받아야 한다는 것이죠. 

commuity 라는 페이지를 만들어서 적용을 해보도록 하겠습니다. 

저는 pug 템플릿을 사용하기때문에 html 형태가 조금 다를 수 있습니다. 변환을 해주는 사이트들이 많이 있으니 바꿔서 사용하셔도 되고 아니면 개인적으로 게시판 폼을 만들어서 쓰셔도 됩니다. 

views/commuity.pug

script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
link#custom-css(href='custom_css/commuity.css', rel='stylesheet')
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css')
    table.type09(id='List')
        thead
        tr
            th(scope='cols' style="width:10%") nums 
            th(scope='cols' style="width:55%") Title
            th(scope='cols' style="width:10%") Views 
            th(scope='cols') Date
            th(scope='cols' style="width:10%") Author
        tbody#tbody
    div(align="right" style="margin-right:10%;")
    script.
        let data = !{data}
        let len = Object.keys(data).length
        $(document).ready(function(){
            let tbody = document.getElementById('tbody');
            if(data==0)
                len = 1
            else{
                len = Object.keys(data).length
                tbody = document.getElementById('tbody');
                for(let i=0;i<len;i++){
                    tbody.innerHTML += "<th>"+(i+1)+"</th>"
                    +"<th>"+data[i].subject+"</th>"
                    +"<th>"+data[i].count+"</th>"
                    +"<th>"+data[i].created_at.substr(0,10)+ "</th>"
                    +"<th>"+data[i].name+"</th>"
                }
            }
        });
 

약간의 css가 들어가있어서 같이 첨부하겠습니다. 테이블을 좀 보기 좋게 하기 위한 것입니다.

custom_css/commuity.css

table.type09 {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    line-height: 1.5;
    width: 80%;
    margin-top:3%;
}
table.type09 thead th {
    padding: 10px;
    font-weight: bold;
    vertical-align: top;
    text-align:left;
    color: #369;
    border-bottom: 3px solid #036;
}
table.type09 tbody th {
    width: 150px;
    padding: 10px;
    font-weight: bold;
    text-align:center;
    vertical-align: top;
    border-bottom: 1px solid #ccc;
    background: #f3f6f7;
}
table.type09 td {
    width: 350px;
    padding: 10px;
    vertical-align: top;
    border-bottom: 1px solid #ccc;
}
 

그럼 해당 페이지를 app.js 파일에서 렌더링을 하게 되면 html 페이지가 나올 것입니다.

app.js

const createError = require('http-errors');
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const session = require('express-session')
const passport = require('passport')
const sequelize = require('sequelize')
const models = require('./models')
const app = express();
 
//app.get
const indexRouter = require('./routes/index');
const commuityRouter = require('./routes/commuity')
//sequelize
models.sequelize.sync()
    .then(function() {
    console.log('✓ DB connection success.');
      console.log('  Press CTRL-C to stop\n');
  })
  .catch(function(err) {
    console.error(err);
    console.log('✗ DB connection error. Please make sure DB is running.');
    process.exit();
  });
 
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
 
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(cookieParser())
app.use(session({
    secret:'123123123',
    resave:false,
    saveUninitialize:true
}));
app.use(express.static(__dirname));
 
//get
app.use('/', indexRouter);
app.use('/commuity',commuityRouter);
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});
 
// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
 
  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
module.exports = app;

여기서 commuity 라우터를 불러오면

routes/commuity.js

let express = require('express')
let router = express.Router()
let app = express();
let path = require('path')
app.set('views',path.join(__dirname,'views'));
app.set('view engine','pug')
 
router.get('/',function(req,res){
    res.render('commuity')
})

아직은 데이터를 넘겨준 것이 하나도 없으니 이런 식으로 열만 나오게 될 것입니다. commuity 라우터에서 데이터를 넘겨주는 작업을 해야합니다. 그렇다고 아무 데이터나 넘겨줄 순 없겠죠 DB와 연동해서 쓰고 있으니 DB에 있는 데이터를 넘겨주겠습니다.

저는 DB에 있는 데이터를 불러오는 작업을 함수로 따로 작성하여 불러왔는데 그냥 한 파일에 function을 선언해서 쓰셔도 상관은 없습니다.

function/board.js

let models = require('../models');
let async = require('async');
 
function boardLoadFunction(callback) {
    models.Board.findAll().then(function(result){    //result가 board 테이블의 모든 값을 json으로 반환
        let jsonObj = [];                //board 테이블의 데이터를 담을 배열
        let tasks = [
            function(call){            
                if(result.length==0)    //게시판에 글이 하나도 없을 때0값 리턴
                    callback(0)
                else{
                    for(let i=0;i<result.length;i++)        //데이터의 개수만큼 반복문
                        jsonObj.push(result[i].dataValues)    //jsonObj 배열에 select * from board 값을 저장
                    call(null,jsonObj);                        //위의 쿼리문 결과를 다음 함수로 넘겨줌
                }
            },
            function(jsonObj,call){
                let i =0;                            
                let nameList = {};                            //{ 외래키 : 이름 } 의 형태로 만들 json 데이터
                jsonObj.forEach(function(element){            //board 테이블과 user테이블의 데이터를 비교
                    models.User.findOne({                    
                        where:{id:element.fk_userId}        //board의 외래키와 user의 id값의 일치여부
                    }).then(function(user){
                        nameList[element.fk_userId] = user.dataValues.name    
                        //nameList 객체에 { 외래키 : 이름 } 으로 저장
                        i++;
                        if(jsonObj.length==i)    //배열 끝까지 비교가 끝나면 다음 함수로 넘겨줌
                            call(null,nameList);        
                    })
                })
            },
            function(nameList,call) {            //jsonObj에 name값을 추가한 데이터를 최종적으로 만듦
                let i=0
                jsonObj.forEach(function(element){    
                    if(nameList.hasOwnProperty(element.fk_userId)){
                        jsonObj[i].name = nameList[element.fk_userId]    //jsonObj객체에 name key와 key value 추가
                        i++
                    }
                    if(i==jsonObj.length)
                        callback(jsonObj)        //배열 끝까지 비교가 끝나면 app.js로 넘겨줌
                })
            }
        ]
        async.waterfall(tasks,function(err){
            if(err)
                console.log(err)
        })
    }).catch(function(err){
        console.log(err);
    })
}
exports.boardLoadFunction = boardLoadFunction;
 

작성하다보니 사이즈가 너무 커져버렸습니다. 제가 게시판에 나타나게 할 열의 목록은 위에서 보다시피

게시물 번호    |     게시물 제목     |     조회 수     |     날짜     |     글쓴이    |

이렇게 6개의 열인데 게시물 번호를 제외하고는 board 테이블과 user 테이블에 해당 정보가 있습니다. 즉, 두 테이블을 모두 참조해야 한다는 뜻이 되죠..

board 테이블 -> 게시물제목 , 조회수 , 날짜

user 테이블 -> 글쓴이

그래서 위에 함수 작업을 단계별로 나누자면 이렇습니다.

근데 async 모듈을 써가면서까지 한 이유는 user 테이블에서 name 값을 검색하여 기존의 jsonObj 변수에 저장을 할 때 매칭이 안되는 문제가 생겼습니다. 예를들면 1번이라는 게시물은 1번이라는 이름이 작성했다고 가정했을 때

게시물 번호    |     게시물 제목     |     조회 수     |     날짜     |     글쓴이    |

        1                         1번                        0              ~~~              1번

2                        2번                        0             ~~~               2번

이런 식으로 나와야 하는데

게시물 번호    |     게시물 제목     |     조회 수     |     날짜     |     글쓴이    |

        1                         1번                        0              ~~~              2번

2                        2번                        0             ~~~               1번

이런식으로 글쓴이와 게시물이 매칭이 안되는 문제가 생기게 되어 최대한 단계별로 하나의 데이터만 삽입하게 끔 수정을 하게 되었습니다. 아마 비동기성때문에 데이터 순서가 달라지는 듯 합니다. 

가독성도 떨어지고 비효율적인 방법이라 생각은 드는데 방법을 찾아내면 업데이트 하도록 하겠습니다.

위 함수의 결과물은 매개변수로 콜백함수를 받아서 최종적으로 만들어진 jsonObj값을 boardLoadFunction을 호출한 곳에서 사용할 수 있게끔 해줍니다. 결과물로 만들어진 객체는 html 페이지를 로딩함과 동시에 데이터를 넘겨줘야겠죠

수정 된

routes/commuity.js

let express = require('express')
let router = express.Router()
let app = express();
let path = require('path')
let board = require('../function/board')
app.set('views',path.join(__dirname,'views'));
app.set('view engine','pug')
 
router.get('/',function(req,res){
    board.boardLoadFunction(function(result){
        res.render('commuity',{data:JSON.stringify(result)})
    })
})
module.exports = router;

board 함수를 추가하여 해당 값을 commuity 페이지를 렌더링하면서 객체를 client 페이지에 넘겨주게 됩니다.

맨 처음에 작성했던 html 페이지 중 script 부분만 따로 떼어서 보겠습니다.

<script>
    let data = !{data}
    let len = Object.keys(data).length
    $(document).ready(function() {
        let tbody = document.getElementById('tbody');
        if (data == 0)
            len = 1
        else {
            len = Object.keys(data).length
            tbody = document.getElementById('tbody');
            for (let i = 0; i < len; i++) {
                tbody.innerHTML += "<th>" + (i + 1) + "</th>" +
                    "<th>" + data[i].subject + "</th>" +
                    "<th>" + data[i].count + "</th>" +
                    "<th>" + data[i].created_at.substr(0, 10) + "</th>" +
                    "<th>" + data[i].name + "</th>"
            }
        }
    });
</script>

data 변수는 board 함수에서 만들어진 게시물의 정보를 담고있는 json 객체 데이터 입니다. 

해당 데이터를 반복문을 통해서 테이블에 차례대로 삽입시켜주면 됩니다. innerHTML 를 이용하여 data 객체에 있는 값들을 해당 열에 맞게끔 데이터 행을 추가해주게 됩니다.

DB에 데이터가 있다고 한다면 이런식으로 모습이 나오게 되겠죠

물론 해당 게시물의 내용을 볼 수도 있어야 하고 글쓰기 페이지 라던가 검색기능과 같은 기능이 있어야 게시판이라 할 수 있겠죠.

지금은 어떤식으로 데이터를 가져와서 뿌려주는 것인지를 위주로 보았습니다.