2015년 12월 18일 금요일

[Express.js] 게시판 만들기 예제


generator로 생성되는 기본 view engine은 jade인데,
익숙해 지면 간편할듯 하지만 바로 적응하면서 쓰기엔 시간이 더 걸릴것 같다.

jsp와 비슷한 문법의 ejs도 옵션으로 있으니 이걸 사용한다.
$ express --ejs board

역시 폴더로 이동해서 dependencies를 설치한다.
$ cd board
$ npm install

정상 구동 확인
$ npm start
http://localhost:3000/



테이블 생성
CREATE TABLE `board` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
   `title` varchar(255) NOT NULL,
   `description` text NOT NULL,
   `img_url` varchar(255) DEFAULT NULL,
   `created` datetime DEFAULT NULL,
   `modifed` datetime DEFAULT NULL,
   PRIMARY KEY (`id`)
 ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4

테스트 데이터 삽입
INSERT INTO board (title, description, created) 
VALUES ('테스트1', '본문 내용', sysdate())
   , ('테스트2', '본문 내용', sysdate())
   , ('테스트3', '본문 내용', sysdate());


MySQL 모듈 설치
$ npm install mysql

개발중 소스 수정시마다 서버 재시작하려면 불편하니 nodemon을 이용한다.
(http://nodemon.io/)
$ npm install -g nodemon

이후 서버 구동은
$ nodemon



app.js에 routes를 추가한다.
...
app.use('/user', users);
// board route 추가
app.use('/board', require('./routes/board')); 
...

routes 폴더에 board.js를 생성한다 (users.js를 복사해서 필요부분을 수정한다.)

var express = require('express');
var router = express.Router();

var mysql      = require('mysql');
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'express',
  password : '1234',
  database : 'express'
});

router.get('/', function(req, res, next) {
 connection.query('SELECT * FROM board', function(err, rows, fields) {
   if (err) throw err;
   res.send(rows);
 });

});

module.exports = router;



접속확인
http://localhost:3000/board


이제 view를 입히자.
board.js 수정
...
   //res.send(rows);
   res.render('board/index', { rows: rows });
...


view 폴더에 board 폴더를 만들고 index.ejs를 생성한다.

<!DOCTYPE html>
<html>
  <head>
    <title>test board</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
   <table border="1px">
    <tr>
      <th width="30px">id</th>
      <th width="100px">제목</th>
    </tr>
    <% for(var i=0; i<rows.length; i++) {%>
    <tr>
     <td><%= rows[i].id %></td>
     <td><%= rows[i].title %></td>
    </tr>
    <% } %>
  <table>
  </body>
</html>


접속확인
http://localhost:3000/board


DB 접속과 view 적용이 확인 되었으니 이걸 활용해서 추가/수정/삭제를 구현해보자.



댓글 없음:

댓글 쓰기