저번 글에 이어서 휠 이벤트(= 스크롤) 시 화면이 fadeInOut 이 되면서 페이지가 전환되게 구현해보았다. 구현 포인트마우스 휠 사용 시 fadeInOut 이 되면서 한 페이지 씩 넘어가기handleScrollVertical 함수handleScrollVertical함수는 useCallback을 통해 메모이제이션되므로, 동일한 함수 참조가 유지된다. ( useCallback을 사용 안 하면 컴포넌트가 리렌더링 될 때마다 handleScrollVertical 함수가 새로 생성된다. useEffect 내부의 클린업 함수가 이전 함수와 같은 참조를 가지지 않기 때문에 이벤트 리스너를 정확히 제거하지 못 할 수 있다.)event.deltaY값을 사용하여 사용자가 스크롤 하는 방향을 결정합니다 (event.d..

프로젝트 중 FullPage 스크롤 구현이 필요하여 라이브러리 없이 제작해보았다. 구현 포인트마우스 휠 사용 시 한 페이지 씩 넘어가기풀 페이지를 차지 하지 않는 footer까지 스크롤 가능하게 하기화면구조body 태그에 overflow-y: hidden; 속성을 주고 화면 높이 만큼을 가지고 있는 section 태그에 overflow-y: auto; (outer 클래스 명) 속성을 주어 사용자가 페이지 전체를 스크롤 하지 못하게 방지하며 outer 섹션 내부에서만 스크롤이 가능하게 한다.outer 섹션안에 fullPage를 만들고 싶은 화면 높이 만큼을 가지고 있는 section 들과 footer를 넣어준다. html  cssbody { overflow-y: hidd..

포스트 글이 길거나 블로그, 프로젝트 갯 수가 많아지면 스크롤이 발생해 상단 이동 버튼을 배치하는게 좋을 것 같아 추가해보았다. 상단 이동 버튼window.scrollTo(xpos, ypos, behavior:'auto'}) ****를 사용하면 원하는 위치로 이동 시킬 수 있다.behavior의 값에는 auto, instant, smooth가 있다. (문자이므로 따옴표가 필요하다.)auto는 기본 값이며, 바로 위치로 이동한다. instant도 같은 동작을 한다.smooth는 부드럽게 이동하는 애니메이션 효과를 보여준다.⇒ 부드럽게 상단 위치하기 위해서 클릭 시 window.scrollTo({ top: 0, behavior: "smooth" }); 실행되게 했다.import { useEffect, use..