고니의 개발 일지📚

- 리액트에서 스크롤 시 FadeIn 효과로 서서히 대상이 나타나는 애니메이션을 만드는 방법을 알아보자. - 애니메이션을 만들때 Intersection Observer를 사용하면 과부하를 방지할 수 있다. Intersection Observer API Intersection Observer API는 대상 요소와 상위 요소 또는 최상위 문서 뷰포트의 교차점에서의 변화를 비동기적으로 관찰할 수 있는 방법을 제공합니다. 지금까지 요소의 가시성 또는 두 요소의 상대적 가시성을 감지하는 것은 어려운 작업이었으며, 솔루션이 안정적이지 않아 브라우저와 사용자가 액세스하는 사이트가 느려지기 쉬웠습니다. 웹이 발전함에 따라 이러한 종류의 정보에 대한 필요성이 커졌습니다. 교차점 정보는 다음과 같은 여러 가지 이유로 필요..

경주의 명소를 소개하는 토이프로젝트를 진행하는데 주제가 맛집 탐방, 야간 명소, 한옥 호텔로 총 3가지였다. 라우팅 하기에는 데이터가 적어서 한 화면에 컴포넌트를 모두 띄우는 대신, 메인 배너에서 버튼을 누르면 해당 컴포넌트로 이동하는 스크롤 기능을 만들고 싶어 찾아보다가 유용한 정보를 발견했다! useMoveScroll.ts import { useRef } from "react"; const useMoveScroll = () => { const element = useRef(null); const onMoveToElement = () => { element.current?.scrollIntoView({ behavior: "smooth", block: "start" }); }; return { eleme..