🔹 1단계: 프론트엔드 파일 선택 인터페이스

사용자가 파일을 선택하는 UI부터 시작해보자. 가장 기본적인 HTML5 파일 입력부터 드래그 앤 드롭까지 다양한 방법이 있어.

기본 HTML 파일 입력:

<input type="file" id="fileInput" accept=".pdf,.docx,.txt,.jpg,.png">
<button onclick="uploadFile()">업로드</button>

<script>
async function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    
    if (!file) {
        alert('파일을 선택해주세요!');
        return;
    }
    
    // 파일 크기 체크 (예: 10MB 제한)
    if (file.size > 10 * 1024 * 1024) {
        alert('파일 크기는 10MB를 초과할 수 없습니다.');
        return;
    }
    
    const formData = new FormData();
    formData.append('file', file);
    
    try {
        const response = await fetch('/api/upload', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        console.log('업로드 성공:', result);
    } catch (error) {
        console.error('업로드 실패:', error);
    }
}
</script>

이 코드는 정말 기본적인 형태야. 실제 프로덕션 환경에서는 더 많은 검증과 에러 처리가 필요하지! 😊

🔹 2단계: 드래그 앤 드롭 기능 추가

사용자 경험을 한층 업그레이드하려면 드래그 앤 드롭 기능을 추가하는 게 좋아. 요즘 사용자들은 이런 직관적인 인터페이스를 기대하거든!

<div id="dropZone" style="border: 2px dashed #ccc; padding: 50px; text-align: center;">
    파일을 여기에 드래그하거나 클릭하세요
</div>

<script>
const dropZone = document.getElementById('dropZone');

// 드래그 오버 이벤트
dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropZone.style.borderColor = '#4CAF50';
    dropZone.style.backgroundColor = '#f0f8ff';
});

// 드래그 떠남 이벤트
dropZone.addEventListener('dragleave', (e) => {
    e.preventDefault();
    dropZone.style.borderColor = '#ccc';
    dropZone.style.backgroundColor = 'transparent';
});

// 드롭 이벤트
dropZone.addEventListener('drop', async (e) => {
    e.preventDefault();
    dropZone.style.borderColor = '#ccc';
    dropZone.style.backgroundColor = 'transparent';
    
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        await handleFileUpload(files[0]);
    }
});

// 클릭 이벤트
dropZone.addEventListener('click', () => {
    const input = document.createElement('input');
    input.type = 'file';
    input.onchange = (e) => {
        if (e.target.files.length > 0) {
            handleFileUpload(e.target.files[0]);
        }
    };
    input.click();
});

async function handleFileUpload(file) {
    console.log('업로드할 파일:', file.name);
    // 여기에 실제 업로드 로직 구현
}
</script>

🔹 Node.js + Express 구현

Node.js는 AI 에이전트 백엔드로 정말 인기가 많아. 비동기 처리가 강력하고, JavaScript 생태계의 풍부한 라이브러리를 활용할 수 있거든!

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs').promises;

const app = express();

// 파일 저장 설정
const storage = multer.diskStorage({
    destination: async (req, file, cb) => {
        const uploadDir = './uploads';
        try {
            await fs.mkdir(uploadDir, { recursive: true });
            cb(null, uploadDir);
        } catch (error) {
            cb(error, null);
        }
    },
    filename: (req, file, cb) => {
        // 파일명 중복 방지를 위해 타임스탬프 추가
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
    }
});

// 파일 필터링 (허용할 파일 타입 지정)
const fileFilter = (req, file, cb) => {
    const allowedTypes = /jpeg|jpg|png|gif|pdf|doc|docx|txt|csv/;
    const extname = allowedTypes.test(path.extname(file.originalname).toLowerCase());
    const mimetype = allowedTypes.test(file.mimetype);
    
    if (extname && mimetype) {
        cb(null, true);
    } else {
        cb(new Error('지원하지 않는 파일 형식입니다!'), false);
    }
};

const upload = multer({
    storage: storage,
    limits: { fileSize: 10 * 1024 * 1024 }, // 10MB 제한
    fileFilter: fileFilter
});

// 파일 업로드 엔드포인트
app.post('/api/upload', upload.single('file'), async (req, res) => {
    try {
        if (!req.file) {
            return res.status(400).json({ error: '파일이 없습니다.' });
        }
        
        const fileInfo = {
            originalName: req.file.originalname,
            filename: req.file.filename,
            path: req.file.path,
            size: req.file.size,
            mimetype: req.file.mimetype,
            uploadedAt: new Date().toISOString()
        };
        
        // 여기서 AI 에이전트에게 파일 정보 전달
        const aiResult = await processWithAI(fileInfo);
        
        res.json({
            success: true,
            file: fileInfo,
            aiResult: aiResult
        });
        
    } catch (error) {
        console.error('업로드 에러:', error);
        res.status(500).json({ error: '파일 업로드 중 오류가 발생했습니다.' });
    }
});

// AI 처리 함수 (예시)
async function processWithAI(fileInfo) {
    // 실제로는 여기서 OpenAI API, Claude API 등을 호출
    console.log('AI 처리 시작:', fileInfo.originalName);
    
    // 파일 타입에 따른 처리
    if (fileInfo.mimetype.startsWith('image/')) {
        return { type: 'image', message: '이미지 분석 완료' };
    } else if (fileInfo.mimetype === 'application/pdf') {
        return { type: 'document', message: 'PDF 문서 분석 완료' };
    }
    
    return { type: 'unknown', message: '파일 처리 완료' };
}

app.listen(3000, () => {
    console.log('서버가 3000번 포트에서 실행 중입니다!');
});

이 코드는 Multer 라이브러리를 사용해서 파일 업로드를 처리해. Multer는 Express에서 파일 업로드를 다룰 때 사실상 표준이야! 📦

🔹 Python + FastAPI 구현

Python은 AI/ML 작업에 최적화되어 있어서 AI 에이전트 백엔드로 많이 사용돼. FastAPI는 빠르고 현대적인 프레임워크야!

from fastapi import FastAPI, File, UploadFile, HTTPException
from fastapi.responses import JSONResponse
import shutil
import os
from pathlib import Path
from datetime import datetime
import aiofiles

app = FastAPI()

# 업로드 디렉토리 설정
UPLOAD_DIR = Path("./uploads")
UPLOAD_DIR.mkdir(exist_ok=True)

# 허용할 파일 확장자
ALLOWED_EXTENSIONS = {'.pdf', '.docx', '.txt', '.jpg', '.jpeg', '.png', '.csv'}
MAX_FILE_SIZE = 10 * 1024 * 1024  # 10MB

def validate_file(filename: str, file_size: int) -> bool:
    """파일 유효성 검사"""
    ext = Path(filename).suffix.lower()
    
    if ext not in ALLOWED_EXTENSIONS:
        raise HTTPException(
            status_code=400,
            detail=f"지원하지 않는 파일 형식입니다. 허용: {ALLOWED_EXTENSIONS}"
        )
    
    if file_size > MAX_FILE_SIZE:
        raise HTTPException(
            status_code=400,
            detail=f"파일 크기가 너무 큽니다. 최대: {MAX_FILE_SIZE / 1024 / 1024}MB"
        )
    
    return True

@app.post("/api/upload")
async def upload_file(file: UploadFile = File(...)):
    """파일 업로드 엔드포인트"""
    try:
        # 파일 내용을 메모리에 읽어서 크기 확인
        contents = await file.read()
        file_size = len(contents)
        
        # 유효성 검사
        validate_file(file.filename, file_size)
        
        # 고유한 파일명 생성
        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
        unique_filename = f"{timestamp}_{file.filename}"
        file_path = UPLOAD_DIR / unique_filename
        
        # 파일 저장 (비동기)
        async with aiofiles.open(file_path, 'wb') as f:
            await f.write(contents)
        
        # 파일 정보 구성
        file_info = {
            "original_name": file.filename,
            "saved_name": unique_filename,
            "path": str(file_path),
            "size": file_size,
            "content_type": file.content_type,
            "uploaded_at": datetime.now().isoformat()
        }
        
        # AI 처리 (예시)
        ai_result = await process_with_ai(file_path, file.content_type)
        
        return JSONResponse(content={
            "success": True,
            "file": file_info,
            "ai_result": ai_result
        })
        
    except HTTPException as he:
        raise he
    except Exception as e:
        raise HTTPException(status_code=500, detail=f"업로드 중 오류 발생: {str(e)}")

async def process_with_ai(file_path: Path, content_type: str):
    """AI 처리 함수"""
    # 실제로는 여기서 OpenAI, Anthropic 등의 API 호출
    
    if content_type.startswith('image/'):
        # 이미지 처리 로직
        return {
            "type": "image",
            "message": "이미지 분석이 완료되었습니다.",
            "analysis": "객체 인식 결과..."
        }
    elif content_type == 'application/pdf':
        # PDF 처리 로직
        return {
            "type": "document",
            "message": "문서 분석이 완료되었습니다.",
            "summary": "문서 요약..."
        }
    
    return {
        "type": "general",
        "message": "파일 처리가 완료되었습니다."
    }

@app.get("/api/files")
async def list_files():
    """업로드된 파일 목록 조회"""
    files = []
    for file_path in UPLOAD_DIR.iterdir():
        if file_path.is_file():
            stat = file_path.stat()
            files.append({
                "name": file_path.name,
                "size": stat.st_size,
                "created": datetime.fromtimestamp(stat.st_ctime).isoformat()
            })
    
    return {"files": files}

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

FastAPI는 자동으로 API 문서를 생성해주고, 타입 힌팅을 통한 검증도 해줘서 정말 편리해! 🐍✨

🔹 AWS S3 연동

AWS S3는 가장 대중적인 객체 스토리지 서비스야. 안정성과 확장성이 뛰어나지!

// Node.js + AWS SDK v3
const { S3Client, PutObjectCommand } = require("@aws-sdk/client-s3");
const fs = require('fs');

// S3 클라이언트 초기화
const s3Client = new S3Client({
    region: "ap-northeast-2", // 서울 리전
    credentials: {
        accessKeyId: process.env.AWS_ACCESS_KEY_ID,
        secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
    }
});

async function uploadToS3(file, bucketName) {
    try {
        const fileStream = fs.createReadStream(file.path);
        
        const uploadParams = {
            Bucket: bucketName,
            Key: `uploads/${Date.now()}-${file.originalname}`,
            Body: fileStream,
            ContentType: file.mimetype,
            // 파일을 공개로 설정하려면 (선택사항)
            // ACL: 'public-read'
        };
        
        const command = new PutObjectCommand(uploadParams);
        const result = await s3Client.send(command);
        
        // S3 URL 생성
        const fileUrl = `https://${bucketName}.s3.ap-northeast-2.amazonaws.com/${uploadParams.Key}`;
        
        return {
            success: true,
            url: fileUrl,
            key: uploadParams.Key,
            etag: result.ETag
        };
        
    } catch (error) {
        console.error('S3 업로드 실패:', error);
        throw error;
    }
}

// Express 라우트에서 사용
app.post('/api/upload-to-s3', upload.single('file'), async (req, res) => {
    try {
        const s3Result = await uploadToS3(req.file, 'my-ai-agent-bucket');
        
        // 로컬 임시 파일 삭제
        await fs.promises.unlink(req.file.path);
        
        res.json({
            success: true,
            file: s3Result
        });
    } catch (error) {
        res.status(500).json({ error: '업로드 실패' });
    }
});

🔹 Google Cloud Storage 연동

Google Cloud Storage도 훌륭한 선택지야. 특히 Google AI 서비스들과 연동할 때 편리해!

// Node.js + Google Cloud Storage
const { Storage } = require('@google-cloud/storage');
const path = require('path');

// GCS 클라이언트 초기화
const storage = new Storage({
    projectId: 'your-project-id',
    keyFilename: './service-account-key.json'
});

const bucketName = 'my-ai-agent-bucket';
const bucket = storage.bucket(bucketName);

async function uploadToGCS(file) {
    try {
        const blob = bucket.file(`uploads/${Date.now()}-${file.originalname}`);
        const blobStream = blob.createWriteStream({
            resumable: false,
            metadata: {
                contentType: file.mimetype
            }
        });
        
        return new Promise((resolve, reject) => {
            blobStream.on('error', (error) => {
                reject(error);
            });
            
            blobStream.on('finish', async () => {
                // 파일을 공개로 설정 (선택사항)
                // await blob.makePublic();
                
                const publicUrl = `https://storage.googleapis.com/${bucketName}/${blob.name}`;
                
                resolve({
                    success: true,
                    url: publicUrl,
                    filename: blob.name
                });
            });
            
            blobStream.end(file.buffer);
        });
        
    } catch (error) {
        console.error('GCS 업로드 실패:', error);
        throw error;
    }
}

// Express 라우트
app.post('/api/upload-to-gcs', upload.single('file'), async (req, res) => {
    try {
        const gcsResult = await uploadToGCS(req.file);
        
        res.json({
            success: true,
            file: gcsResult
        });
    } catch (error) {
        res.status(500).json({ error: '업로드 실패' });
    }
});

🔹 OpenAI API와 파일 연동

OpenAI의 GPT-4 Vision이나 Assistants API를 사용하면 파일을 직접 처리할 수 있어!

const OpenAI = require('openai');
const fs = require('fs');

const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY
});

// 이미지 분석 (GPT-4 Vision)
async function analyzeImage(imagePath) {
    try {
        const imageBuffer = fs.readFileSync(imagePath);
        const base64Image = imageBuffer.toString('base64');
        
        const response = await openai.chat.completions.create({
            model: "gpt-4-vision-preview",
            messages: [
                {
                    role: "user",
                    content: [
                        {
                            type: "text",
                            text: "이 이미지를 자세히 분석해주세요."
                        },
                        {
                            type: "image_url",
                            image_url: {
                                url: `data:image/jpeg;base64,${base64Image}`
                            }
                        }
                    ]
                }
            ],
            max_tokens: 1000
        });
        
        return {
            analysis: response.choices[0].message.content,
            usage: response.usage
        };
        
    } catch (error) {
        console.error('이미지 분석 실패:', error);
        throw error;
    }
}

// 문서 처리 (Assistants API)
async function processDocument(filePath, question) {
    try {
        // 1. 파일 업로드
        const file = await openai.files.create({
            file: fs.createReadStream(filePath),
            purpose: 'assistants'
        });
        
        // 2. Assistant 생성
        const assistant = await openai.beta.assistants.create({
            name: "문서 분석 어시스턴트",
            instructions: "당신은 문서를 분석하고 질문에 답하는 전문가입니다.",
            model: "gpt-4-1106-preview",
            tools: [{ type: "retrieval" }],
            file_ids: [file.id]
        });
        
        // 3. Thread 생성
        const thread = await openai.beta.threads.create();
        
        // 4. 메시지 추가
        await openai.beta.threads.messages.create(thread.id, {
            role: "user",
            content: question
        });
        
        // 5. Run 실행
        const run = await openai.beta.threads.runs.create(thread.id, {
            assistant_id: assistant.id
        });
        
        // 6. 완료 대기
        let runStatus = await openai.beta.threads.runs.retrieve(thread.id, run.id);
        
        while (runStatus.status !== 'completed') {
            await new Promise(resolve => setTimeout(resolve, 1000));
            runStatus = await openai.beta.threads.runs.retrieve(thread.id, run.id);
            
            if (runStatus.status === 'failed') {
                throw new Error('Run failed');
            }
        }
        
        // 7. 응답 가져오기
        const messages = await openai.beta.threads.messages.list(thread.id);
        const lastMessage = messages.data[0];
        
        return {
            answer: lastMessage.content[0].text.value,
            fileId: file.id,
            assistantId: assistant.id
        };
        
    } catch (error) {
        console.error('문서 처리 실패:', error);
        throw error;
    }
}

// Express 라우트
app.post('/api/analyze-file', upload.single('file'), async (req, res) => {
    try {
        const file = req.file;
        const question = req.body.question || "이 파일의 내용을 요약해주세요.";
        
        let result;
        
        if (file.mimetype.startsWith('image/')) {
            result = await analyzeImage(file.path);
        } else {
            result = await processDocument(file.path, question);
        }
        
        // 임시 파일 삭제
        await fs.promises.unlink(file.path);
        
        res.json({
            success: true,
            result: result
        });
        
    } catch (error) {
        res.status(500).json({ error: '분석 실패' });
    }
});

🔹 Claude API와 파일 연동

Anthropic의 Claude도 이미지와 문서를 처리할 수 있어. 특히 긴 문맥 처리에 강점이 있지!

const Anthropic = require('@anthropic-ai/sdk');
const fs = require('fs');

const anthropic = new Anthropic({
    apiKey: process.env.ANTHROPIC_API_KEY
});

// 이미지 분석
async function analyzeImageWithClaude(imagePath) {
    try {
        const imageBuffer = fs.readFileSync(imagePath);
        const base64Image = imageBuffer.toString('base64');
        
        // 이미지 타입 확인
        const imageType = imagePath.endsWith('.png') ? 'image/png' : 'image/jpeg';
        
        const message = await anthropic.messages.create({
            model: "claude-3-opus-20240229",
            max_tokens: 1024,
            messages: [
                {
                    role: "user",
                    content: [
                        {
                            type: "image",
                            source: {
                                type: "base64",
                                media_type: imageType,
                                data: base64Image
                            }
                        },
                        {
                            type: "text",
                            text: "이 이미지에 대해 상세히 설명해주세요."
                        }
                    ]
                }
            ]
        });
        
        return {
            analysis: message.content[0].text,
            usage: message.usage
        };
        
    } catch (error) {
        console.error('Claude 이미지 분석 실패:', error);
        throw error;
    }
}

// 텍스트 문서 처리
async function processTextWithClaude(textContent, question) {
    try {
        const message = await anthropic.messages.create({
            model: "claude-3-opus-20240229",
            max_tokens: 2048,
            messages: [
                {
                    role: "user",
                    content: `다음 문서를 읽고 질문에 답해주세요.\n\n문서:\n${textContent}\n\n질문: ${question}`
                }
            ]
        });
        
        return {
            answer: message.content[0].text,
            usage: message.usage
        };
        
    } catch (error) {
        console.error('Claude 문서 처리 실패:', error);
        throw error;
    }
}

// PDF나 DOCX를 텍스트로 변환하는 헬퍼 함수들
const pdfParse = require('pdf-parse');
const mammoth = require('mammoth');

async function extractTextFromPDF(pdfPath) {
    const dataBuffer = fs.readFileSync(pdfPath);
    const data = await pdfParse(dataBuffer);
    return data.text;
}

async function extractTextFromDOCX(docxPath) {
    const result = await mammoth.extractRawText({ path: docxPath });
    return result.value;
}

// 통합 파일 처리 함수
async function processFileWithClaude(file, question) {
    try {
        let textContent;
        
        if (file.mimetype.startsWith('image/')) {
            return await analyzeImageWithClaude(file.path);
        } else if (file.mimetype === 'application/pdf') {
            textContent = await extractTextFromPDF(file.path);
        } else if (file.mimetype === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
            textContent = await extractTextFromDOCX(file.path);
        } else if (file.mimetype === 'text/plain') {
            textContent = fs.readFileSync(file.path, 'utf-8');
        } else {
            throw new Error('지원하지 않는 파일 형식입니다.');
        }
        
        return await processTextWithClaude(textContent, question);
        
    } catch (error) {
        console.error('파일 처리 실패:', error);
        throw error;
    }
}

🔹 청크 업로드 구현

큰 파일을 작은 조각으로 나눠서 업로드하는 방식이야. 네트워크 오류가 발생해도 처음부터 다시 시작할 필요가 없어!

// 프론트엔드: 청크 업로드
class ChunkedUploader {
    constructor(file, chunkSize = 1024 * 1024) { // 1MB 청크
        this.file = file;
        this.chunkSize = chunkSize;
        this.totalChunks = Math.ceil(file.size / chunkSize);
        this.uploadedChunks = 0;
    }
    
    async upload(onProgress) {
        const uploadId = this.generateUploadId();
        
        for (let chunkIndex = 0; chunkIndex < this.totalChunks; chunkIndex++) {
            const start = chunkIndex * this.chunkSize;
            const end = Math.min(start + this.chunkSize, this.file.size);
            const chunk = this.file.slice(start, end);
            
            await this.uploadChunk(chunk, chunkIndex, uploadId);
            
            this.uploadedChunks++;
            const progress = (this.uploadedChunks / this.totalChunks) * 100;
            
            if (onProgress) {
                onProgress(progress);
            }
        }
        
        // 모든 청크 업로드 완료 후 병합 요청
        return await this.completeUpload(uploadId);
    }
    
    async uploadChunk(chunk, chunkIndex, uploadId) {
        const formData = new FormData();
        formData.append('chunk', chunk);
        formData.append('chunkIndex', chunkIndex);
        formData.append('totalChunks', this.totalChunks);
        formData.append('uploadId', uploadId);
        formData.append('filename', this.file.name);
        
        const response = await fetch('/api/upload-chunk', {
            method: 'POST',
            body: formData
        });
        
        if (!response.ok) {
            throw new Error(`청크 ${chunkIndex} 업로드 실패`);
        }
        
        return await response.json();
    }
    
    async completeUpload(uploadId) {
        const response = await fetch('/api/complete-upload', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                uploadId: uploadId,
                filename: this.file.name,
                totalChunks: this.totalChunks
            })
        });
        
        return await response.json();
    }
    
    generateUploadId() {
        return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
    }
}

// 사용 예시
async function handleLargeFileUpload(file) {
    const uploader = new ChunkedUploader(file);
    
    try {
        const result = await uploader.upload((progress) => {
            console.log(`업로드 진행률: ${progress.toFixed(2)}%`);
            // 프로그레스 바 업데이트
            updateProgressBar(progress);
        });
        
        console.log('업로드 완료:', result);
    } catch (error) {
        console.error('업로드 실패:', error);
    }
}

// 백엔드: 청크 수신 및 병합
const express = require('express');
const fs = require('fs').promises;
const path = require('path');

const app = express();
const CHUNK_DIR = './chunks';
const UPLOAD_DIR = './uploads';

// 청크 업로드 엔드포인트
app.post('/api/upload-chunk', upload.single('chunk'), async (req, res) => {
    try {
        const { chunkIndex, totalChunks, uploadId, filename } = req.body;
        
        // 청크 디렉토리 생성
        const uploadChunkDir = path.join(CHUNK_DIR, uploadId);
        await fs.mkdir(uploadChunkDir, { recursive: true });
        
        // 청크 파일 저장
        const chunkPath = path.join(uploadChunkDir, `chunk-${chunkIndex}`);
        await fs.rename(req.file.path, chunkPath);
        
        res.json({
            success: true,
            chunkIndex: parseInt(chunkIndex),
            message: `청크 ${chunkIndex}/${totalChunks} 업로드 완료`
        });
        
    } catch (error) {
        console.error('청크 업로드 에러:', error);
        res.status(500).json({ error: '청크 업로드 실패' });
    }
});

// 업로드 완료 및 병합 엔드포인트
app.post('/api/complete-upload', express.json(), async (req, res) => {
    try {
        const { uploadId, filename, totalChunks } = req.body;
        
        const uploadChunkDir = path.join(CHUNK_DIR, uploadId);
        const finalPath = path.join(UPLOAD_DIR, `${Date.now()}-${filename}`);
        
        // 최종 파일 생성
        const writeStream = require('fs').createWriteStream(finalPath);
        
        // 모든 청크를 순서대로 병합
        for (let i = 0; i < totalChunks; i++) {
            const chunkPath = path.join(uploadChunkDir, `chunk-${i}`);
            const chunkBuffer = await fs.readFile(chunkPath);
            writeStream.write(chunkBuffer);
        }
        
        writeStream.end();
        
        // 병합 완료 대기
        await new Promise((resolve, reject) => {
            writeStream.on('finish', resolve);
            writeStream.on('error', reject);
        });
        
        // 청크 디렉토리 삭제
        await fs.rm(uploadChunkDir, { recursive: true });
        
        // 파일 정보
        const stats = await fs.stat(finalPath);
        
        res.json({
            success: true,
            file: {
                path: finalPath,
                size: stats.size,
                filename: filename
            },
            message: '파일 업로드 및 병합 완료'
        });
        
    } catch (error) {
        console.error('병합 에러:', error);
        res.status(500).json({ error: '파일 병합 실패' });
    }
});

🔹 스트리밍 처리

파일을 메모리에 전부 로드하지 않고 스트림으로 처리하면 메모리를 절약할 수 있어!

const fs = require('fs');
const readline = require('readline');

// 대용량 텍스트 파일을 줄 단위로 처리
async function processLargeTextFile(filePath, processLine) {
    const fileStream = fs.createReadStream(filePath);
    
    const rl = readline.createInterface({
        input: fileStream,
        crlfDelay: Infinity
    });
    
    let lineNumber = 0;
    
    for await (const line of rl) {
        lineNumber++;
        await processLine(line, lineNumber);
    }
    
    return lineNumber;
}

// 사용 예시: CSV 파일 처리
async function processCsvFile(filePath) {
    const results = [];
    let header = null;
    
    await processLargeTextFile(filePath, async (line, lineNumber) => {
        if (lineNumber === 1) {
            header = line.split(',');
        } else {
            const values = line.split(',');
            const row = {};
            
            header.forEach((key, index) => {
                row[key] = values[index];
            });
            
            results.push(row);
            
            // 배치 처리 (1000줄마다)
            if (results.length >= 1000) {
                await processBatch(results);
                results.length = 0; // 배열 비우기
            }
        }
    });
    
    // 남은 데이터 처리
    if (results.length > 0) {
        await processBatch(results);
    }
}

async function processBatch(batch) {
    // AI 에이전트로 배치 전송
    console.log(`${batch.length}개 행 처리 중...`);
    // 실제 AI 처리 로직
}

🔹 파일 타입 검증

확장자만 믿으면 안 돼! 실제 파일 내용을 검사해야 해.

const fileType = require('file-type');
const fs = require('fs').promises;

async function validateFileType(filePath, allowedTypes) {
    try {
        // 파일의 실제 타입 확인 (매직 넘버 기반)
        const buffer = await fs.readFile(filePath);
        const type = await fileType.fromBuffer(buffer);
        
        if (!type) {
            throw new Error('파일 타입을 확인할 수 없습니다.');
        }
        
        // 허용된 타입인지 확인
        if (!allowedTypes.includes(type.mime)) {
            throw new Error(`허용되지 않은 파일 타입: ${type.mime}`);
        }
        
        return {
            valid: true,
            mime: type.mime,
            ext: type.ext
        };
        
    } catch (error) {
        return {
            valid: false,
            error: error.message
        };
    }
}

// 사용 예시
app.post('/api/secure-upload', upload.single('file'), async (req, res) => {
    try {
        const allowedTypes = [
            'image/jpeg',
            'image/png',
            'application/pdf',
            'text/plain'
        ];
        
        const validation = await validateFileType(req.file.path, allowedTypes);
        
        if (!validation.valid) {
            await fs.unlink(req.file.path); // 파일 삭제
            return res.status(400).json({ error: validation.error });
        }
        
        // 파일 처리 계속...
        res.json({ success: true, fileType: validation.mime });
        
    } catch (error) {
        res.status(500).json({ error: '업로드 실패' });
    }
});

🔹 파일명 새니타이징

악의적인 파일명으로 인한 경로 조작 공격을 방지해야 해!

const path = require('path');
const crypto = require('crypto');

function sanitizeFilename(filename) {
    // 1. 경로 구분자 제거
    let sanitized = filename.replace(/[\/\\]/g, '');
    
    // 2. 특수문자 제거 (알파벳, 숫자, 점, 하이픈, 언더스코어만 허용)
    sanitized = sanitized.replace(/[^a-zA-Z0-9._-]/g, '_');
    
    // 3. 연속된 점 제거 (.. 공격 방지)
    sanitized = sanitized.replace(/\.{2,}/g, '.');
    
    // 4. 파일명이 점으로 시작하지 않도록
    sanitized = sanitized.replace(/^\.+/, '');
    
    // 5. 파일명 길이 제한 (255자)
    if (sanitized.length > 255) {
        const ext = path.extname(sanitized);
        const name = path.basename(sanitized, ext);
        sanitized = name.substring(0, 255 - ext.length) + ext;
    }
    
    return sanitized;
}

function generateSecureFilename(originalFilename) {
    const ext = path.extname(originalFilename);
    const hash = crypto.randomBytes(16).toString('hex');
    const timestamp = Date.now();
    
    return `${timestamp}-${hash}${ext}`;
}

// 사용 예시
app.post('/api/safe-upload', upload.single('file'), async (req, res) => {
    try {
        const originalName = req.file.originalname;
        const sanitizedName = sanitizeFilename(originalName);
        const secureName = generateSecureFilename(sanitizedName);
        
        const newPath = path.join(UPLOAD_DIR, secureName);
        await fs.rename(req.file.path, newPath);
        
        res.json({
            success: true,
            originalName: originalName,
            savedName: secureName
        });
        
    } catch (error) {
        res.status(500).json({ error: '업로드 실패' });
    }
});

🔹 바이러스 스캔

프로덕션 환경에서는 업로드된 파일에 대한 바이러스 스캔을 고려해야 해!

const NodeClam = require('clamscan');

// ClamAV 초기화
const clamscan = new NodeClam().init({
    removeInfected: true, // 감염된 파일 자동 삭제
    quarantineInfected: './quarantine/', // 격리 디렉토리
    scanLog: './scan.log',
    debugMode: false,
    clamdscan: {
        host: 'localhost',
        port: 3310
    }
});

async function scanFile(filePath) {
    try {
        const scanner = await clamscan;
        const { isInfected, viruses } = await scanner.isInfected(filePath);
        
        return {
            safe: !isInfected,
            viruses: viruses
        };
        
    } catch (error) {
        console.error('스캔 에러:', error);
        throw error;
    }
}

// 업로드 미들웨어에 통합
app.post('/api/scan-upload', upload.single('file'), async (req, res) => {
    try {
        // 바이러스 스캔
        const scanResult = await scanFile(req.file.path);
        
        if (!scanResult.safe) {
            return res.status(400).json({
                error: '악성 파일이 감지되었습니다.',
                viruses: scanResult.viruses
            });
        }
        
        // 안전한 파일, 처리 계속...
        res.json({ success: true, message: '파일이 안전합니다.' });
        
    } catch (error) {
        res.status(500).json({ error: '스캔 실패' });
    }
});

🔹 실시간 진행률 표시

XMLHttpRequest나 Fetch API의 progress 이벤트를 활용하면 실시간 진행률을 표시할 수 있어!

// 프론트엔드: 진행률 표시
class FileUploadWithProgress {
    constructor(fileInputId, progressBarId) {
        this.fileInput = document.getElementById(fileInputId);
        this.progressBar = document.getElementById(progressBarId);
    }
    
    async upload(url) {
        const file = this.fileInput.files[0];
        
        if (!file) {
            alert('파일을 선택해주세요!');
            return;
        }
        
        const formData = new FormData();
        formData.append('file', file);
        
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            
            // 업로드 진행률 이벤트
            xhr.upload.addEventListener('progress', (e) => {
                if (e.lengthComputable) {
                    const percentComplete = (e.loaded / e.total) * 100;
                    this.updateProgress(percentComplete);
                }
            });
            
            // 완료 이벤트
            xhr.addEventListener('load', () => {
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    resolve(response);
                } else {
                    reject(new Error('업로드 실패'));
                }
            });
            
            // 에러 이벤트
            xhr.addEventListener('error', () => {
                reject(new Error('네트워크 오류'));
            });
            
            xhr.open('POST', url);
            xhr.send(formData);
        });
    }
    
    updateProgress(percent) {
        this.progressBar.style.width = `${percent}%`;
        this.progressBar.textContent = `${Math.round(percent)}%`;
        
        // 완료 시 색상 변경
        if (percent >= 100) {
            this.progressBar.style.backgroundColor = '#4CAF50';
        }
    }
}

// HTML
/*
<div style="width: 100%; background: #f0f0f0; border-radius: 10px; overflow: hidden;">
    <div id="progressBar" style="width: 0%; height: 30px; background: #2196F3; 
         text-align: center; line-height: 30px; color: white; transition: width 0.3s;">
        0%
    </div>
</div>
<input type="file" id="fileInput">
<button onclick="startUpload()">업로드</button>
*/

async function startUpload() {
    const uploader = new FileUploadWithProgress('fileInput', 'progressBar');
    
    try {
        const result = await uploader.upload('/api/upload');
        console.log('업로드 성공:', result);
        alert('파일 업로드가 완료되었습니다!');
    } catch (error) {
        console.error('업로드 실패:', error);
        alert('업로드 중 오류가 발생했습니다.');
    }
}

🔹 멀티 파일 업로드

여러 파일을 동시에 업로드하고 각각의 진행률을 표시하는 기능도 구현해보자!

class MultiFileUploader {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.uploads = [];
    }
    
    async uploadFiles(files) {
        const uploadPromises = Array.from(files).map((file, index) => {
            return this.uploadSingleFile(file, index);
        });
        
        try {
            const results = await Promise.all(uploadPromises);
            return results;
        } catch (error) {
            console.error('일부 파일 업로드 실패:', error);
            throw error;
        }
    }
    
    async uploadSingleFile(file, index) {
        // 진행률 UI 생성
        const uploadItem = this.createUploadItem(file, index);
        this.container.appendChild(uploadItem);
        
        const formData = new FormData();
        formData.append('file', file);
        
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            
            xhr.upload.addEventListener('progress', (e) => {
                if (e.lengthComputable) {
                    const percent = (e.loaded / e.total) * 100;
                    this.updateUploadItem(index, percent, 'uploading');
                }
            });
            
            xhr.addEventListener('load', () => {
                if (xhr.status === 200) {
                    this.updateUploadItem(index, 100, 'complete');
                    resolve(JSON.parse(xhr.responseText));
                } else {
                    this.updateUploadItem(index, 0, 'error');
                    reject(new Error('업로드 실패'));
                }
            });
            
            xhr.addEventListener('error', () => {
                this.updateUploadItem(index, 0, 'error');
                reject(new Error('네트워크 오류'));
            });
            
            xhr.open('POST', '/api/upload');
            xhr.send(formData);
        });
    }
    
    createUploadItem(file, index) {
        const item = document.createElement('div');
        item.id = `upload-item-${index}`;
        item.style.cssText = 'margin: 10px 0; padding: 15px; border: 1px solid #ddd; border-radius: 8px;';
        
        item.innerHTML = `
            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                <span style="font-weight: bold;">${file.name}</span>
                <span style="color: #666;">${this.formatFileSize(file.size)}</span>
            </div>
            <div style="width: 100%; background: #f0f0f0; border-radius: 5px; overflow: hidden;">
                <div id="progress-${index}" style="width: 0%; height: 20px; background: #2196F3; 
                     transition: width 0.3s;"></div>
            </div>
            <div id="status-${index}" style="margin-top: 5px; font-size: 0.9em; color: #666;">
                대기 중...
            </div>
        `;
        
        return item;
    }
    
    updateUploadItem(index, percent, status) {
        const progressBar = document.getElementById(`progress-${index}`);
        const statusText = document.getElementById(`status-${index}`);
        
        if (progressBar) {
            progressBar.style.width = `${percent}%`;
        }
        
        if (statusText) {
            switch (status) {
                case 'uploading':
                    statusText.textContent = `업로드 중... ${Math.round(percent)}%`;
                    statusText.style.color = '#2196F3';
                    break;
                case 'complete':
                    statusText.textContent = '✓ 업로드 완료';
                    statusText.style.color = '#4CAF50';
                    if (progressBar) progressBar.style.background = '#4CAF50';
                    break;
                case 'error':
                    statusText.textContent = '✗ 업로드 실패';
                    statusText.style.color = '#f44336';
                    if (progressBar) progressBar.style.background = '#f44336';
                    break;
            }
        }
    }
    
    formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    }
}

// 사용 예시
async function handleMultipleFiles() {
    const input = document.getElementById('multiFileInput');
    const files = input.files;
    
    if (files.length === 0) {
        alert('파일을 선택해주세요!');
        return;
    }
    
    const uploader = new MultiFileUploader('uploadContainer');
    
    try {
        const results = await uploader.uploadFiles(files);
        console.log('모든 파일 업로드 완료:', results);
    } catch (error) {
        console.error('업로드 중 오류:', error);
    }
}