Node js CRUD 게시판 - Node js CRUD gesipan

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]를 입력하여 설치한다.

Node js CRUD 게시판 - Node js CRUD gesipan

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의 내용은 다음과 같다.

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

먼저, 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 파일의 내용이다.