Next.js와 HeidiSQL을 사용한 파일첨부 방법

Next.js와 HeidiSQL을 사용하여 파일 첨부 및 데이터베이스 저장하는 방법

파일 저장 접근 방법

파일을 데이터베이스에 저장하는 방법은 주로 두 가지가 있습니다

1. BLOB 데이터 타입 사용
2. 파일 경로 저장 및 실제 파일은 서버에 저장

BLOB 데이터 타입을 사용한 직접 저장 방법
1. 데이터베이스 테이블 구조 설정

CREATE TABLE uploaded_files (
    id INT AUTO_INCREMENT PRIMARY KEY,
    filename VARCHAR(255),
    file_data LONGBLOB,
    file_type VARCHAR(100),
    uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. Next.js API 라우트 구현

import { NextApiRequest, NextApiResponse } from 'next';
import mysql from 'mysql2/promise';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method === 'POST') {
        try {
            // 데이터베이스 연결 설정
            const connection = await mysql.createConnection({
                host: 'localhost',
                user: 'your_username',
                password: 'your_password',
                database: 'your_database'
            });

            // 파일 데이터 추출 (multipart/form-data 사용 가정)
            const { originalFilename, mimetype, buffer } = req.body;

            // 파일을 데이터베이스에 저장하는 쿼리
            const [result] = await connection.execute(
                'INSERT INTO uploaded_files (filename, file_data, file_type) VALUES (?, ?, ?)',
                [originalFilename, buffer, mimetype]
            );

            await connection.end();

            res.status(200).json({ message: '파일 업로드 성공', fileId: result.insertId });
        } catch (error) {
            res.status(500).json({ message: '파일 업로드 실패', error: error.message });
        }
    } else {
        res.status(405).json({ message: '허용되지 않은 메서드' });
    }
}

주의사항

1. 파일 크기 제한: BLOB 타입은 큰 파일을 저장할 수 있지만, 성능과 데이터베이스 용량에 영향을 줄 수 있습니다.

2.보안  
   - 파일 업로드 시 파일 유형, 크기 제한
   - 악성 파일 검사
   - 인증/권한 확인

3. 대안적 접근
   - 파일은 서버나 클라우드 스토리지에 저장
   - 데이터베이스에는 파일 경로만 저장

파일 업로드 프론트엔드 예시

import { useState } from 'react';
import axios from 'axios';

export default function FileUpload() {
    const [selectedFile, setSelectedFile] = useState<File | null>(null);

    const handleFileUpload = async () => {
        if (!selectedFile) return;

        const formData = new FormData();
        formData.append('file', selectedFile);

        try {
            const response = await axios.post('/api/upload', formData, {
                headers: { 'Content-Type': 'multipart/form-data' }
            });
            console.log('파일 업로드 성공:', response.data);
        } catch (error) {
            console.error('파일 업로드 실패:', error);
        }
    };

    return (
        <div>
            <input 
                type="file" 
                onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
            />
            <button onClick={handleFileUpload}>업로드</button>
        </div>
    );
}

추천 패키지
- 파일 업로드: `multer`, `formidable`
- 데이터베이스 연결: `mysql2`

이 방법은 파일을 직접 MySQL 데이터베이스에 BLOB 형태로 저장하는 방법입니다. 대용량 파일이나 많은 파일을 다룰 경우 파일 시스템이나 클라우드 스토리지를 고려하는 것이 좋습니다.