[Node.js] 자바스크립트 데이터베이스 연동 - 웹애플리케이션 1

var express = require('express');
var bodyParser = require('body-parser');
var multer = require('multer');
var _storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname);
    }
})
var upload = multer({storage: _storage});
var fs = require('fs');
var app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.locals.pretty = true;
app.use('/user', express.static('uploads'));
app.set('views', './views');
app.set('view engine', 'pug');
app.get('/upload', function (req, res) {
    res.render('upload');
});
app.post('/upload', upload.single('userfile'), function (req, res) {
    console.log(req.file);
    res.send('Uploaded : ' + req.file.filename);
});
app.get('/topic/new', function (req, res) {
    fs.readdir('data', function (err, files) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.render('new', {topics: files});
    })
});
app.get(['/topic', '/topic/:id'], function (req, res) {
    fs.readdir('data', function (err, files) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        var id = req.params.id;
        if (id) {
            // id값이 있을 때
            fs.readFile('data/' + id, 'utf-8', function (err, data) {
                if (err) {
                    console.log(err);
                    res.status(500).send('Internal Server Error');
                }
                res.render('view', {topics: files, title: id, description: data});
            })
        } else {
            // id값이 없을 때
            res.render('view', {topics: files, title: 'Welcome', description: 'Hello, JavaScript for server.'});
        }
    })
});
app.post('/topic', function (req, res) {
    var title = req.body.title;
    var description = req.body.description;
    fs.writeFile('data/' + title, description, function (err) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.redirect('/topic/' + title);
    });
});
app.listen(7777, function () {
    console.log('Connected, 7777 port!');
});

node.js를 공부했던 코드를 데이터베이스(MySQL)와 연동하기 위해 코드 수정을 할 것이다.



그리고 MySQL을 구현하기 위해 기본적으로 설정했던 코드를 가져와야한다.

var mysql = require('mysql');
var conn = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '1111',
    database: 'o2'
});

위 코드를 그대로 복사 붙여넣기 한다.

 

 

 

다음, 사용자가 topic/으로 접속했을 때와 topic/:id로 접속했을 때를 구현할 것이다.

app.get(['/topic', '/topic/:id'], function (req, res) {
    fs.readdir('data', function (err, files) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        var id = req.params.id;
        if (id) {
            // id값이 있을 때
            fs.readFile('data/' + id, 'utf-8', function (err, data) {
                if (err) {
                    console.log(err);
                    res.status(500).send('Internal Server Error');
                }
                res.render('view', {topics: files, title: id, description: data});
            })
        } else {
            // id값이 없을 때
            res.render('view', {topics: files, title: 'Welcome', description: 'Hello, JavaScript for server.'});
        }
    })
});

그에 해당하는 부분이다.
data 디렉토리 내에 있는 파일을 이용해 글 목록을 만들어주는 코드이다.
하지만 이는 로컬파일을 이용한 것이고, 우리는 데이터베이스를 이용하여 제작할 것이기 때문에 수정이 필요하다.

 

 

 

    var sql = 'SELECT id,title FROM topic';
    conn.query(sql, function (err, rows, fields) {
        
    });

다음과 같이 글에 대한 id, title이 필요하기 때문에 sql을 위와 같이 작성하였고 conn이 갖고 있는 callback 함수를 이용해 큰 프레임을 만들었다.

 

 

 

    conn.query(sql, function (err, rows, fields) {
        res.send(rows);
    });

send를 이용해 정상적으로 작동하는지 확인해자.
localhost:7777/topic/에 접속해보면 데이터베이스에 저장되어있는 데이터들의 출력이 잘 되는 것을 확인할 수 있을 것이다.

 

 

 

확인되었으니 다시 계속 코드를 수정해보자.

conn.query(sql, function (err, rows, fields) {
        res.render('view', {topics: files, title: id, description: data});
    });

render를 사용했다.

 

 

 

하지만 우리는 pug를 사용할 것이기 때문에 view_mysql이라는 디렉토리 안에 view.pug 파일을 다음과 같이 생성해준다.

doctype html
html
    head
        meta(charset='utf-8')
    body
        h1
            a(href='/topic') Server Title
        ul
            each topic in topics
                li
                    a(href='/topic/'+topic)= topic
        article
            h2= title
            = description
        div
            a(href='/topic/new') new

 

 

 

 

그리고 우리는 views라는 디렉토리를 사용하지 않고 views_mysql이라는 디렉토리를 사용하기 때문에 이를 Express에게 알려주는 작업을 해야한다.

app.set('views', './views');

해당 부분을

app.set('views', './views_mysql');

다음과 같이 수정한다.
사용자가 어떤 템플릿 파일을 요청할 때 views_mysql 밑에 있는 템플릿 파일을 찾게 된다.

 

 

 

conn.query(sql, function (err, topics, fields) {
        res.render('view', {topics: topics});
    });

추가적으로 수정했다.
rows를 topics로 바꾸고 topics외의 다른 것들은 일단 지웠다.



여기까지 하고 웹페이지를 실행시켜보면 글 목록이 object Object라고 뜰 것이다.
이를 고치기 위해 view.pug 파일을 봐야한다.

 

a(href='/topic/'+topic)= topic

단순히 topic이라고 되어있기 때문에 위와 같은 현상이 발생한 것이다.

 

a(href='/topic/'+topic.id)= topic.title

다음과 같이 수정한다. 더 자세한 정보를 줌으로써 출력에 영향이 가게 된다.

 

 

 

위 코드로 인해 웹페이지에서 글의 title이 정상적으로 출력이 될텐데, 각 title을 클릭하면 url이 각각의 글에 해당하는 id값으로 변경되는 것을 확인할 수 있다.



하지만 Server Title를 클릭했을 때 환영문구가 출력되도록 하고 싶고, 본문을 클릭하면 그에 해당하는 상세정보가 출력되었으면 한다.
그래서 view.pug 파일을 추가로 수정해야한다.

 

doctype html
html
    head
        meta(charset='utf-8')
    body
        h1
            a(href='/topic') Server Title
        ul
            each topic in topics
                li
                    a(href='/topic/'+topic.id)= topic.title
        article
            if topic
                h2= title
                = description
            else
                h2 Welcome
                | This is Web.
        div
            a(href='/topic/new') new

다음과 같이 수정했다.



다음 포스팅에서는 특정 글을 선택했을 때 url에 전달되는 id값을 이용해 id값에 해당되는 topic을 읽고, 해당 topic을 view.pug 파일로 전달한다.
결과적으로 해당하는 id의 글에 대한 상세보기를 출력되게 할 것이다.