[MYSQL] 웹 앱 제작하기 - 글 목록

지금까지 기본적인 MYSQL을 사용하는 방법과 어떻게 DB와 서버를 연동시키는지 등에 대해서 학습했다. 그렇다면 이제 이를 통해 간단한 웹 어플리케이션을 만들어보자.

간단한 웹 어플리케이션 만들기

생활코딩 egoing 님의 [nodejs 강좌] Node.js 를 이용해 웹애플리케이션 만들기 시리즈 강의를 통해 웹 앱 애플리케이션을 직접 제작할 수 있다. (인프런 혹은 생활코딩을 참조) 우리는 이를 기반으로 웹 앱을 만들 것이다.

강좌를 통해 제작한 웹 어플리케이션의 소스코드는 다음과 같다.

app_file.js

var express = require('express');
var app = express();
var fs = require('fs');
app.locals.pretty = true;

app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.set('views', './views_file');
app.set('view engine', 'pug');
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, 'utf8', 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(3000, function() {
  console.log('Connected, 3000 port!');
})

express에서 제공하는 json, get과 post와 같은 통신 방식 등으로 데이터를 서버에 요청하고 받는 방식으로 작동했다. 실제로 앱을 실행시켜보면..

위와 같이 각 항목을 클릭하면 클릭한 항목에 대한 설명이 뜨고, new를 누르게 되면 리스트에 새로운 title과 description을 입력할 수 있도록 잘 구현한 것을 볼 수 있다.

이 어플리케이션은 fs.readdir, fs.writeFile 등의 함수를 통해 파일로 읽고 저장하기 때문에 DB라는 측면에서는 아쉬운 부분이 존재했다. 그러나, 이제 우리는 MySql을 nodejs와 결합하여 사용하는 방법을 알고 있다. 따라서 app_file.js 에서 파일에 관한 부분을 모두 MySql에서의 DB로 바꾸는 작업을 진행할 것이다.

우선, app_file.js 을 복사하여 파일 이름은 app_mysql.js 로 바꾼다.

그리고 database_mysql.js 에서 mysql과 연결하기 위해 사용했던 설정을 다음과 같이 추가해준다.

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

conn.connect();

이를 통해, 우리가 생성한 Mysql DB 'o2' 와 연결이 완료되었다. 이제 실제 DB의 내용을 웹페이지에서 출력해보자.

app.get(['/topic', '/topic/:id'], function(req, res){
  var sql = 'SELECT id, title FROM topic';
  conn.query(sql, function(err, rows, fields) {
      res.send(rows);
  });

데이터가 잘 전달되었는지 res객체의 send 함수를 통해 rows의 내용을 웹 페이지에서 출력하도록 하면 다음과 같이 배열안에 객체들이 생성되는 것을 볼 수 있다.

이제 위의 내용을 글목록(리스트)으로 출력해보자.

우리가 app_file.js 에서 res객체를 통해 view_file 디렉토리의 views 파일을 렌더링해온 것을 참고해서 다음과 같이 코드를 작성한다.

app.get(['/topic', '/topic/:id'], function(req, res){
  var sql = 'SELECT id, title FROM topic';
  conn.query(sql, function(err, topics, fields) {
      res.render('view', {topics:topics});
  });

우리는 글 목록에 제목(title) 만을 나타내주어야 한다. 또한 제목은 topic의 id값을 통해 식별하게끔 한다. 이를 위해 view.pug 파일의 li 부분을 다음과 같이 바꿔 준다.

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

내용을 수정하고 앱을 실행시키면...

메인 타이틀의 내용과 id에 해당하는 값들이 각각 차례대로 리스트로 생성되어있는 것을 볼 수 있다. 이제 메인화면 즉, localhost:3000/topic 일 때는 하단에 환영 문구를 삽입하고 싶다면 어떻게 해야할까?

보여지는 것에 관한 것은 모두 view 를 들여다봐야한다.

view.pug

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

article 부분을 다음과 같이 수정하면 우리가 원하는 환영 문구를 삽입할 수 있다.

    article
      if topic
        h2= title
        = description
      else
        h2 Welcome
        | This is server side javascript tutorials.

이는 if-else 문으로 다음 두 가지의 경우를 나타낸 것이다.

1. topic 값이 있음

• 글 목록의 title을 누른 경우 (ex. JavaScript 를 누르면 http://localhost:3000/topic/1)
  : 각 topic id에 해당하는 description 이 출력.

2. topic 값이 없음

• 메인화면의 경우 (http://localhost:3000/topic)
  : else의 환영문구가 출력.

메인화면일 때는 환영 문구가 출력 되는 것을 볼 수 있다.