Node.js로 게시판 만들기 [시작]

아직 완성본은 아니지만 디자인은 좀 뒤로하고 기본적인 게시판 기능을 가지고 있는 게시판을 만들어보고자 합니다.

사용언어 및 도구는 html(pug템플릿 사용), css, jquery, javascript, node.js, mysql (sequelize 사용) 정도 입니다. 

현재 진행사항 및 계획은

1. 게시판 글 로드 (완료)

2. 페이지 분할 (아직 작업 시작 안 함)

3. 조회 수 (완료)

4. 글 쓰기 (폼 수정 작업 필요)

5. 댓글기능(아직 작업 시작 안 함)

5. 게시글 보기 (폼 수정 작업 필요)

6. 본인 게시글 수정 (아직 작업 시작 안 함)

7. 게시글 검색 (작성자 이름만 작업 완료. 제목+내용 업데이트 예정)

일단은 이 정도 입니다. 지금까지 작업한 페이지의 간단한 동작 영상을 gif 파일로 만들어 보았습니다.

0

기존에 작업하던 페이지에 하던 터라 로그인이나 기타 화면들이 같이 들어가 있긴 합니다. 게시판 페이지에 영향을 주는 파일을 중점적으로 포스팅 하려고 합니다.

일단 기본 디렉토리 구조입니다.

다른 잡다한 파일들이 많아서 표시한 파일들이 이 주제에 관련이 있는 파일들 입니다.

1. app_mvc.js - app.js 파일이라고 생각하시면 됩니다. 

2. routes - 각종 라우터들이 있는 디렉토리입니다.

3. views - 앞단이 있는 디렉토리입니다. html 파일들 저는 pug 템플릿을 사용했기 때문에 pug 파일들이 들어있습니다.

4. bin - npm start를 했을 때 실행되는 www 파일이 있는데 개인 환경에 맞게끔 파일명이나 포트번호를 변경하거나 혹은 app.js 파일에 listen을 추가하여 node 명령어로 app.js 파일을 실행시켜도 됩니다.

5. models - 각 테이블들의 정의가 있는 디렉토리 입니다. 여기서는 board와 user 파일을 사용합니다.

6. config - sequelize 를 사용하기 위한 기본 설정이 있는 파일이 들어있습니다.

7. function - 사용자 정의 함수들을 모아놓은 디렉토리 입니다.

그 외에 생략된 것은 꾸미는 용도 이거나 혹은 사용자마다 다른 파일들 입니다.

[ app_mvc.js ]

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var session = require('express-session')
var passport = require('passport')
var sequelize = require('sequelize')
var bodyParser = require('body-parser');
var models = require('./models')
var app = express();
 
//app.get
var indexRouter = require('./routes/index');
var headerRouter = require('./routes/header');
var aboutRouter = require('./routes/about');
var practiceRouter = require('./routes/practice');
var mypageRouter = require('./routes/mypage');
var loginRouter = require('./routes/login');
var enrollRouter = require('./routes/enroll');
var commuityRouter = require('./routes/commuity')
var commuityIdRouter = require('./routes/commuity_id')
var logoutRouter = require('./routes/logout');
var writeRouter = require('./routes/write');
var facebookRouter = require('./routes/facebook');
var facebookCallbackRouter = require('./routes/facebook_callback');
var facebookSuccessRouter = require('./routes/login_success')
//app.post
var loginReceiveRouter = require('./routes/login_receive');
var writeReceiveRouter = require('./routes/write_receive');
var enrollReceiveRouter = require('./routes/enroll_receive');
//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));
app.use(passport.initialize());
app.use(passport.session());
 
//get
app.use('/', indexRouter);
app.use('/header',headerRouter);
app.use('/about',aboutRouter);
app.use('/practice',practiceRouter);
app.use('/mypage',mypageRouter);
app.use('/enroll',enrollRouter);
app.use('/login',loginRouter);
app.use('/commuity',commuityRouter);
app.use('/commuity',commuityIdRouter);
app.use('/logout',logoutRouter);
app.use('/write',writeRouter);
app.use('/auth/facebook',facebookRouter);
app.use('/auth/facebook/callback',facebookCallbackRouter);
app.use('/login_success',facebookSuccessRouter);
 
//post
app.use('/login_receive',loginReceiveRouter);
app.use('/write_receive',writeReceiveRouter);
app.use('/enroll_receive',enrollReceiveRouter);
// 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.js ]

var express = require('express')
var router = express.Router()
var app = express();
var path = require('path')
var 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){
        var jsonStr = JSON.stringify(result);
        if(result.length==0)
            res.render('commuity',{data:0})
        else
            res.render('commuity',{data:jsonStr})
    })
})
 
module.exports = router;

[ commuity_id.js ]

var express = require('express')
var router = express.Router()
var app = express();
var path = require('path')
var board = require('../function/board')
var models = require('../models')
app.set('views',path.join(__dirname,'views'));
app.set('view engine','pug')
 
router.get('/:id',function(req,res){
    var id = req.params.id;
    models.Board.findAll({
        where: {'id':id}
    }).then(function(result){
        models.Board.update({count:++result[0].dataValues.count},
            {where: {'id':id} })
        var jsonObj = JSON.stringify(result)
        res.render('commuity_detail',{data:jsonObj})
    })
})
 
module.exports = router;

기본적으로 app_mvc.js 파일이 실행되어서 routes에 있는 commuity에 관련된 pug 파일을 렌더링해서 실행되는 구조입니다.

물론 routes 디렉토리 안 파일들에 작성되어있는 각종 함수들은 function에 작성해놓은 파일들이고 모듈은 npm을 이용해서 설치가

필요합니다. 그리고 DB를 계속 끌고 다니기 때문에 Sequelize 설정이 제대로 되지 않으면 오류가 날 수 밖에 없습니다.

작업 초기부터 포스팅을 하지 못하게 되어 일단 첫 게시물은 대체적으로 이렇다는 모습을 보여 드립니다. 이전에 했던 작업들도 보충설명을 곁들여 포스팅 하고, 앞으로 업데이트되는 게시물도 동시에 진행할 예정입니다.

현재 진행중인 작업은 https://github.com/JooHyeongLee/webserver_nodejs

여기에 지속적으로 업데이트 할 예정이며 오류가 생기는 부분이 있으면 댓글 남겨주세요~ 

순수한 게시판 페이지를 구현한 프로젝트 파일이 아니다보니 여기저기 충돌나는 부분이 생길 수 밖에 없을 듯 하네요 ㅠ