React AWS S3 파일 업로드 및 연동

Amazon S3 (Amazon Simple Storage Service)란

Amazon Web Services (AWS)의 클라우드 기반 스토리지 서비스로, 사진, 영상과 같은 데이터를 저장하고, 해당 데이터에 대해 url로 제공해주어 프론트엔드에서 사용할 수 있도록 해준다.

Amazon S3 (Amazon Simple Storage Service) 구성 요소

• 버킷 (Bucket):
  Amazon S3에서 데이터를 저장하는 논리적인 컨테이너로 모든 객체(파일)는 버킷에 저장된다.
  전역적으로 고유한 이름을 가져야 하며, 이름은 모든 AWS 고객 간에 고유해야 한다. 그렇게 .env를 통해 보안요소로 관리된다.
• 객체 (Object):
  Amazon S3에 저장되는 데이터 항목을 객체라고 하며, 객체는 파일, 이미지, 비디오, 문서 등 어떤 종류의 데이터든 포함할 수 있다.
  각 객체는 고유한 키(파일 이름)로 식별되며 이를 통해 우린 Url에 대한 정보를 얻을 수 있다. params에 body로 제공한다. 
• KEY : 
  파일이 저장될 경로와 파일 이름을 설정할 수 있다.

React S3 연동 및 파일 업로드

아래 코드는 파라미터로 받은 정보에 대해 S3에 저장한 후 파일 url에 대해 다른 useState를 통해 관리하는 내용의 코드이다.

// AWS SDK를 사용하여 selectedFile 파일을 S3에 업로드하는 비동기 함수를 정의합니다.
const uploadToS3 = async (selectedFile) => {
  // AWS SDK의 S3 객체를 생성합니다.
  const s3 = new AWS.S3();

  // 파일이 이미 업로드되었는지 여부를 확인하기 위한 변수입니다.
  if (isFiled === false) {
    // 선택된 파일을 변수에 할당합니다.
    const file = selectedFile;

    // S3에 업로드할 파일의 설정 정보를 정의합니다.
    const params = {
      Bucket: process.env.REACT_APP_S3_BUCKET, // S3 버킷 이름은 환경 변수로부터 가져옵니다.
      Key: "upload/" + `${Date.now()}_${file.name}`, // 파일이 저장될 경로와 파일 이름을 설정합니다.
      Body: file, // 업로드할 파일의 데이터를 지정합니다.
    };

    // S3에 파일을 업로드하고, 업로드된 파일의 위치 정보(Location)를 받아옵니다.
    const { Location } = await s3.upload(params).promise();

    // 업로드가 성공하면, 파일의 위치 정보를 바탕으로 Url 정보를 설정합니다.
    setImageView(Location);

    // 파일이 성공적으로 업로드되었으므로, isFiled 상태를 true로 설정합니다.
    setIsFiled(true);

    // 업로드가 성공적으로 완료되었음을 알리는 메시지를 출력합니다.
  } else if (isFiled) {
    alert("이미 파일을 업로드 하셨습니다.");
  } else {
    // 파일이 선택되지 않았을 경우 사용자에게 메시지를 표시합니다.
    alert("파일을 선택해주세요.");
  }
};