🌞 2/14 내배캠 React 75일차

에러 모음

[ HEIF파일이 읽히지 않는 이슈, setState 비동기 이슈 ]

 

---

HEIF파일이 읽히지 않는 이슈

사진 파일을 넣어 테스트 하기 위해 내 파인더의 다운로드 폴더에 가장 상위에 있던 파일을 가져와 테스트를 진행 했다.

그런데 그 파일만 화면에 랜더링 되지 않았다.

하필 그 파일이 HEIF 파일이었다.

HEIF는 ‘고효율 비디오 압축’이라는 표준을 기반으로 하는 손실 압축 형식파일 이다. 그러다보니 화면에 랜더링이 되지 않는 이슈가 발생했다.

내가 사진이나 다른 파일을 업로드 하고 싶을 때, 허용하고 싶은 파일의 형식을 지정하고 싶다면 쓸 수 있는 코드가 있다.

input 테그 안에 들어있는 속성으로

 accept="image/png, image/jpeg, image/jpg"

라고 작성해주면 이미지를 업로드 할 때, png,jpeg,jpg 파일은 허용하고 나머지는 허용하지 않게 사용할 수 있다.

이런 식으로 HEIC파일은 주석처리가 되는 것을 볼 수 있다.

 

---

setState 비동기 이슈

이미지를 업로드 하고 firestore에 데이터를 입력하는 로직이다

순서대로라면 이미지URl을 받아 addDoc을 통해 firestore에 이미지url값이 담긴 상태로 저장 되어야 하지만 

콘솔창을 찍어봤을 때 dat에 url값이 담기지 않은 상태로 데이터가 추가가되고 난 후, url 값이 읽히는 모습을 볼 수 있다.

uploadBytes가 비동기 함수라 동기를 부여하기 위해 async await를 사용하여 문제를 해결하려 했지만 해결되지 않았다.

여기서 문제는 setImgUrl이라는 setState였다.

setState는  비동기 함수이기 때문에 코드를 순서대로 작성하였더라도 코드 실행은 자기 멋대로 실행될 것이다.

await를 했던 부분은 setState가 있는 스코프의 상위 스코프 이기 때문에 적용되지 않았다.

이걸 해결하기 위해선 콜백을 해준다거나 다른 방법이 있지만 나는 선언해놓은 객체에 spread문법를 이용하여 새 값을 추가하는 방식으로 문제를 해결 했다.

postState라는 변수를 스코프 바깥쪽에서 먼저 let을 통해 선언해주고, spread 문법을 통해 변동된 데이터 및 입력된 데이터를 추가해 주었다. 그 데이터를 그대로 onAddData라는 함수에 담아 firestore에 담기게 만들어 주었다.