Muscardinus

Search bar에서 입력 시, input 변화에 따른 연다른 api 호출이 아닌 debounce(이번에는 lodash 라이브러리 사용)를 사용한 api 호출의 최소화로 구현 // unsplash : https://unsplash.com/documentation#search-photos // debounce : https://lodash.com/docs/4.17.15#debounce const accessKey = "hPyF-tz9tHnxeaoTwb7q0GTw10Wxwr85cD63lk7d7UE"; const input = document.querySelector('input'); const dropdownMenu = document.querySelector('.dropdown-menu'); const ..

Scroll의 위치에 따른 Nav의 배경 색 변화에 자주 사용한다. 첫 번째 방법 // 첫 번째 방법 // 스크롤 이벤트가 발생했을 때 // 현재 스크롤 위치를 가져온다. // 스크롤 위치를 바탕으로 active 클래스를 추가하거나 제거한다. // Write JS Code Here! window.addEventListener("scroll", (e) => { const top = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; (top >= 50) ? nav.classList.add("active") : nav.classList.remove("active") }); 두 ..

Vanilla JS 1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8 const navElem = document.querySelector("#nav"); const navItems = Array.from(navElem.children); const contentsElem = document.querySelector("#contents"); const contentItems = Array.from(contentsElem.children); const scrollSpyObserver = new IntersectionObserver( entries => { // 최초에는 observe가 다 되지만 // 추후에는 intersect가 되는 el, 이제 안 되는 el 두개만 나온다. const { targ..

Intersection Observer를 사용하여 끝부분이 intersect가 됐을때 Data를 새로 fetch하는 방식으로 하면 된다. 만약, Intersection을 사용하기 싫다면, debounce를 사용하는 것이 옳다고 생각한다. Throttle의 경우 일정 시간마다, fetch를 발생시킬 경우 불필요한 자원이 소비되기 때문에, 마지막 행위만 처리되는 debounce가 더 적합한거 같다. Vanilla JS const app = document.querySelector("#app"); const fetchMoreTrigger = document.querySelector("#fetchMore"); let page = 0; const fetchMore = async () => { const targe..