게시판 만들기 LIST
안녕하세요.
고코더 입니다.
오늘부터 기초적인 예제를 마무리 하고 게시판 만들기로 실전을 다져볼려고 합니다.
기본예제에서 배우지 못한 소스들이 나온다고 해도 긴장하지 마시고
천천히 한줄한줄 고민하면서 따로오시면 금방 노드가 머리속에 익혀질거라 생각 됩니다.
● 1. 들어가기전에 체크 해야 할 사항
● 1-1. 데이터베이스 참조파일 생성이 되어 있는지 확인
이전에 require()로 DB 소스를 참조로 사용하는 방법을 배웠습니다.
해당 DB폴더가 자신에 로컬에 설치되어 있고 mysql에 정상 접속 되는지 확인해보세요.
● 1-2. 로컬에 Mysql이 설치 되어 있는지 확인해보세요.
이제는 데이터베이스와 연동하여 작업을 해야 합니다. 로컬에 mysql 설치가 필수 입니다.
->
제 데이터베이스 설정은 이렇습니다.
스키마 : nodedb
테이블 : board
● 1-3. 해당 sql 문을 실행 하여 테이블과 데이터 하나를 생성 해주세요.
use nodedb;
CREATE TABLE `board` (
`idx` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`title` varchar(50) NOT NULL,
`content` mediumtext NOT NULL,
`regdate` datetime NOT NULL,
`modidate` datetime NOT NULL,
`passwd` varchar(50) NOT NULL,
`hit` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`idx`)
);
INSERT INTO `nodedb`.`board`(`name`,`title`,`content`,`regdate`,`modidate`,`passwd`,`hit`)
VALUES ('이진현','안녕하세요.','고코더입니다','2019-07-31 20:50:54','2019-07-31 20:50:54','1234',0);
● 2. board.js 생성 그리고 list 라우터 코딩
● 2-1. 게시판을 실행할 파일을 생성 합니다. 게시판에 관련된 모든 동작인 파일에서 실행 합니다.
● 2-1. list 페이지 내용을 코딩 합니다. board.js를 생성하였으니 맨위에 4줄 참조와 데이터베이스 그리고 마지막줄에 exports는 공통으로 사용합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var express = require('express'); var router = express.Router(); var mysql_odbc = require('../db/db_conn')(); var conn = mysql_odbc.init(); router.get('/list/:page', function(req, res, next) { var page = req.params.page; var sql = "select idx, name, title, date_format(modidate,'%Y-%m-%d %H:%i:%s') modidate, " + "date_format(regdate,'%Y-%m-%d %H:%i:%s') regdate from board"; conn.query(sql, function (err, rows) { if (err) console.error("err : " + err); res.render('list', {title: '게시판 리스트', rows: rows}); }); }); module.exports = router; | cs |
● 2-2. 소스 설명
- 1~4번 라인
- express와 데이터베이스를 연결 하는 부분입니다.
- 6번 라인
- uri를 '/list/:page' 형태로 받습니다. board/list/(페이지 숫자) 형식으로 게시판 리스트를 노출하는 방식입니다.
- 7번 라인
- uri 변수 ':page'로 맵핑된 page 값을 req 객체로 가져옵니다.
- 페이징 개발을 위해 미리 선언해놓습니다.
- 8~9번 라인
- sql문을 수행 합니다.
- 10번 라인
- select된 행을 가져와서 rows변수에 담습니다.. 그리고 오류가 있다면 err에 담습니다.
- 12번 라인
- 수행된 SQL에 데이터를 list 뷰로 랜더링 합니다.
라우터 파일에서 select 된 내용을 프론트에 노출하는 기본적인 예제 입니다.
자바스크립트로 된 코딩으로 인해 코드가 한눈에 들어옵니다.
● 3. list.ejs 생성
● 3-1. board.js에서 list에서 랜더링한 데이터를 ejs에서 받아 처리 해야 합니다.
랜더링 값을 list로 했기 때문에 list.ejs라는 파일을 생성 합니다.
● 3-2. 그리고 ejs안에 코딩을 채워넣어주세요.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css'/> </head> <body> <h1><%= title %></h1> <a href="/board/write">글쓰기</a> <table border="1"> <tr> <td>번호</td> <td>작성자</td> <td>제목</td> <td>조회수</td> <td>수정일</td> <td>등록일</td> </tr> <% for(var i=0; i<rows.length; i++) { var data = rows[i]; %> <tr> <td><%=data.idx%></td> <td><%=data.name%></td> <td><a href="/board/read/<%=data.idx%>"><%=data.title%></a></td> <td><%=data.hit%></td> <td><%=data.modidate%></td> <td><%=data.regdate%></td> </tr> <%}%> </table> </body> </html> | cs |
● 3-3. 소스설명
- 20번 라인
- 랜더링 된 rows에 길이를 가져옵니다. for문으로 데이터에 행만큼 리스트를 출력 합니다.
- 22번 라인
- 데이터를 보기 쉽게 하기 위해 data 변수에 담습니다.
- 25~30번 라인
- data.변수로 해당 SQL문에 컬럼이름으로 가져옵니다.
- 32번 라인
- 반복문을 종료합니다.
mvc 패턴이 그렇지만 뷰 소스가 깔끔하게 나오는걸 확인 가능합니다.
노드 태그(<%%>) 속에 문법도 자바스크립트와 동일하여 퍼블리셔나 디자이너도
간단한 수정을 할 수 있는 구조 입니다.
● 4. /board/list 루트로 들어올때 페이지 이동
404오류가 보여서 난감하셨을거 같습니다. 저희가 코딩한 list 라우터를 보면
/list/1 숫자까지 페이지가 있을때 바인드 됩니다.
그럼 board/list/ 루트로 접속시에 어떻게 코딩을 추가 해야 할까요?
● 4-2.정답은 board.js 코딩을 추가 합니다.
1 2 3 | router.get('/list', function(req, res, next) { res.redirect('/board/list/1'); }); | cs |
● 4-3. /list로 접근시에 res.redirect를 이용해 '/board/list/1' 페이지로 이동시킵니다.
● 5. 결과 화면
● 5-1.결과 화면은 게시판 리스트가 간단하게 생성 되었습니다. 아직은 게시글에 내용만 출력하는 단계이지만
여기까지 따라오신 것 만으로도 노드에 맛을 조금 알았을거라 생각 합니다.
● 5-2.노출 화면은 기본 노드 css를 사용하여 기본 테이블 뼈대 입니다.
부트스트랩으로 멋들어지게 만들고 싶지만 node 강의이기에 기초 HTML로 개발 하였습니다.
마무리
이해가 안되거나 어렵게 느껴진다면
다시 처음으로 돌아가 기초부터 반복으로 연습해보세요.
'IT_Developers > Node.js' 카테고리의 다른 글
| Node.js - express 게시판 만들기 / 글 상세페이지 / select / (0) | 2019.08.01 |
|---|---|
| Node.js - express 게시판 만들기 / 글쓰기 / insert / (3) | 2019.08.01 |
| Node.js - express 라우터 req res, uri 설명 (0) | 2019.07.31 |
| Node.js - require()을 이용한 외부파일 참조 (5) | 2019.07.31 |
| Node.js - Mysql 연결 기본예제 (2) | 2019.07.31 |
댓글