Nodejs와 MySql을 통해 간단한 웹 앱을 제작하는 과정 중에 있다. 지난 포스팅에서 DB에 담긴 id값에 해당하는 글 목록을 띄워보았고, id값이 없을 때 즉, 메인 화면에서 환영 문구도 삽입해보았다. 그러나 아직 동적으로 리스트 아이템을 클릭했을 때, 그에 따른 상세 내용이 출력되는 기능은 구현하지 않았다. 따라서 오늘은 이에 대한 것을 구현할 예정이다.
app_mysql.js 에서 topic의 id값에 따라 상세 내용을 출력하기 위해
작성했던, app.get(['/topic', '/topic/:id'], function(req, res) { ... }
이 부분을 다시 살펴보자.
app_mysql.js
app.get(['/topic', '/topic/:id'], function(req, res){
var sql = 'SELECT id, title FROM topic';
conn.query(sql, function(err, topics, fields) {
var id = req.params.id;
res.render('view', {topics:topics});
});리스트의 아이템을 클릭하면 topic 뒤에 id값이 딸려온다. 
(Javascript를 눌렀을 때, 주소 값이 topic/1이 된다.)
따라서 id값을 parameter로 받아오는 것이 중요하다. var id = req.params.id; 를 추가하자.
다음으로 만약 id값이 있다면 상세보기를 출력, 없다면 그냥 view를 화면에 표시할 것이다. 또한 상세보기는 SQL 쿼리문을 통해 나타낼 것이다. 여기까지의 내용을 구현한 코드는 다음과 같다.
app_mysql.js
app.get(['/topic', '/topic/:id'], function(req, res){
var sql = 'SELECT id, title FROM topic';
conn.query(sql, function(err, topics, fields) {
var id = req.params.id;
if(id){
var sql = 'SELECT * FROM topic WHERE id=?';
conn.query(sql, [id], function(err, topic, fields){
});
} else {
res.render('view', {topics:topics});
}
});conn.query 를 통해 sql과 연결시켰고, if-else 문을 통해 상세보기를 출력할 것인지 아닌지를 구분했다.
또한 조회 쿼리인 'SELECT * FROM topic WHERE id=?'; 를 통해 치환자 id=? 값에 따라 conn.query(sql, [id], function(err, topic, fields) 문에 의해 DB에 쿼리를 날려주는 방식으로 진행했다.
콜백 함수의 인자로 err 가 있으므로 통신 에러가 발생했을 때의 예외 처리를 console로 출력해주고, 사용자에게는 'Internal Server Error' 라는 문구를 띄워주기 위해 다음과 같이 코딩하자.
if(err) {
console.log(err);
res.status(500).send('Internal Server Error');
} else {
res.render('view', {topics:topics, topic:topic[0]});
}
지금까지의 모든 내용을 코드로 구현하면 다음과 같다.
app_mysql.js
app.get(['/topic', '/topic/:id'], function(req, res){
var sql = 'SELECT id, title FROM topic';
conn.query(sql, function(err, topics, fields) {
var id = req.params.id;
if(id){
var sql = 'SELECT * FROM topic WHERE id=?';
conn.query(sql, [id], function(err, topic, fields){
if(err) {
console.log(err);
res.status(500).send('Internal Server Error');
} else {
res.render('view', {topics:topics, topic:topic[0]});
}
});
} else {
res.render('view', {topics:topics});
}
}); 이제, view 를 만져야 할 타이밍이다.
view.pug
article
if topic
h2= topic.title
= topic.description
div= 'by '+topic.author
else
h2 Welcome
| This is server side javascript tutorials.위와 같이 topic의 속성 값 (title과 description) 을 추가함으로써 제목과 그에 따른 설명이 출력되도록 한다. 또한 우리는 저자 정보도 DB에 입력했었다. div 태그 밑에 이러한 정보를 출력하게끔 하자.
이제 앱을 실행해보면....
글 목록을 누를 때마다 그에 따른 상세 설명이 잘 출력된다.
