[Week5] 윤소은 - 이미지 갤러리 최적화

[Dubabbi]

📚 이번 주 학습 내용

• 읽은 범위: 4장 이미지 갤러리 최적화

---

📝 정리한 내용

• 마크다운 파일 이름: image-gallery.md
• 주요 개념 정리
• 예시 코드 및 설명
• 기타 참고자료 (있는 경우)

---

💡 핵심 요약

• 이미지가 밀리는 현상을 방지하기 위해 이미지 크기를 미리 지정하여 CLS 점수를 낮추었습니다.
• react-lazyload를 이용해 이미지 지연 로딩을 구현하고, Intersection Observer API와의 차이점도 비교하였습니다.
• Redux의 불필요한 리렌더링 문제를 shallowEqual과 단일 값 분리로 최적화합니다.
• 고비용 연산 함수는 메모리제이션으로 성능을 개선하며, 캐시 활용 방식의 중요성을 확인합니다.

---

🤔 느낀 점 or 토의하고 싶은 부분

• 이미지의 시각적 레이아웃 안정성을 위한 aspect-ratio 속성과 padding-bottom 방식이 실제로 사용자 경험에 얼마나 큰 영향을 미치는지 체감했습니다.
• Redux 최적화 과정에서 객체 참조로 인한 리렌더링 이슈가 예상보다 흔하다는 점이 인상 깊었고, Zustand나 Recoil 등에서도 같은 패턴이 적용된다는 사실이 유익했습니다.
• 메모리제이션은 캐시 구조 설계와 메모리 사용량 간의 균형이 필요하다는 점에서 활용 기준을 고민하게 되었습니다.

---

✅ 기타

• (예: 다음 주 읽을 분량, 참고할 만한 리소스 링크, 이슈 등)