React로 AWS S3 연결해서 사진 올리는 방법(리액트)

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "Statement1",
			"Principal": {"이곳에 사용자 arn이 들어가야함
			   예시)" "AWS" : "arn예시"},
			"Effect": "Allow",
			"Action": [
				"s3:PutObject",
				"s3:DeleteObject",
				"s3:GetObject"
			],
			"Resource": ["이곳에 사용할 버킷"]
		}
	]
}

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE",
            "HEAD",
            "GET"
        ],
        "AllowedOrigins": [
            "http://localhost:3000"
        ],
        "ExposeHeaders": []
    }
]

npm install aws-sdk

import './App.css';
import React, { useState } from 'react';
import AWS from 'aws-sdk';

function App() {

    const [selectedFile, setSelectedFile] = useState(null);

    const handleFileChange = (e) => {
      setSelectedFile(e.target.files[0]);
    };

    const handleUpload = () => {
      if (!selectedFile) {
        alert('Please select a file');
        return;
      }

      // AWS S3 설정 
      AWS.config.update({
        accessKeyId: 'YOUR_ACCESS_KEY_ID', // IAM 사용자 엑세스 키 변경
        secretAccessKey: 'YOUR_SECRET_ACCESS_KEY', // IAM 엑세스 시크릿키 변경
        region: 'YOUR_REGION', // 리전 변경
      });

      const s3 = new AWS.S3();

      // 업로드할 파일 정보 설정
      const uploadParams = {
        Bucket: 'your-s3-bucket-name',  // 버킷 이름 변경
        Key: `folder/${selectedFile.name}`, // S3에 저장될 경로와 파일명
        Body: selectedFile,
      };

      // S3에 파일 업로드
      s3.upload(uploadParams, (err, data) => {
        if (err) {
          console.error('Error uploading file:', err);
        } else {
          console.log('File uploaded successfully. ETag:', data.ETag);
          // 업로드 성공 후 필요한 작업 수행
        }
      });
    };

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

}

export default App;