[Resthub#개발일지7] 이미지 늦게 로딩되는 현상 해결

냉장고의 이미지를 가져오는데 늦게 뜨는 현상이 발생한다.

해당 이미지를 불러오는 코드는

export const getFoodImage = async (image: string) => {
	const storage = getStorage(app);
	const imageRef = ref(storage, `cart/${image}`);
	return await getDownloadURL(imageRef);
};

처음에 데이터를 가져올 때 이미지 url이 저장되어 있지 않고 위와 같이 파일명이 저장되어있는데

storage에 저장된 사진 파일을 불러온다.

정리해서

이미지 url이 저장되어있지 않으므로 바로 이미지를 불러오는 게 아닌 다시 firebase에 요청해서 가져오므로 한 번 더 거치기 때문에  HTTP/2 in Action 스터디에서 배웠던 라운드 트립 지연 현상이 발생한 것을 알 수 있었다.

왜 이런 현상이 발생하는지 원인을 알았으므로 이를 해결하기 위해 바로 이미지 URL을 가져오는 방법은 없을까?

파일들의 URL을 확인해보니 파일명 외에는 URL이 같은 것을 확인할 수 있었다.

그렇다면 초기에 image에 대한 정보를 저장할 때 파일명만 저장하는 것이 아닌 불러오는 URL + 파일명을 저장해두면 따로 storage에서 이미지 URL을 다운로드 받는 일을 거치지 않아도 된다.

export const getFoodImage = (image: string) => {
	return `https://firebasestorage.googleapis.com/.../%2F${image}?alt=media`;
};

...은 길어서 요약했다.

이렇게 하니까

처음에 불러오는 속도가 좀 더 빨라진 걸 확인할 수 있다.

페이지가 로딩될 때 스피너를 넣어서 로딩상태 보여주고 이미지(데이터)가 다 로딩된 후에 불러오도록 바꿔준다면 유저가 이미지 로딩되는 화면을 보고 기다릴 필요가 없을 거 같다. UX개선은 추후에 하는 걸로