https://github.com/toa-web-dev/onsplash
라이브러리 없이 구현하는 외부 API를 이용한 무한 스크롤링
https://github.com/toa-web-dev/onsplash
fetch-api intersectionobserver-api json
Last synced: 6 months ago
JSON representation
라이브러리 없이 구현하는 외부 API를 이용한 무한 스크롤링
- Host: GitHub
- URL: https://github.com/toa-web-dev/onsplash
- Owner: toa-web-dev
- Created: 2025-01-07T12:17:30.000Z (about 1 year ago)
- Default Branch: production
- Last Pushed: 2025-01-07T15:17:29.000Z (about 1 year ago)
- Last Synced: 2025-04-14T07:44:07.872Z (10 months ago)
- Topics: fetch-api, intersectionobserver-api, json
- Language: JavaScript
- Homepage: https://on-splash.vercel.app/
- Size: 15.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# 배포주소
https://on-splash.vercel.app/
## 사용 스택: Javascript, HTML, CSS
## 로직
이미지를 보여주는 피드(feed)요소가 있으며 스크롤을 내리면서 다음 이미지를 계속해서 볼 수 있습니다.
1. 피드에 최초로 렌더링 될 이미지를 위해 서버에 요청(HTTP request)합니다.
> 응답(response)를 처리하여
> 1. 응답헤더의 link에서 다음 요청을 위한 페이지네이션 URL을 추출하고,
> 2. 데이터를 JSON 처리해 피드에 이미지를 렌더링합니다.
2. 피드에 이미지가 렌더링 된 후, 가장 아래에 있는 이미지를 Intersection Observer(이하 IO)가 관측(observe)합니다.
3. 스크롤을 내리면 IO가 관측대상을 감지하고, 다음 url에 이미지를 요청하여 렌더링합니다.
4. 새로운 이미지가 렌더링 되면, 이미지를 담은 열(column) 중 가장 짧은 열의 마지막 이미지를 IO 새로 관측합니다.
5. 3번과 4번 이 반복되어 무한 스크롤이 작동합니다.
## 기술사항
1. 노트북,태블릿,모바일 크기에 따른 적응형 UI를 구현했습니다.
2. ```,``` 태그를 사용해 각 기기에 맞는 해상도의 이미지를 사용해 로딩 시간을 최적화 했습니다.
3. 사용자가 마지막 이미지를 보기 전에 미리, 새로운 이미지를 추가하여 스크롤을 자연스럽게 이어나갈 수 있도록 했습니다.
4. 로딩 중인 이미지에 스켈레톤 로더를 구현하고 이미지의 종횡비를 설정해 Cumulative Layout Shift (CLS)를 방지하고 이미지 배치를 자연스럽게 했습니다.
5. CSS는 가독성을 향상하고자 BEM 방식으로 작성하였습니다.
||기준너비(px)|피드의 사진 열 개수|
|:---:|:---:|:---:|
|노트북|1440|3|
|태블릿|768|2|
|모바일|425|1|
###