lazy loading

[joshyeom]

Motivations 😀

• post조회할때 lazy loading 구현했슴다

• 문제는 해당 이미지를 base64로 인코딩한 문자열을 blurDataURL에 넣어줘야하는데 우리는 파이어베이스에 이미지를 저장해놓고 쓰기 때문에 직접적인 이미지 파일이 아니라 base64로 인코딩해도 해당 이미지를 읽지 못하는 오류가 있었슴다

• 방법은 base64로 인코딩한 문자도 firebase에 같이 저장해서 해당 이미지를 불러오게 해야하는데 이러면 백에서도 추가로 응답 메서드를 넣어야 하고 저도 프론트코드를 손보면 시간이 더 걸리기 때문에 해당 기능을 구현했다는거에 만족하겠습니다. ㅎㅎ

• Image 컴포넌츠에 loading="lazy"을 넣어 lazy loading을 하게끔 설정을 하고
  placeholder="blur"로 이미지가 로드 안되었을때 blur이미지를 불러오게끔 설정 후 blurDataURL="base64이미지 문자" base64로 인코딩된 문자를 넣어주면 됩니다.

• 이 3개만하면 나도 lazy loading 마스터...?
  ​

key Changes 🤩

• ​이미지 lazy loading 구현
  ​

To Reviewers 😎

• ​다음에는 컴포넌츠도 lazy loading 해보고싶네여