[Express] 3. Template과 DB연결

dotenv

• Node.js 프로젝트에서 환경 변수를 좀 더 효과적으로 관리하기 위해 사용하는 라이브러리
• 환경 변수를 파일에 저장해놓고 접근할 수 있게 도와줌

//설치 코드
npm i dotenv

 

main.js와 같은 디렉토리에 다음과 같은 .env 파일을 생성

DB_HOST='localhost'
DB_USER='root'
DB_PASSWORD='mymysql'
DB_NAME='egoing'

 

process.env.DB_~~

• 위와 같은 형태로 접근 가능
• process 객체는 Node.js에 기본적으로 내장된 전역 객체로 별도로 import할 필요 없이 프로그램의 어디서든 사용 가능
• 다만, 브라우저와 같은 다른 자바스크립트 실행 환경에서는 존재하지 않는 전역 객체

 

MySQL

• 전 세계에서 가장 인기 있는 오픈소스 관계형 데이터베이스 중 하나
• mysql2/promise 모듈을 사용하면 콜백 방식 대신, async/await 방식을 사용할 수 있음
• https://dev.mysql.com/downloads/installer/ <- mysql 웹사이트에서 다운받아야 DB 생성 가능
• mysql2/promise 모듈 이용을 위해서 터미널에서 mysql2 install

//설치 코드
npm install --save mysql2

 

//mysql 접속
mysql -h localhost -u root -p

>> mysql 설치할 때 생성한 계정으로 접속 (password 입력)

 

CREATE DATABASE egoing;	//데이터베이스명: egoing
use egoing;	//데이터베이스를 사용

CREATE TABLE Topics(
topic_id INT auto_increment,	//topic_id 값이 자동으로 증가됨
title VARCHAR(255),	//영문자 기준 255자까지 넣을 수 있는 문자열 자료형 
content VARCHAR(1024),	//영문자 기준 1024자까지 넣을 수 있는 문자열 자료형 
created_at DATETIME default CURRENT_TIMESTAMP,	//테이블에 행을 insert한 시각을 자동으로 기록, defalut값 현재 시각
updated_at DATETIME default CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,	//update 시에 자동으로 현재 시각으로 갱신됨
PRIMARY KEY(topic_id)	//PRIMARY KEY가 설정된 필드는 NULL 값을 가질 수 없으며, 중복된 값을 가질 수도 없다.
);

CREATE TABLE Comments (
comment_id INT auto_increment,
topic_id INT,
username VARCHAR(24),
content VARCHAR(1024),
created_at DATETIME default CURRENT_TIMESTAMP,
updated_at DATETIME default CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY(comment_id),
FOREIGN KEY (topic_id) REFERENCES Topics(topic_id)	//하나의 테이블을 다른 테이블에 의존하게 만듦
);

 

유저가 가진 DB 리스트 확인

mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| egoing             |
| information_schema |
| mysql              |
| performance_schema |
| sakila             |
| sys                |
| world              |
+--------------------+
7 rows in set (0.01 sec)

 

현재 데이터베이스의 테이블 리스트 확인

mysql> SHOW TABLES
    -> ;
+------------------+
| Tables_in_egoing |
+------------------+
| comments         |
| topics           |
+------------------+
2 rows in set (0.02 sec)

 

테이블의 구성요소 확인

mysql> DESC Topics;
+------------+---------------+------+-----+-------------------+-----------------------------------------------+
| Field      | Type          | Null | Key | Default           | Extra                                         |
+------------+---------------+------+-----+-------------------+-----------------------------------------------+
| topic_id   | int           | NO   | PRI | NULL              | auto_increment                                |
| title      | varchar(255)  | YES  |     | NULL              |           
                                    |
| content    | varchar(1024) | YES  |     | NULL              |           
                                    |
| created_at | datetime      | YES  |     | CURRENT_TIMESTAMP | DEFAULT_GENERATED                             |
| updated_at | datetime      | YES  |     | CURRENT_TIMESTAMP | DEFAULT_GENERATED on update CURRENT_TIMESTAMP |
+------------+---------------+------+-----+-------------------+-----------------------------------------------+
5 rows in set (0.02 sec)

 

테이블에 요소 추가하는 SQL 코드

mysql> INSERT INTO Topics VALUES ('1', 'Node.js', 'Nodejs is ...', default, default); 
Query OK, 1 row affected (0.01 sec)

mysql> INSERT INTO Topics VALUES (2, 'CSS', 'CSS is ...', default, default), (3, 'HTML', 'HTML is ...', default, default), (4, 'JavaScript', 'JavaScript is ...', default, default); 
Query OK, 3 rows affected (0.01 sec)
Records: 3  Duplicates: 0  Warnings: 0

 

요소가 추가된 테이블 내용 확인 

mysql> SELECT * FROM Topics;                                              
+----------+------------+-------------------+---------------------+---------------------+
| topic_id | title      | content           | created_at          | updated_at          |
+----------+------------+-------------------+---------------------+---------------------+
|        1 | Node.js    | Nodejs is ...     | 2023-12-01 01:19:08 | 2023-12-01 01:19:08 |
|        2 | CSS        | CSS is ...        | 2023-12-01 01:21:49 | 2023-12-01 01:21:49 |
|        3 | HTML       | HTML is ...       | 2023-12-01 01:21:49 | 2023-12-01 01:21:49 |
|        4 | JavaScript | JavaScript is ... | 2023-12-01 01:21:49 | 2023-12-01 01:21:49 |
+----------+------------+-------------------+---------------------+---------------------+
4 rows in set (0.00 sec)

 

 

Template과 DB연결

const express = require('express');
require('dotenv').config();
const mysql = require('mysql2/promise');

const db = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME
});

const app = express();
const port = 3000;

app.get('/', async (req, res) => {
    const query = 'SELECT * FROM Topics;';  //테이블에 추가한 요소들 읽기(*는 전체 출력을 의미)
    const topics = await db.query(query);
    console.log(topics[0]); //실질적인 데이터는 0번 인덱스에(1번 인덱스에는 데이터베이스 테이블에 대한 정보)

    let list = '';  //let 변수는 정의된 블록 내부에서만 사용 가능
    for(let topic of topics[0]) {
        list += `<li>${topic.title}</li>`;  //동적으로 소제목 설정
    }

    const template = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>WEB</h1>
        <ol>
            ${list}
        </ol>
        <a href="/post/create">create</a>
    </body>
    </html>
    `
    res.send(template);
});

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`);
});

[
  {
    topic_id: 1,
    title: 'Node.js',
    content: 'Nodejs is ...',
    created_at: 2023-11-30T16:19:08.000Z,
    updated_at: 2023-11-30T16:19:08.000Z
  },
  {
    topic_id: 2,
    title: 'CSS',
    content: 'CSS is ...',
    created_at: 2023-11-30T16:21:49.000Z,
    updated_at: 2023-11-30T16:21:49.000Z
  },
  {
    topic_id: 3,
    title: 'HTML',
    content: 'HTML is ...',
    created_at: 2023-11-30T16:21:49.000Z,
    updated_at: 2023-11-30T16:21:49.000Z
  },
  {
    topic_id: 4,
    title: 'JavaScript',
    content: 'JavaScript is ...',
    created_at: 2023-11-30T16:21:49.000Z,
    updated_at: 2023-11-30T16:21:49.000Z
  }
]

 

>>DB와 연결하여 동적으로 소제목을 설정 가능