리액트에서 이미지 업로드 기능 구현 프로세스

1. 파일 업로드 컴포넌트 구현
2. 백엔데에서 제공해주는 NCP Object Storage URL API 호출해서 클라우드에 이미지 업로드
3. 클라우드에서 업로드 성공 응답 받으면 이전 백엔드에서 제공해준 IMG URL로 백엔드로 다시 API 호출해서 이미지 업로드

1. Client 업로드 컴포넌트 구현

<input
type="file"
accept="image/png, image/jpeg"
onChange={onChangeSaveImageHandler}
/>

Input property로 업로드 가능한 파일 타입을 미리 저장할 수 있다 (백엔드와 맞춰서 어떤 타입을 사용할건지 정하기). 그리고 아래 이미지에서 파일은 선택하면 콘솔로그에서 객체가 확인이 가능하다. 나중에 객체 전체를 NCP Object Storage에 업로드하기 때문에 지금은 신경 안써도 된다.

2. Client request presigned URL from BE Server

NCP Object Storage에 이미지를 업로드하기 위해 백엔드에서 제공해주는 URL API를 먼저 호출한다.

HTTP GET 메서드를 사용해 아래 API 를 호출하는데 필수 params과 선택 params가 있다.

• 업로드 파일 유형: 필요한 페이지에 따라 저장소가 달라지기 때문에 필수
• 파일 타입: png/jpeg/wbep
• int: 응답으로 URL 객수. 나중에 다중 선택-업로드할때 사용하는데 지금은 단일 선택으로 구현해서 int=1 고정.

그리고 응답 예시

"{
    ""status_code"": 200,
    ""message"": ""OK"",
    ""data"": {
        ""category"": ""{IMAGE_TYPE}"",
        ""png"": [
            {
                ""upload_url"": ""https://{URL}/dev-miti-image-server/temp/post-images/1751096283_ca7c860f39944133ad9a5bf79a03e125.png?AWSAccessKeyId={AWS_ACCESS_KEY}=&content-type=image/png&Expires={EXPIREDATE}"",
                ""file_url"": ""https://{URL}/temp/post-images/1751096283_2619ff24771f474c95d16de0f1c5fdc0.png"",
                ""file_path"": ""temp/post-images/1751096283_2619ff24771f474c95d16de0f1c5fdc0.png"",
                ""content_type"": ""image/png""
            },
        ],
        ""jpeg"": [],
        
    }
}"		
		
		``
	

3. PUT 메서드 사용해 NCP Object Storage 이미지 업로드 구현

백엔드에서 받은 업로드 URL를 사용해 NCP에 파일 업로드를 한다.
아래 코드처럼 PUT 메서드를 사용하기 때문에 헤더에 추가할 것은 없다. 오히려 추가하면 다른 문제가 발생할 수 있다.
console.log() 사실 필요 없는데 성공 또는 에러를 확인하기 위해 넣었고 나중에 이 줄은 삭제할 예정이다.

export const uploadNcpFile = async (uploadUrl: string, file: File, contentType: string) => {
    try {
        const res = await axios.put(uploadUrl, file, {
            headers: {
                'Content-Type': contentType,
            },
        });
        console.log(res);
        return res;
    } catch (error) {
        console.log(error);
        throw new Error('NCP 업로드 실패');
    }
};

3-A 실패 사레 (CORS ERROR) 응답

NCP 파일을 업로드하면 CORS 응답을 받아서 문제가 생겼다.

3-B Status code 200 (성공) 응답

status_code 200 응답으로 받았고 object storage에 성공적으로 업로드 됐다.
성공 케이스인 경우 처음에 백엔드에서 URL 요청한 API 가지고 FILE_PATH를 다시 백엔드로 전달해서 이미지 업로드 및 페이지에 업데이트 완료.