yamoo9
commented
1 year ago 문제 상황
Cloud Storage에 업로드 된 이미지를 UI에 정상적으로 반영하고 싶습니다.
문제 해결
먼저 정상적으로 처리되는 UI 화면을 확인하세요. 😊
SubmitDiary.tsx 파일에 작성된 onSubmit 함수를 아래와 같이 수정하면 정상 작동할 것입니다.
코드 해설은 포함된 주석을 참고하세요. 😉
SubmitDiary.tsx
const onSubmit = async () => {
const createTime = moment().format('YYYYMMDDHHmmss')
// imgGroup 배열 데이터를 순환해 Promise 객체를 포함한 배열을 imageGroupPromises에 반환
const imageGroupPromises = imgGroup.map(file => {
const imgName = file.id
const imagesRef = ref(storageService, `diaryImg/${userUid}/${imgName}`)
// Promise 객체 반환
// uploadString 함수를 사용해 Storage에 이미지 업로드
return uploadString(imagesRef, file.origin, 'data_url')
// 이미지 업로드가 완료되면 다운로드 URL 값을 가져와 반환
.then(response => getDownloadURL(response.ref))
// 응답 받은 다운로드 URL 값을 포함한 객체 반환
.then(imgUrl => ({ id: imgName, url: imgUrl }))
})
// imageGroupPromises 배열(Promise 객체를 아이템으로 포함)을 전달받은
// Promise.all 메서드는 모든 비동기 처리가 완료될 때 then 함수가 실행됩니다.
Promise.all(imageGroupPromises)
// 요청이 성공하면 then 메서드 실행
// imageUrls 배열을 전달 받아 diaryInfoObj 객체 반환
.then(imageUrls => ({
...diary,
user: userUid,
createTime: createTime,
id: new Date().getTime(),
imagesUrl: imageUrls,
}))
// 반환된 diaryInfoObj 객체를 Firestore에 저장
.then(diaryInfoObj => {
addDoc(collection(dbService, 'diaryInfo'), diaryInfoObj)
})
// 오류가 발생한 경우 오류 처리
.catch(error => {
console.error('Error adding document:', error)
})
// 최종적으로 다이어리 초기화 및 /story 라우트로 이동
.finally(() => {
dispatch(resetDiary())
navigate('/story')
})
}가이드 파일
가이드 파일을 다운로드 받아 확인해보세요. 😃
qorbaxk
질문 작성자
백승연
문제 상황
원래는 사진을 추가할때 storage에 사진을 미리 저장하여 사진의 링크를 준비해놓고, 전송버튼을 눌렀을 때 링크를 문서필드에 추가하여 보내는 컬렉션에 추가하는 형식으로 코드를 짰었습니다.
멘토링 시간에 그렇게하면 storage를 과도하게 사용하고, 서버비용이 많이 들어간다는 조언을 듣고 수정하기로 했습니다.
사진을 추가할 때 storage에 등록하는 대신, submit 버튼을 누를때 storage에 저장하고 바로 그 링크를 따서 firestore에 저장하는 방식입니다.
하지만 전에도 질문했던대로 https://github.com/yamoo9/likelion-FEQA/issues/193#issue-1635035183 이때랑 비슷한 상황이라고 생각이 듭니다. 상태가 즉각적으로 처리되지 않기 때문에, 기존에 있던 값이 그냥 들어가는 것이라 생각이 됩니다.
그러나, useEffect를 사용하여 submit 버튼을 누르기도 전에 storage에 첨부하게 되면 코드를 바꾸기 이전과 다를바가 없다는 생각이 듭니다. 꼭 저 버튼을 눌렀을 때 storage에 저장하는게 이뤄져야 리팩토링 하는 의미가 있다고 생각합니다.
그치만 문제는 알지만 어떻게 해결해야할지 모르겠습니다.
콘솔로 찍어봤을 때는 배열에 잘 들어가있는 걸 볼 수 있는데,
파이어베이스에는 기본 값이 들어가있는 상태입니다. ㅠㅠ
프로젝트 저장소 URL
환경 정보