masonry layout 만들면서... 디바운스 & 스로틀, 라이브러리 참고

 

핀터레스트 스타일 레이아웃 만들기 (masonry) - 겁나 빠른 웹 레시피

CSS만으로 masonry-layout만들기

젤 첨보고 따라한곳. 하지만 이것은 문단을 나누는 개념의 디자인이었다.

내가원하는건 최근글이 가로로 차곡차곡 쌓이는것이었는데 이것은 한글에 다단나누기 처럼 세로로 나열되서 패스했다.

새로운 속성울 알게된걸로 좋게 생각하자!

 

---

 

 

 

핀터레스트(Masonry) 스타일 레이아웃을 만드는 세 가지 방법

JS로 masonry-layout만들기

가장 masonry layout에대해 코드설명이 잘 되어있는곳. 이곳의 3번째 예제를 참고해서 만들었다.

마지막거 설명 짤렸는데 만약 item이 마지막거라면 전체 둘러싸는 wrapper의 높이를 정해주는데

item들을 position: absolute; 로 위치를 지정해주기때문에 없으면 wrapper 높이는 작은데 item들이 튀어나가서 배치되어있는걸 볼수있다...ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

위 예제와 함께 두개의 라이브러리를 함께 써봤다.

imageLoaded, lodash의 throttle

 

https://sub0709.tistory.com/127

[javascript] 핀터레스트처럼 Masonry Layout 적용해보기

[unloaded image 처리] 부분을 참고하면된다.

unload image가 있는데 js를 실행시키면 이미지의 크기를 가져오지 못한상태에서 배치를 해버리는 상황이 생기기 때문에 배치가 이상해진다. 그래서 imageLoaded 라이브러리를 이용해서 이미지를 모두 가져온 다음에 js를 실행하도록 한다. DOM이 다 불러와진 뒤에 실행하기 바랄땐 onload를 사용하면 됐지만 이미지를 다 가져온 다음에 실행하기 위해선 이 라이브러리가 참 좋았다..

 

https://codepen.io/desandro/pen/vNrBGz unloaded image 가 어떻게 작동하는지 볼 수 있는 예제

https://github.com/desandro/imagesloaded imagesloaded 라이브러리 받는곳.

 

---

이걸 하면서 디바운스와 스로틀의 개념을 몰랐기에

먼저 개념공부를 했다.

 

디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점

대표님이랑 열심히 어떻게 작동하는건지 본것, 디바운스와 스로틀의 개념을 예제를 통해 설명 잘해준다.

 

[Javascript] Debounce & Throttle

이쪽 그림을 먼저봤으면 디바운스랑 스로틀 구분이 쉬웠을텐데.. 어쨋든 여것도 나중에 한번 봐보자

 

스로틀을 위해 받은 라이브러리 lodash 받는곳

lodash/lodash

 

 

 

 

 

 

---

 

이벤트 발생 제어하는법

[JS] 쓰로틀링(Throttling)과 디바운싱(Debouncing)

 

 

 

 

 

 

---

2022-10-31 추가

이벤트 루프, 콜스텍, 콜백 큐, 랜더 가 서로 어떻게 동작하는 지 알면 위 디바운스와 스토틀을 좋아하게 될거같아서

함께 링크를 남깁니다! 시각적으로 잘 보여주는 강의라 재밌게 봤습니다.

https://www.youtube.com/watch?v=8aGhZQkoFbQ