Jeewhan / infinity-masonry

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

masonry layout

현재의 형태로 구현하기 전에 3가지 방법을 생각해보았었습니다.

column-width 활용

브라우저 지원율도 좋고 쉽고 빠르게 구현할 수 있지만, 사진의 순서가 원하는 방향과 맞지 않아 사용할 수 없었습니다

flex 활용

flex-wrap: wrap을 활용하면 원하는 순서대로 배치할 수 있습니다. 하지만 사진의 높이를 고정시킬 수 없을 경우 행의 높이가 가장 높은 사진에 맞춰지게 되어 원하는 레이아웃과 다르게 되어서 맞지 않았습니다.

grid 활용

grid를 활용하면 원하는 방식대로 구현할 수 있습니다. 그러나 개별 항목별로 높이를 조정해주려면 getBoundingClientRect 등을 사용하여 높이를 파악하여 그에 맞는 grid-row-end를 부여해주어야 하므로 제외하였습니다.

그래서 세로로 세 개의 열을 만들고, 그것을 flex로 배치한 뒤에, 각각의 열에 요소를 넣어주는 식으로 구현하게 되었습니다.

API fetch

CORS 문제를 해결하기 위해서 활용할 node 서버를 간단하게 만들게 되었습니다.

API를 Client에서 직접 활용하는 실제 결과물과 비교했을 때 이 과정에서 지연이 발생한다고 느꼈으나, same-origin 정책으로 인해 비교 실험은 해보지 못했습니다.

보안상의 이슈로 dotenv를 통해 URL을 환경변수에 주입해주도록 하였습니다.

그 외에는 node에서 제공하는 모듈들을 활용하였습니다.

Client V1

DOM이 그려진 시점인 DOMContentLoaded일 때 IntersectionObserver API를 활용하여 trigger를 구독하도록 하였습니다.

requestIdleCallback을 사용하여 main 함수를 적정한 시점에 호출하도록 하였습니다.

image lazyload도 IntersectionObserver로 구현했었습니다. 그러나 Chrome performance tab으로 확인해보았을 때, 퍼포먼스를 떨어뜨리는 결과가 나와 제거하게 되었습니다.

스크롤을 매우 빠르게 내리면 스크롤은 계속해서 내려가지만, 렌더가 그것을 못 따라가는 현상이 일어나게 되었습니다.

사용자 경험적으로 좋지 않다고 판단되어, 다른 방식으로 구현하기로 하였습니다.

Client V2

image onload와 document.createDocumentFragment를 활용하여 구현하였습니다. image onload가 늦어지게 되었을 때는 사용자가 기다리게 되지만 이 방향이 V1에 비해 보다 익숙한 경험일 것 같아 더 낫다고 판단하였습니다.

About


Languages

Language:JavaScript 75.8%Language:HTML 24.2%