-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
이미지 업로드 질문
24.02.25 16:53 작성 24.02.25 17:36 수정 조회수 147
0
ex) pages/section19/19-04-image-with-board/index.tsx
// ...
export default function ImageUploadPage(): JSX.Element {
// ...
const onChangeFile = async (
e: ChangeEvent<HTMLInputElement>,
): Promise<void> => {
const file = e.target.files?.[0];
console.log(file);
const isValid = checkValidationFile(file);
if (!isValid) return;
const result = await uploadFile({
variables: {
file,
},
});
console.log(result.data?.uploadFile.url);
setImgUrl(result.data?.uploadFile.url ?? "");
};
// ...
}이렇게 이미지를 선택하기만 해도 uploadFile 함수로 인해 storage에 이미지파일이 저장되어 주소를 받아오 것으로 이해하고 있는데 이 상태에서 새로고침을 하거나 사이트 꺼버리면 storage에 이미지파일은 그대로 저장된 채로 유기되어 용량이 낭비되는 것이 아닌가 하는 의문이 들었습니다. 그렇지 않다면 상관없지만 이렇게 선택만하고 중단할 경우 이미 storage에 저장된 이미지가 자동으로 삭제되지는 않을 것 같고 useEffect의 return 안에 입력정보가 DB에 저장되지 않은 채로 사이트가 꺼지거나 새로고침되면 storage에 선택만 했던 이미지를 지우도록 조건문으로 코드를 작성해주면 storage의 용량이 낭비되는 문제를 해결할 수 있지 않을까요?? 혹은 더 옳바른 방법이 있는지, 제가 잘못 이해하고 있는지, 그리고 제가 말한 방법대로 또는 강사님이 생각하시는 더 옳바른 방법으로 코드를 작성하게 됐을 때의 예시 코드를 보여주시면 감사드리겠습니다.
답변을 작성해보세요.
1
노원두
지식공유자2024.03.03
안녕하세요! joka님!
정말 좋은 질문이예요!
해당 수업에서는 크게 2가지의 비효율적인 면을 고민해 보는 퀴즈가 있었죠!
해당 부분을 고민하고 해결하는 과정이 뒷부분 이미지 최적화 수업에서 진행된답니다!^^
그 중 1가지 스토리지 용량 문제는 정답을 맞히셨고, 남은 1가지 비효율적인 부분이 더 있는데 고민해 보시고,
뒷부분 최적화 파트의 수업을 끝까지 들어보세요!^^
0
인프런 AI 인턴
2024.02.27
안녕하세요, 인프런 AI 인턴입니다.
joka님의 질문에 대해서 답변 드리겠습니다.
말씀하신대로 이미지 업로드 과정에서 사용자가 이미지를 선택하면 uploadFile 함수가 호출되어 바로 스토리지에 이미지가 저장됩니다. 사용자가 이후 새로고침하거나 사이트를 닫는 등의 행동을 할 경우, 이미 스토리지에 저장된 이미지는 그대로 남아 있게 되고, 자동으로 삭제되지 않습니다.
이 문제를 해결하기 위한 한 가지 방법은, 이미지가 최종적으로 서버에 데이터와 함께 등록될 때까지 스토리지에 임시적으로 저장하는 로직을 구현하는 것입니다. 사용자가 페이지를 벗어나거나 새로고침할 경우, 등록되지 않은 임시 이미지들을 정리하는 로직을 추가할 수 있습니다.
예를 들어, useEffect를 사용하여 컴포넌트가 언마운트될 때 클린업 함수(Clean-up function)를 호출하고, 만약 데이터가 DB에 등록되지 않았다면 해당 함수 내에서 스토리지에 저장된 임시 이미지를 삭제하는 로직을 추가할 수 있습니다. 하지만 이 방식은 사용자가 실수로 페이지를 벗어나거나 새로고침할 경우 예상치 못한 이미지 삭제가 일어날 수 있기 때문에 주의가 필요합니다.
또는 이미지 업로드를 최종적으로 확인하거나 제출하는 단계에만 스토리지에 업로드하는 방식으로 처리하여, 사용자가 의도적으로 등록 과정을 완료한 경우에만 스토리지에 저장되도록 할 수도 있습니다.
선택한 이미지를 임시적으로 관리하거나, 사용자의 의도를 확인하는 단계를 추가하는 것은 각 서비스의 특성과 사용자 경험을 고려하여 설계하는 것이 중요합니다.
제시하신 내용에 기초하여 개선된 코드 예시는 아래와 같습니다:
useEffect(() => {
return () => {
// 언마운트 시 혹은 새로고침 시 실행할 로직
if (!dataIsSaved) {
// 스토리지에서 임시 이미지 삭제 로직
deleteTemporaryImageFromStorage(imgUrl);
}
};
}, [imgUrl, dataIsSaved]);
이 코드에서 dataIsSaved는 이미지가 최종적으로 DB에 저장되었는지를 나타내는 상태 변수이며, deleteTemporaryImageFromStorage는 임시 이미지를 스토리지에서 삭제하는 함수입니다. 이 방식은 페이지가 언마운트되거나 새로 고침될 때 임시 이미지를 정리할 수 있게 도와줄 것입니다.
그럼 도움이 되길 바라며, 추가적인 질문이 있으시면 언제든지 문의해 주시기 바랍니다.
답변 2