2. MariaDB 기반 CRUD 게시판 만들기

Eclipse에서 Node.js (Nodeclipse)를 사용하는 방법을

다음과 같이 4가지로 정리하였다.

1. Node.js 프로젝트 생성 및 개발 준비

2. MariaDB 기반 CRUD 게시판 만들기

3. 게시판 예제 보강

4. GitHub에서 Node.js 소스 가져오기

앞서 생성한 board 프로젝트에 간단한 게시판 기능을 구현하여

기초적인 Node.js 사용법을 정리한다.

MariaDB(MySQL)을 기반으로

데이터를 저장하고 조회하는 CRUD 게시판을 제작한다.

게시판과 관련된 기본 설명들은 본 블로그에 정리되어 있다.

Java(Spring) 기반으로 되어 차이가 있지만

대부분의 개념은 언어와 관계없이 유사하니 참고하면 도움이 될 것이다.

여기서는 Java로 작성된 게시판 예제 중 게시판 1을 Node.js로 구현한다.

HTML부분은 그대로 복사해서 사용하고, 컨트롤 부분만 간단하게 작성하였다.

먼저, MariaDB 에서

다음과 같이 테이블(TBL_BOARD)을 생성한다.

CREATE TABLE TBL_BOARD (

    BRDNO int(11) NOT NULL AUTO_INCREMENT,         -- 글 번호

    BRDTITLE varchar(255),                                -- 제목

    BRDWRITER varchar(20),                              -- 작성자

    BRDMEMO   varchar(4000),                           -- 내용

    BRDDATE     datetime,                                -- 작성일자

    PRIMARY KEY (BRDNO)
) ;

Node.js에서 MariaDB에 접속하기 위해 mysql(?) 라이브러리를 설치한다.

콘솔 창에 [npm install mysql --save]를 입력하여 설치한다.

Eclipse에서 package.json 파일을 열어보면

mysql이 추가된 것을 볼 수 있다.

mysql이 이미 설치된 경우 콘솔 창에서 설치 할 필요없이

package.json 파일에서 다음과 같이 입력하고

컨택스트 메뉴에서 Run As > npm Install를 실행해도 된다.

먼저, app.js 파일을 열어서 다음 문장을 추가한다.

app.use('/board1', require('./routes/board1'));

routes 폴더에 있는 board1.js 파일을

board1 이라는 가상 폴더(/)로 사용하겠다는 것이다.

웹에서 board1/list, board1/form 과 같이 입력해서 사용한다.

웹 컨트롤 파일(js)은 대부분 routes 폴더에 두고 사용하고

HTML(ejs)과 같은 뷰(view) 파일은 views 폴더에 두고 사용한다.

board1.js의 내용은 다음과 같다.

var express = require('express'); var router = express.Router(); // MySQL 로드 var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit: 5, host : 'localhost', user : 'root', password : '비밀번호', database : 'board' }); router.get('/', function(req, res, next) { res.redirect('/board1/list'); }); router.get('/list', function(req,res,next){ pool.getConnection(function (err, connection) { var sql = "SELECT BRDNO, BRDTITLE, BRDWRITER, DATE_FORMAT(BRDDATE,'%Y-%m-%d') BRDDATE" + " FROM TBL_BOARD"; connection.query(sql, function (err, rows) { if (err) console.error("err : " + err); // console.log("rows : " + JSON.stringify(rows)); res.render('board1/list', {rows: rows?rows:{}}); connection.release(); }); }); }); router.get('/read', function(req,res,next){ pool.getConnection(function (err, connection) { var sql = "SELECT BRDNO, BRDTITLE, BRDMEMO, BRDWRITER, DATE_FORMAT(BRDDATE,'%Y-%m-%d') BRDDATE"+ " FROM TBL_BOARD" + " WHERE BRDNO=" + req.query.brdno; console.log("rows : " + sql); connection.query(sql, function (err, rows) { if (err) console.error("err : " + err); console.log("rows : " + JSON.stringify(rows)); res.render('board1/read', {row: rows[0]}); connection.release(); }); }); }); router.get('/form', function(req,res,next){ if (!req.query.brdno) { res.render('board1/form', {row: ""}); return; } pool.getConnection(function (err, connection) { var sql = "SELECT BRDNO, BRDTITLE, BRDMEMO, BRDWRITER, DATE_FORMAT(BRDDATE,'%Y-%m-%d') BRDDATE" + " FROM TBL_BOARD" + " WHERE BRDNO=" + req.query.brdno; connection.query(sql, function (err, rows) { if (err) console.error("err : " + err); res.render('board1/form', {row: rows[0]}); connection.release(); }); }); }); router.post('/save', function(req,res,next){ var data = [req.body.brdtitle, req.body.brdmemo, req.body.brdwriter, req.body.brdno]; console.log("rows : " + data); pool.getConnection(function (err, connection) { var sql = ""; if (req.body.brdno) { sql = "UPDATE TBL_BOARD" + " SET BRDTITLE=?, BRDMEMO=?, BRDWRITER=?" + " WHERE BRDNO=?"; } else { sql = "INSERT INTO TBL_BOARD(BRDTITLE, BRDMEMO, BRDWRITER, BRDDATE) VALUES(?,?,?, NOW())"; } connection.query(sql, data, function (err, rows) { if (err) console.error("err : " + err); res.redirect('/board1/list'); connection.release(); }); }); }); router.get('/delete', function(req,res,next){ pool.getConnection(function (err, connection) { var sql = "DELETE FROM TBL_BOARD" + " WHERE BRDNO=" + req.query.brdno; connection.query(sql, function (err, rows) { if (err) console.error("err : " + err); res.redirect('/board1/list'); connection.release(); }); }); }); module.exports = router;

모든 코드를 정리 하지 않고, 주요한 몇 가지만 정리한다.

먼저, MariaDB (MySQL)에 접속하는 커넥션 풀링을 생성한다 [라인 5~12].

이 커넥션 풀링(pool)을 이용하여 SQL문을 실행한다.

적당한 DB 접속 정보를 지정하면 된다.

14 라인의 / 은 구체적인 URL을 입력하지 않고

가상 경로(board1)만 입력하면

게시판 리스트(/board1/list)로 이동시킨다.

데이터 CRUD(Create, Read, Update, Delete)를 구현하기 위해

list, read, form, save, delete의 5 개의 컨트롤(URL)이 정의되었다.

이 컨트롤은 웹에서

    http://localhost:3000/board1/list

로 입력해서 사용한다.

list, read, form, save, delete의 컨트롤은

각각 글 리스트, 글 읽기, 글쓰기 폼, 글쓰기 저장, 글 삭제를 의미한다.

글 쓰기과 글 수정은 같은 개념이라 하나로 구현했다.

자세한 설명은 여기를 참고 하면 된다.

각 컨트롤의 코드가 제법 많아 어려워 보일 수 있는데

자세히 보면 거의 비슷한 코드로 작성된 것을 알 수 있다.

따라서, 여기서는 예제로 글 리스트(list)만 정리한다.

글 리스트(/list)가 호출되면 [라인 18]

DB에서 게시판 테이블(TBL_BOARD)의 데이터를 가지고 (SELECT) 오도록 한다 [라인 57].

SQL문을 실행하는 명령어는 connection.query로

SQL에 필요한 파라메터가 필요할 경우에는 [라인 79]

다음과 같이(data) 배열로 지정하고

    var data = [req.body.brdtitle, req.body.brdmemo, req.body.brdwriter, req.body.brdno]; [라인 67]

    connection.query(sql, data, function (err, rows)

없으면 생략한다 [라인 22, 38, 57].

글 읽기(삭제)에서는 파라메터를 SQL 문자 조작을 통해서 지정했다 [라인 91].

다시 글 리스트(/list)에서

SELECT 문을 실행한 결과가 rows 변수로 반환된다 [라인 22].

이 것을 HTML(ejs) 파일에 보내서 (res.render) 적당한 디자인으로 출력한다 [라인 26].

res.render는

지정된 HTML(ejs) 파일을 찾아서

지정된 데이터(rows)을 연결해서 처리하라는 함수이다[라인 26].

res.render에서 지정된 board1/list는

views폴더 하위에 board1 폴더 하위에 list.ejs 파일을 의미한다.

views폴더는 기본 설정이라 이 문장에서 생략된다.

ejs 확장자도 생략하여 사용한다.

글 리스트, 글쓰기 폼, 글 읽기는

데이터 처리후 시각적인 페이지가 있기 때문에

각각 list.ejs, form.ejs, read.ejs 파일이 있어야 하고

글 저장, 삭제는 시각적인 페이지가 없기 때문에

컨트롤 처리 후 이동할 URL(redirect)을 지정한다 [라인 82, 95].

정리하면,

컨트롤(js)에서는 데이터 베이스에 접속해서 데이터를 가져오거나 전송하고

처리 결과에 따라

필요한 HTML (ejs) 파일을 호출한다.

다음은 board1 폴더 하위에 있는 list.ejs 파일의 내용이다.

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>board</title> </head> <a href="/board1/form">글쓰기</a> <table border="1" style="width:600px"> <caption>게시판</caption> <colgroup> <col width='8%' /> <col width='*%' /> <col width='15%' /> <col width='15%' /> </colgroup> <thead> <tr> <th>번호</th> <th>제목</th> <th>등록자</th> <th>등록일</th> </tr> </thead> <tbody> <% for(var i=0; i<rows.length; i++) { %> <tr> <td><%=rows[i].BRDNO%></td> <td><a href='/board1/read?brdno=<%=rows[i].BRDNO%>'><%=rows[i].BRDTITLE%></a></td> <td><%=rows[i].BRDWRITER%></td> <td><%=rows[i].BRDDATE%></td> </tr> <% } %> </tbody> </table> </body> </html>

전체 코드는 기존에 사용하던 HTML 이고

27 라인 부터 38 라인이 ejs에 의한 자바스크립트 문법이다.

ejs 파일에서 <% %> 사이에 자바 스크립트를 사용한다.

컨트롤에서 지정된 데이터(rows)의 개수만큼 반복해서 [라인28]

HTML 테이블 태그의 TR을 생성한다.

하나의 TR이 데이터 한 행을 출력한다.

하나의 TD가 데이터 한 행의 한 열을 출력한다.

SQL SELECT 문을 실행한 결과가

rows란 배열로 반환되어

rows[i]로 한 행씩 찾아서

JSON으로 구성된 각 행의 열에 있는 값을 출력(=)한다 [라인 31~34].

각 열의 이름과 이름이 대문자로 사용된 것은

SELECT 문 사용시 사용한 이름이고

이때 대문자로 사용했기 때문이다.

SELECT BRDNO, BRDTITLE, BRDWRITER, DATE_FORMAT(BRDDATE,'%Y-%m-%d') BRDDATE

나머지 글쓰기 폼(form.ejs), 글 읽기(read.ejs)도

각각 다음과 같이 작성하여 board1 폴더에 저장한다.

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>board</title> </head> <form name="form1" action="/board1/save" method="post"> <table border="1" style="width:600px"> <caption>게시판</caption> <colgroup> <col width='15%' /> <col width='*%' /> </colgroup> <tbody> <tr> <td>작성자</td> <td><input type="text" name="brdwriter" size="20" maxlength="20" value="<%=row.BRDWRITER%>"></td> </tr> <tr> <td>제목</td> <td><input type="text" name="brdtitle" size="70" maxlength="250" value="<%=row.BRDTITLE%>"></td> </tr> <tr> <td>내용</td> <td><textarea name="brdmemo" rows="5" cols="60"><%=row.BRDMEMO%> </tr> </tbody> </table> <a href="#" onclick="form1.submit()">저장</a> <input name="brdno" value="<%=row.BRDNO%>" type="hidden"> <form> </body> </html>

form.ejs

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>board</title> </head> <table border="1" style="width:600px"> <caption>게시판</caption> <colgroup> <col width='15%' /> <col width='*%' /> </colgroup> <tbody> <tr> <td>작성자</td> <td><%=row.BRDWRITER%></td> </tr> <tr> <td>제목</td> <td><%=row.BRDTITLE%></td> </tr> <tr> <td>내용</td> <td><%=row.BRDMEMO%></td> </tr> </tbody> </table> <a href="#" onclick="history.back(-1)">돌아가기</a> <a href="/board1/delete?brdno=<%=row.BRDNO%>">삭제</a> <a href="/board1/form?brdno=<%=row.BRDNO%>">수정</a> </body> </html>

read.ejs

웹 브라우저에서 http://localhost:3000/board1/list를 입력하여

그림과 같이 잘 실행되는지 확인한다.

좌측 상단의 [글쓰기] 버튼을 클릭한다.

내용을 작성하고 [저장] 버튼을 클릭한다.

글이 잘 등록되었으면

글 제목을 선택해서 글 읽기로 이동한다.

Java(Spring) 기반의 게시판 예제 중 하나를

Node.js로 제작하였다.

Java(Spring) 기반의 게시판 예제를 모두 Node.js로 변환한다면

실력향상에 많은 도움이 될 것이니 도전해 보길 바라고,

도전 결과를 공유하였으면 좋겠다.

지금까지 정리한 소스는 github에서 받을 수 있고,

설치 방법은 여기에 정리하였다.

팁: Eclipse에서 ejs 파일 열기

Eclipse에서 ejs 파일을 열면

다음 그림과 같이 일반 텍스트(Text) 파일 편집기로 열린다.

이 경우 가독성이 떨어지기 때문에

예약어 (HTML 태그)별로 색상이 있는 것이 좋다.

[Prjoect Explorer]뷰에서 ejs 파일 하나를 선택하고 컨텍스트 메뉴를 실행한다.

Open With > Other 메뉴를 실행하고

편집기로 HTML Editor를 선택한다.

하단의 체크 박스도 선택하고 [OK] 버튼을 클릭한다.

아무 ejs 파일을 열면

그림과 같이 보기 좋게 정리된 것을 볼 수 있다.