들어가며
이번 포스트에서는 백엔드에서 구현된 uploads 기능을 활용하여 프론트엔드에서 AWS로 이미지를 업로드하는 과정을 단계별로 살펴보겠습니다. 주로 FormData 인터페이스를 사용하여 파일을 처리하고, 실제 이미지 업로드를 진행하는 방법을 설명합니다.
FormData 인터페이스 소개
FormData 인터페이스는 웹 폼 필드와 그 값을 나타내는 key/value 쌍을 생성하는 데 사용됩니다. 이는 특히 파일이나 데이터를 서버로 비동기적으로 전송할 때 유용합니다. FormData 객체는 "multipart/form-data" 인코딩 타입과 함께 사용되어, 파일을 포함한 데이터를 적절히 서버에 전달할 수 있습니다.
- FormData 생성:
new FormData()를 호출하여 새 FormData 객체를 생성합니다. - 데이터 추가:
FormData.append()메서드를 사용하여 새로운 데이터를 추가합니다. 이미 같은 키가 있을 경우, 새 값이 기존 값에 추가됩니다.
이미지 업로드 구현
이미지 업로드 기능을 구현하는 과정은 다음과 같습니다:
- 업로드 준비: 사용자가 입력 폼을 통해 파일을 포함한 필요한 정보를 입력합니다.
- FormData 객체 생성 및 설정: 사용자가 입력한 파일을 포함하여 FormData 객체를 설정합니다.
- 이미지 업로드 요청: 설정된 FormData 객체를 사용하여 서버에 POST 요청을 보냅니다. 이 예에서는 로컬 서버 주소(
http://localhost:4000/uploads/)를 사용했습니다. - 응답 처리: 서버로부터 응답을 받아 이미지 URL을 추출하고 상태를 업데이트합니다.
- 데이터 저장 요청: 추출된 이미지 URL과 다른 입력 데이터를 함께 사용하여 최종적으로 식당 생성 뮤테이션을 실행합니다.
const onSubmit = async () => {
try {
// 업로딩 시작
setUploading(true);
// 폼 데이터에서 파일 및 기타 필드 값 추출
const { file, name, categoryName, address, minimumPrice, deliveryFee } = getValues();
// 실제 파일 객체
const actualFile = file[0];
// FormData 객체 생성 및 파일 추가
const formBody = new FormData();
formBody.append("file", actualFile);
// 이미지 업로드 요청 및 응답에서 이미지 URL 추출
const { url: coverImg } = await (
await fetch("http://localhost:4000/uploads/", {
method: "POST",
body: formBody,
})
).json();
// 이미지 URL 상태 업데이트
setImageUrl(coverImg);
// 식당 생성 뮤테이션 실행
createRestaurantMutation({
variables: {
input: {
name,
categoryName,
address,
coverImg,
minimumPrice: +minimumPrice,
deliveryFee: +deliveryFee,
},
},
});
} catch (e) {
// 에러 처리 로직 (필요한 경우 추가)
}
};마치며
이미지 업로드 기능은 사용자가 직접적으로 데이터를 서버에 전송할 수 있게 하며, FormData를 활용하면 멀티파트 데이터를 쉽게 처리할 수 있습니다.
