[생활코딩 Node.js+MySQL] 2. DB를 이용한 홈페이지 글목록 출력

MySQL을 이용한 웹페이지 만들기

main.js 에서 mysql을 사용하여 웹페이지를 db에 연동시켜 준다.

우선 db 커넥션 부분을 세팅한다. 소스 위쪽의 변수 정의 부분에 아래와 같은 커넥션 정보를 추가.

(보안을 생각하면 나중에 다른 파일로 빼야 할 것이다... 수업 뒤쪽에 아마 나오지 않을까)

var mysql = require('mysql');
var db = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : 'pass12',
  database : 'opentutorials'
});
db.connect();

 

그리고 홈 화면 부분 코드를 아래와 같이 바꿔 준다(주석처리된 부분이 원래 코드)

if(queryData.id === undefined){
      //   fs.readdir('./data', function(error, filelist){
      //     var title = 'Welcome';
      //     var description = 'Hello, Node.js';
      //     var list = template.list(filelist);
      //     var html = template.HTML(title, list,
      //       `<h2>${title}</h2>${description}`,
      //       `<a href="/create">create</a>`
      //     );
      //     response.writeHead(200);
      //     response.end(html);
      //   });
      db.query(`SELECT * FROM TOPIC`, function(err, topics){
        console.log(topics);
            response.writeHead(200);
            response.end('success');
      });
      }

실행하면 웹 화면에 success라고 뜨고, 터미널 화면에는 쿼리의 결과값이 뜨는 것을 확인할 수 있다.

 

그러면 이제 본격적으로 db값을 사용해 홈 화면의 글목록을 가져오는 부분을 코딩해 보자.

이전의 글목록은 파일을 읽어들여 파일명의 이름을 사용해 만들었지만, 이제는 파일을 읽는 대신 db의 데이터를 이용해 목록을 만들게 된다. 우리가 사용할 TOPIC 테이블의 컬럼과 데이터 정보를 다시 확인해 보면 아래와 같다

MariaDB [opentutorials]> select * from topic;
+----+------------+-------------------+---------------------+-----------+
| id | title      | description       | created             | author_id |
+----+------------+-------------------+---------------------+-----------+
|  1 | MySQL      | MySQL is...       | 2018-01-01 12:10:11 |         1 |
|  2 | Oracle     | Oracle is ...     | 2018-01-03 13:01:10 |         1 |
|  3 | SQL Server | SQL Server is ... | 2018-01-20 11:01:10 |         2 |
|  4 | PostgreSQL | PostgreSQL is ... | 2018-01-23 01:03:03 |         3 |
|  5 | MongoDB    | MongoDB is ...    | 2018-01-30 12:31:03 |         1 |
+----+------------+-------------------+---------------------+-----------+

이 중 title 컬럼값이 화면에 나갈 글 제목 값이고, id를 쿼리스트링에 적용해 페이지 url을 생성해 준다.

쿼리는 이미 사용하도록 세팅해 놓았으니, 이전 소스에서 list값으로 사용했던 filelist 변수를 topics라는 이름으로 바꿔 주면 아래와 같은 코드가 된다.

if(queryData.id === undefined){
      db.query(`SELECT * FROM TOPIC`, function(err, topics){
        var title = 'Welcome';
        var description = 'Hello, Node.js';
        var list = template.list(topics);
        var html = template.HTML(title, list,
          `<h2>${title}</h2>${description}`,
          `<a href="/create">create</a>`
        );
        response.writeHead(200);
        response.end(html);
      });
    }

list:function(topics){
    var list = '<ul>';
    var i = 0;
    while(i < topics.length){
      list = list + `<li><a href="/?id=${topics[i].id}">${topics[i].title}</a></li>`;
      i = i + 1;
    }
    list = list+'</ul>';
    return list;
  }

이 때 template 파일을 수정하면서 단순히 filelist 라는 이름만 topics로 변경하면 에러가 나는데, topics에 담겨 오는 여러 가지 결과값(SELECT * 쿼리를 사용했으므로 ID, TITLE, DESCRIPTION 등 모든 컬럼값이 다 넘어온다) 중 어떤 것을 사용할 것인지 선택해 주지 않았기 때문이다. 따라서 주소를 생성하는 부분에는 id, 목록을 생성하는 부분에는 title이라고 컬럼명을 명시해 준다. 이렇게 변경한 후 페이지를 띄워 보면 테이블에 있는 title값들로 글목록이 잘 올라오는 것을 확인할 수 있다.