/*
selectImage - 로컬에서 이미지 URL을 뽑아오는 함수
saveImgToFirebaseStorage(2번 실행) - 로컬 이미지를 firebase storage에 저장 후 서버에서 이미지 URL을 뽑아오는 함수 (2번 반복 버그)
addPostData - 위의 함수와 동일
addPostData2 - Firebase Feed에 이미지와 함께 게시글을 저장
개발 순서
동기식인 배열에 url을 담고 -
배열에 url이 다 담기면 -
usestate 변수에 에 저장한다 -
useEffect로 값이 바뀌면 저장함수를 실행한다
// 이미지가 배열에 모두 저장되었으면 usestate에 배열 저장
// useEffect로 변경 시 addPostData2 실행
// 배열에 이미지 추가하는 중간에 usestate 변수에 저장한다면? -> usestate변수 저장하는 부분을 콘솔로 미리 찍어보자
storage에 저장하는 동안 반복문이 끝나버린다. foreach, for(i) 모두 똑같다.
-> storage에 url을 받아오면 바로 usestate 변수에 url을 추가한다.
-> useEffect에 감싸서 바뀔때마다 실행하도록 하고 usestate 변수의 개수가 localImgs의 갯수와 동일하면 addPost2 함수 실행
아이디어
storage에 저장하면서 바로 url을 받아오는 구문이 있지 않을까?
-> metadata에서 가져올 수 있는 함수가 있었는데 deprecated 된 것 같다
이슈
storage에서 url을 다운로드할 때 같은 이미지가 여러개 찍혀 나온다
-> 업로드를 완료 했을 때(.then)가 아닌 진행 중일 때(.on) url을 가져왔기 때문에 여러번 반복되었던 것이다..!
localImgs 변수를 let에서 useState로 바꾸었다. let array는 함수 내에서는 global 없이 전역 변수의 값을 수정할 수 없기 때문
그렇다면 비동기 문제가 발생하진 않는가?
확실히 발생했다. 저장 직후 배열을 콘솔에 찍으면 빈 배열이 반환된다 (비동기) but, 즉시 이미지를 업로드하는게 아니기 때문에 문제는 없다
useState로 serverImgs에 변경이 있을때마다 검사를 하도록 했다 (storage에서 url을 받아오기도 전에 게시글 업로드를 해버리기 때문 (비동기 이슈))
localImgs와 serverImgs 변수의 갯수를 비교해서 같으면 서버에서 모든 이미지 url을 가져왔다 판단하고 게시글을 업로드 하는 로직을 짰다
but, useState는 맨처음 한번 실행되기 때문에 if 문에 해당되어(두 변수 모두 0) 게시글을 작성해버리는 문제가 발생했다.
그래서 따로 selectedImgsLen 변수를 만들어 나중에(localImgs에 url이 모두 채워지면) 변수를 다시 업데이트 하는 식으로 문제를 해결했다.
여러 이미지를 선택 후 게시글 작성 버튼 클릭한 후 한번 더 아무 곳을 터치해야 글이 작성되고 화면이 넘어간다
함수는 정상 작동한다 하지만
addPostData 함수내에서 addPostData2 호출할경우 정상 작동한다 (이미지 선택하지 않은경우)
*/
/* selectImage - 로컬에서 이미지 URL을 뽑아오는 함수 saveImgToFirebaseStorage(2번 실행) - 로컬 이미지를 firebase storage에 저장 후 서버에서 이미지 URL을 뽑아오는 함수 (2번 반복 버그) addPostData - 위의 함수와 동일 addPostData2 - Firebase Feed에 이미지와 함께 게시글을 저장
개발 순서
useEffect로 값이 바뀌면 저장함수를 실행한다
// 이미지가 배열에 모두 저장되었으면 usestate에 배열 저장 // useEffect로 변경 시 addPostData2 실행
// 배열에 이미지 추가하는 중간에 usestate 변수에 저장한다면? -> usestate변수 저장하는 부분을 콘솔로 미리 찍어보자
// (선택) storage 저장시 오류 발생하면 raise넣기 + try로 묶어 에러처리
문제점
아이디어
storage에 저장하면서 바로 url을 받아오는 구문이 있지 않을까? -> metadata에서 가져올 수 있는 함수가 있었는데 deprecated 된 것 같다
이슈
storage에서 url을 다운로드할 때 같은 이미지가 여러개 찍혀 나온다 -> 업로드를 완료 했을 때(.then)가 아닌 진행 중일 때(.on) url을 가져왔기 때문에 여러번 반복되었던 것이다..!
localImgs 변수를 let에서 useState로 바꾸었다. let array는 함수 내에서는 global 없이 전역 변수의 값을 수정할 수 없기 때문 그렇다면 비동기 문제가 발생하진 않는가? 확실히 발생했다. 저장 직후 배열을 콘솔에 찍으면 빈 배열이 반환된다 (비동기) but, 즉시 이미지를 업로드하는게 아니기 때문에 문제는 없다
useState로 serverImgs에 변경이 있을때마다 검사를 하도록 했다 (storage에서 url을 받아오기도 전에 게시글 업로드를 해버리기 때문 (비동기 이슈)) localImgs와 serverImgs 변수의 갯수를 비교해서 같으면 서버에서 모든 이미지 url을 가져왔다 판단하고 게시글을 업로드 하는 로직을 짰다 but, useState는 맨처음 한번 실행되기 때문에 if 문에 해당되어(두 변수 모두 0) 게시글을 작성해버리는 문제가 발생했다. 그래서 따로 selectedImgsLen 변수를 만들어 나중에(localImgs에 url이 모두 채워지면) 변수를 다시 업데이트 하는 식으로 문제를 해결했다.
여러 이미지를 선택 후 게시글 작성 버튼 클릭한 후 한번 더 아무 곳을 터치해야 글이 작성되고 화면이 넘어간다 함수는 정상 작동한다 하지만 addPostData 함수내에서 addPostData2 호출할경우 정상 작동한다 (이미지 선택하지 않은경우) */