React와 Nest.js를 활용한 파일 업로드: 클라이언트-서버 통신

by

파일 업로드는 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. 이번 포스팅에서는 React에서 Axios를 사용하여 파일을 서버로 업로드하고, 서버 측에서는 Nest.js를 활용하여 파일을 처리하는 방법을 다룰 것입니다.


클라이언트 측 (React)

React 애플리케이션에서 파일 업로드를 구현하려면 다음 단계를 따릅니다.


1. Axios 및 상태 관리 설정

먼저, Axios를 설치하고 React 상태를 관리하기 위한 상태 변수를 설정합니다.

npm install axios
import React, { useState } from 'react';
import axios from 'axios';

function FileUpload() {
  const [file, setFile] = useState(null);

  // 파일 선택 이벤트 핸들러
  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    setFile(selectedFile);
  };

  // 파일 업로드 이벤트 핸들러
  const handleUpload = async () => {
    try {
      const formData = new FormData();
      formData.append('file', file);

      // Axios를 사용하여 파일 업로드
      await axios.post('http://localhost:3000/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });

      alert('파일 업로드 성공');
    } catch (error) {
      console.error('파일 업로드 실패:', error);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>업로드</button>
    </div>
  );
}

export default FileUpload;


2. 파일 선택 및 업로드

React 컴포넌트에서 파일을 선택하고 업로드하는 부분을 작성합니다. handleFileChange 함수에서 파일을 선택하고, handleUpload 함수에서 파일을 서버로 업로드합니다. FormData 객체를 사용하여 파일을 서버로 전송하고, Content-Type 헤더를 multipart/form-data로 설정합니다.


서버 측 (Nest.js)

서버 측에서는 Nest.js를 사용하여 파일 업로드를 처리합니다.

1. 파일 업로드 컨트롤러 생성

Nest.js에서 파일 업로드를 처리하기 위한 컨트롤러를 작성합니다.

import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { diskStorage } from 'multer';

@Controller('upload')
export class UploadController {
  @Post()
  @UseInterceptors(FileInterceptor('file', {
    storage: diskStorage({
      destination: './uploads', // 파일 업로드 경로
      filename: (req, file, cb) => {
        const fileName = `${Date.now()}-${file.originalname}`;
        cb(null, fileName);
      },
    }),
  }))
  uploadFile(@UploadedFile() file) {
    if (!file) {
      return '파일을 선택해주세요.';
    }
    return '파일 업로드 성공';
  }
}


2. 파일 업로드 설정

Nest.js의 @nestjs/platform-express와 multer를 사용하여 파일 업로드를 설정합니다. 업로드된 파일은 설정된 업로드 경로(./uploads)에 저장됩니다.


3. 서버 실행 및 테스트

React 애플리케이션과 Nest.js 서버를 실행하고, 파일을 선택하고 업로드 버튼을 클릭하여 파일을 서버로 전송할 수 있습니다. 클라이언트에서 업로드한 파일은 서버의 업로드 경로에 저장됩니다.

이렇게 React와 Nest.js를 사용하여 파일 업로드를 구현할 수 있습니다. 클라이언트 측에서는 Axios를 사용하여 파일을 업로드하고, 서버 측에서는 Nest.js를 활용하여 파일을 처리합니다. 이것은 웹 애플리케이션에서 파일 업로드를 구현할 때 유용한 방법 중 하나입니다.



Leave a Comment