{"id":27409236,"url":"https://github.com/toa-web-dev/onsplash","last_synced_at":"2026-04-19T07:31:21.832Z","repository":{"id":287835220,"uuid":"913299326","full_name":"toa-web-dev/onsplash","owner":"toa-web-dev","description":"라이브러리 없이 구현하는 외부 API를 이용한 무한 스크롤링 ","archived":false,"fork":false,"pushed_at":"2025-01-07T15:17:29.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"production","last_synced_at":"2025-07-31T14:27:30.316Z","etag":null,"topics":["fetch-api","intersectionobserver-api","json"],"latest_commit_sha":null,"homepage":"https://on-splash.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/toa-web-dev.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-07T12:17:30.000Z","updated_at":"2025-01-07T15:20:08.000Z","dependencies_parsed_at":"2025-04-14T07:44:09.255Z","dependency_job_id":"94df645a-97e4-4a94-a6de-9a6d27201dce","html_url":"https://github.com/toa-web-dev/onsplash","commit_stats":null,"previous_names":["toa-web-dev/onsplash"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/toa-web-dev/onsplash","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toa-web-dev%2Fonsplash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toa-web-dev%2Fonsplash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toa-web-dev%2Fonsplash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toa-web-dev%2Fonsplash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toa-web-dev","download_url":"https://codeload.github.com/toa-web-dev/onsplash/tar.gz/refs/heads/production","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toa-web-dev%2Fonsplash/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31998792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fetch-api","intersectionobserver-api","json"],"created_at":"2025-04-14T07:24:25.671Z","updated_at":"2026-04-19T07:31:21.814Z","avatar_url":"https://github.com/toa-web-dev.png","language":"JavaScript","readme":"# 배포주소\nhttps://on-splash.vercel.app/\n\n## 사용 스택: Javascript, HTML, CSS\n\n## 로직\n이미지를 보여주는 피드(feed)요소가 있으며 스크롤을 내리면서 다음 이미지를 계속해서 볼 수 있습니다.\n\n1. 피드에 최초로 렌더링 될 이미지를 위해 서버에 요청(HTTP request)합니다.\n\u003e 응답(response)를 처리하여\n\u003e  1. 응답헤더의 link에서 다음 요청을 위한 페이지네이션 URL을 추출하고,\n\u003e  2. 데이터를 JSON 처리해 피드에 이미지를 렌더링합니다.\n    \u003cbr/\u003e\n2. 피드에 이미지가 렌더링 된 후, 가장 아래에 있는 이미지를 Intersection Observer(이하 IO)가 관측(observe)합니다.\n3. 스크롤을 내리면 IO가 관측대상을 감지하고, 다음 url에 이미지를 요청하여 렌더링합니다.\n4. 새로운 이미지가 렌더링 되면, 이미지를 담은 열(column) 중 가장 짧은 열의 마지막 이미지를 IO 새로 관측합니다.\n5. 3번과 4번 이 반복되어 무한 스크롤이 작동합니다.\n\n\n## 기술사항\n1. 노트북,태블릿,모바일 크기에 따른 적응형 UI를 구현했습니다.\n2. ```\u003cpicture\u003e,\u003csource\u003e``` 태그를 사용해 각 기기에 맞는 해상도의 이미지를 사용해 로딩 시간을 최적화 했습니다.\n3. 사용자가 마지막 이미지를 보기 전에 미리, 새로운 이미지를 추가하여 스크롤을 자연스럽게 이어나갈 수 있도록 했습니다.\n4. 로딩 중인 이미지에 스켈레톤 로더를 구현하고 이미지의 종횡비를 설정해 Cumulative Layout Shift (CLS)를 방지하고 이미지 배치를 자연스럽게 했습니다.\n5. CSS는 가독성을 향상하고자 BEM 방식으로 작성하였습니다.\n\n||기준너비(px)|피드의 사진 열 개수|\n|:---:|:---:|:---:|\n|노트북|1440|3|\n|태블릿|768|2|\n|모바일|425|1|\n\n\n###\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoa-web-dev%2Fonsplash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoa-web-dev%2Fonsplash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoa-web-dev%2Fonsplash/lists"}