# scroll event
(React) 무한 스크롤 기능 구현하기 : used by Intersection Observer - 1
원티드 온보딩 프로그램 2주차가 끝났다. 이번 주에 해결한 2개의 과제 중에 내가 구현하고 싶었지만, 팀원에게 기회를 양보한 기능이 있었다. 유튜브 등 많은 웹 페이지에서 무한 스크롤 기능을 레이지 로딩과 함께 구현하고 있는데 이 부분을 구현해보면 재밌겠다 싶어서 주말을 이용해서 기능을 구현해 보았다. Infinity Scroll(무한 스크롤) [이미지 출처](https://leehyungi0622.github.io/2021/06/02/202106/210602-infinite_scroll
JavaScript - 스크롤 이벤트 throttle 적용하기
스크롤 이벤트 자바스크립트로 채팅기능을 구현중에 스크롤을 올리면 일정 높이에 다다르면 이전 채팅기록을 불러오게 만들었습니다. 그런데 이벤트가 너무 많이 발생해서 lodash에 throttle을 사용하려 합니다. 쓰로틀이란? 쓰로틀(throttle)이란 연속되는 이벤트의 과부화를 막기 위해 일정시간마다 호출되도록 도와주는 메서드입니다. 이를 사용하기 위해선 lodash를 먼저 설치해야 합니다. lodash를 import 해옵니다. _에서 꺼내 씁니다. 
Scroll Event vs IntersectionObserver
Scroll Event? DOM의 스크롤 이벤트로 ‘현재 스크롤 한 길이’와 ‘전체 페이지 길이’를 비교해서 추가적인 요소를 불러오는 방법 IntersectionObserver 타겟 요소를 정해서 그 요소가 화면에 보이게 되면 추가적인 요소를 불러오는 방법 Scroll Event 단점? Scroll Event는 전체적인 스크롤에 반응한다. 이는 성능적으로 비효율적이다. 자 그럼 어떤 성능적 비효율이 있나? > 스크롤 이벤트에 쓰이는 documentElement.scrollTop과 documentElement.offsetHeight는 reflow를 일으켜서 성능상 좋지 않다. > “reflow”는 모든 엘리먼트의 위치와 길이 등을 다시 계산하는 것으로 문서의 일부 혹은 전체를 다시 렌더링한다. [출처]https://woong-jae.com/gatsby/210824-infinite-scroll
[JS]Passing arguments to event handlers, The Intersection Observer API
강의 출처 : The Complete JavaScript Course 2022 Jonas (Udemy) Passing Arguments to Event Handlers event handler에 event 이외의 추가 인자를 넣어야하는 상황 해결하기 + Refactoring 꿀팁(흔한 로직) > 1. 반복적인 코드를 함수로 만든다. 반복되지 않는 부분을 인자로 받는다. ex) opacity but! eventHandler 함수는 e 만을 인자로 받음! callback 함수를 bind로 묶어주고 그 안의 인자에 opacity넣어주기. bind함수는 그 인자에 this를 부여한다. Menu fade animation The Scroll Event Implementing a Sticky Navigation 참고) scroll event는 되도록 쓰지 않는 것이 좋음. 너무 빈번하게 일어나므로. The Intersection Ob
211028_스크롤 시 이미지가 나타나고 확대되는 효과
스크롤 속성 정리 페이지 개인적인 사이드 프로젝트를 준비중인데, 스크롤을 이용한 이벤트들을 구현 예정이다. 그 중의 한가지는 스크롤을 내림에 따라 원형이 나타나며 점점 화면을 가득 채우는 사이즈로 커지고, 다음 컨텐츠가 그 화면을 배경으로 자연스럽게 나타나는 효과이다. (넘 멋진 애플의 아이폰 se 페이지!) window 객체의 스크롤 이벤트를 사용하면 되겠다 하고 어렴풋이 생각했지만 구체적인 방법을 더 알아보았다. 구현 방법 기본적으로, 변화시킬 요소의 스타일 값을 useState를 이용해 상태로 저장하고, 위의 속성들을 이용해 현재까지의 스크롤 상태를 구한 후, if절을 통해 변화시키고 싶
[TIL🔥] Day23(9/8)
Introduction 오늘은 무한 스크롤 UI를 구현하는 방법에 대해 배웠다. 어려울 것 같다고 생각했는데 바닐라 JS를 반복해서 쓰니 훨씬 빠르고 쉽게 이해할 수 있었다...이게 다 3주간의 고생이 있었기 때문에 가능하다고 생각한다. 프로그래머스 KDT 최고 > 오늘 새롭게 배운 것 > * 무한 스크롤 Ul 구현하기 * Scroll Event 방식 Intersection Observer 방식 📌 무한 스크롤 UI 무한 스크롤이란? 컨텐츠를 페이징하는 기법으로, 아래로 스크롤을 내리다가 마지막 요소를 볼 때쯤에 다음 컨텐츠를 불러오는 방식을 말한다. 무
W1 - 기술정리 | Intersection Observer
Intersection Observer > The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. > > by MDN target element와 ancestor element 또는 top-level document's viewport 사이의 교차지점(intersection)의 변화를 비동기적으로 관찰(observe)하는 기능을 제공한다고 한다. 언제 필요할까? 다음과 같이 대표적인 4가지 문제를 해결하는 데 도움이 된다. > 1. Lazy-l
react 스크롤시 네비게이션 변환
진행하고 있는 빵덕 프로젝트의 테마상세 페이지에서 스크롤시 네비게이션바의 색이 변환하는 디자인이 나왔다. 스크롤 위치를 어떻게확인할까 고민을 하다가 IntersectionObserver를 사용하기로 하였다. 1. 태그위치 확인하기 1.eEffect안에 IntersectionObserver로 ref를 감지하도록 하고 태그가 화면에 나옴과 동시에 isIntersecting의 true라면 console을 찍을수 있게하여 확인하였다. 2.섹션별로 IntersectionObserver가 필요해보여서 여러개를 만드려니 코드가 지저분해질것같아 customHook으로 만들어야곘다는 생각을 하였다. 2. 커스텀훅으로 빼기 커스텀훅안에 state번호를 지정하여 번호의 값으로 네비게이션바를
COINSS: React Custom Hooks로 Scroll Event 구현하기
Scroll Event를 Custom Hook으로 만들었던 방법에 대해 설명 하겠습니다. 일반적인 Scroll Event 일반적으로 Scroll Event를 감지하기 위해서는 addEventListener('scroll', [event함수])을 이용하면 됩니다. 변경할 DOM을 설정하고(document.querySelector()) 이벤트리스너로 변경시켜주면 쉽게 페이지가 변경될때 마다 데이터를 변경시킬 수 있습니다. 이를 React에 적용해 보면 이럴것입니다. 주의! React 성능을 생각안하고 대충 쓴 코드입니다. 실제로는 useEffect를 사용해서 side Effect를 수행시켜줘야 합니다. 
scroll 값으로 opacity 값 비율구하기
1. scroll 값으로 opacity 값 비율구하기 > 대표적으로 애플사이트에서 scroll값을 이용해 다양한 효과를 연출하는 것을 볼 수 있다. ( 멋지다, 이쁘다..) scroll값으로 opacity 값 비율 0~1 까지의 범위를 구하는 법을 알아보도록 하겠습니다. 1-1) section 내에서 opacity 값 비율 구하기 만약 위와 같이 4개의 섹션이 존재하고, section 2에서 scroll위치 값을 이용해서 opacity값을 구하는데 section 2가 시작될때 opacity값이 0 ~ 1 까지 점점 증가하게 하거나 줄어들게 하려면 어떻게 해야할까?? 1-2) section 2에서 비율 구하기 1-2-1) 범위가 0~1인
TIL#8 React에서 Scroll event 사용하기
웹페이지에서 공통으로 사용되는 Nav 컴포넌트를 만들어서 모든 페이지에 적용하기로 했다. 모든 페이지에서 공통 컴포넌트 넣기 모든 페이지에서 공통으로 사용하기 위해서 매번 페이지마다 ``를 입력할 필요없이 Routes.js 파일에서 하기와 같이 적용시 모든 페이지에서 적용이 된다. 컴포넌트로 분리된 것에 페이지 scroll event 발생하기 Nav conponent를 scroll위치에 따라 다르게 표현하고 싶어서 하기와 같이 코드를 정리하였습니다. 하기와 같이 코드 작성시, 부모가 되는 컴포넌트로 부터 따로 scroll 위치를 받지 않지 않아도 window.pageYOffset 로 가져올 수 있습니다.
TIL 89 | dimmed 영역 스크롤 막기
modal(popup) 에서 외부(body or parentElement) 스크롤 막기 Disable Scrolling with JavaScript 햄버거 버튼을 눌렀을때 사이드에서 네비게이션 모달이 나오는 페이지의 형태는 쉽게 찾아볼 수 있다. 이때 사용성을 위해서 모달창은 스크롤이 가능하지만(화면보다 네비게이션의 높이가 긴 경우), 그 외에 dimmed 영역은 스크롤이나 터치 이벤트가 불가능하게 하는 것이 좋다. disableScroll 아래의 코드는 간단하