이미지를 보여주는 피드(feed)요소가 있으며 스크롤을 내리면서 다음 이미지를 계속해서 볼 수 있습니다.
- 피드에 최초로 렌더링 될 이미지를 위해 서버에 요청(HTTP request)합니다.
응답(response)를 처리하여
- 응답헤더의 link에서 다음 요청을 위한 페이지네이션 URL을 추출하고,
- 데이터를 JSON 처리해 피드에 이미지를 렌더링합니다.
- 피드에 이미지가 렌더링 된 후, 가장 아래에 있는 이미지를 Intersection Observer(이하 IO)가 관측(observe)합니다.
- 스크롤을 내리면 IO가 관측대상을 감지하고, 다음 url에 이미지를 요청하여 렌더링합니다.
- 새로운 이미지가 렌더링 되면, 이미지를 담은 열(column) 중 가장 짧은 열의 마지막 이미지를 IO 새로 관측합니다.
- 3번과 4번 이 반복되어 무한 스크롤이 작동합니다.
- 노트북,태블릿,모바일 크기에 따른 적응형 UI를 구현했습니다.
<picture>,<source>태그를 사용해 각 기기에 맞는 해상도의 이미지를 사용해 로딩 시간을 최적화 했습니다.- 사용자가 마지막 이미지를 보기 전에 미리, 새로운 이미지를 추가하여 스크롤을 자연스럽게 이어나갈 수 있도록 했습니다.
- 로딩 중인 이미지에 스켈레톤 로더를 구현하고 이미지의 종횡비를 설정해 Cumulative Layout Shift (CLS)를 방지하고 이미지 배치를 자연스럽게 했습니다.
- CSS는 가독성을 향상하고자 BEM 방식으로 작성하였습니다.
| 기준너비(px) | 피드의 사진 열 개수 | |
|---|---|---|
| 노트북 | 1440 | 3 |
| 태블릿 | 768 | 2 |
| 모바일 | 425 | 1 |