MySQL과 데이터베이스 연동

1. MySQL 설치 및 설정

1. MySQL 설치

• 모두 설치가 되어있는 관계로 건너뜀

2. 간단한 데이터베이스 생성

CREATE DATABASE company_website;

USE company_website;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL
);

2. MySQL 연동

1. MySQL 패키지 설치 MySQL과 Node.js를 연동하기 위해 mysql2 설치

npm install mysql2

2. 데이터베이스 연결 설정 src/config/db.ts 파일을 생성하고 MySQL 연결 설정

import mysql from 'mysql2/promise';

const pool = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: 'your_password',
    database: 'company_website',
});

export default pool;

3. 데이터베이스와 CRUD 연동

1. 데이터베이스 작업 함수 작성 src/models/userModel.ts 파일 생성 후 데이터베이스 작업 함수 작성

import pool from '../config/db';

// 모든 사용자 가져오기
export const getAllUsers = async () => {
    const [rows] = await pool.query('SELECT * FROM users');
    return rows;
};

// 새 사용자 추가
export const addUser = async (name: string, email: string) => {
    const [result] = await pool.query(
        'INSERT INTO users (name, email) VALUES (?, ?)',
        [name, email]
    );
    return result;
};

2. API 라우트 수정 src/routes/api.ts 파일 수정 후 데이터베이스와 연동

import { Router, Request, Response } from 'express';
import { getAllUsers, addUser } from '../models/userModel';

const router = Router();

// GET: 모든 사용자 가져오기
router.get('/users', async (req: Request, res: Response) => {
    const users = await getAllUsers();
    res.json(users);
});

// POST: 새 사용자 추가
router.post('/users', async (req: Request, res: Response) => {
    const { name, email } = req.body;
    const result = await addUser(name, email);
    res.status(201).json({ id: result.insertId, name, email });
});

export default router;

4. JSON 데이터를 데이터베이스로 옮기기

1. 기존 데이터를 데이터베이스로 삽입 src/scripts/migrateData.ts 파일 생성 후 JSON 데이터를 데이터베이스로 옮김

import { readData } from '../utils/fileHandler';
import { addUser } from '../models/userModel';

const migrateData = async () => {
    const data = await readData();
    for (const user of data) {
        await addUser(user.name, user.email);
    }
    console.log('Data migration completed!');
};

migrateData().catch((err) => console.error(err));

2. 마이그레이션 실행 아래 명령어로 마이그레이션 스크립트 실행

npx ts-node src/scripts/migrateData.ts

5. 동적 페이지 수정

1. 템플릿에서 데이터베이스와 연동 src/routes/pages.ts 파일에서 데이터를 데이터베이스에서 가져오도록 수정

import { Router, Request, Response } from 'express';
import { getAllUsers } from '../models/userModel';

const router = Router();

// 홈 페이지
router.get('/', async (req: Request, res: Response) => {
    const users = await getAllUsers();
    res.render('index', { users });
});

export default router;

2. http://localhost:3000/로 사용자 목록이 렌더링 되는지 확인