# IntersectionObserver
IntersectionObserver 활용하기
랜딩페이지 작업 중 특정 색션에 접근 시 애니메이션이 발생하도록 구현해야 했고 IntersectionObserver 을 활용해 구현했습니다. 구현한 간단한 과정을 남겨봅니다.
useInfiniteQuery 로 무한스크롤 구현하기-(1)
관리자 페이지에서 정보 수정요청과 새 장소 신청 요청 각각 무한스크롤로 정보를 받아와야 했다. react-query로 비동기 관리를 했기 때문에 useInfiniteQuery를 이용하기로 했다. 무한스크롤 필요한 용어 IntersectionObserver로 바닥
무한스크롤 구현하기(useInfiniteQuery, 커서 기반 페이지네이션)
팀바팀의 팀 피드 기능에 무한스크롤 기능이 있어서 구현해보았다. 사실 이 기능은 레벨3때 구현했는데 레벨4와서 요구사항이 바뀌는 바람에.. 정방향 무한스크롤(아래로 스크롤 할 때 무한스크롤)과 역방향 무한스크롤(위로 스크롤 할 때 무한스크롤) 둘다 구현하는 경험을
ChatGPT를 활용해서 InfiniteScroll 개발한 후기
ChatpGPT 그거 어떻게 써? 써도 괜찮은거야? 주니어 개발자의 첫 ChatGPT 사용기
[react] 무한스크롤 2(with IntersectionObserver)
이전에 무한스크롤을 구현했으나, 스크롤이 없으면 기능이 제대로 작동하지 않는 에러를 발견했다. 디폴트로 10개씩의 아티스트 리스트를 불러오는데, 20개를 불러오는것으로 간단하게 해결하고 싶은 마음이 들 정도로 쌩고생을 했는데😭 결국 해냈다.큰 모니터(스크롤이 안생김)
[React,Next.js] 서버사이드 렌더링(SSR + SSG), 무한스크롤(useSWRInfinite, IntersectionObserver), 로컬스토리지( localStorage)
개요 Next.js에서 SSR + SSG로 외부 API로 데이터를 받아온 후 로드를 한 이후에 IntersectionObserver로 div를 감지한 후 무한스크롤을 적용시키고 받아온 데이터를 클릭했을떄 세부 페이지로 이동 후 뒤로갔을때 마지막으로 스크롤 한 위치로
개념/ IntersectionObserver
스크롤을 하는 방법 IntersectionObserver없이height를 적당히 잡고 scroll event를 받아서 scroll될때마다 heigth조건을 계속검사해주면서 페이지를 내린다 단점 : 계속 검사해야함 , 브라우저마다 오차발생 new IntersectionO
Intersection Observer API를 통한 무한 스크롤 구현 ( feat. React + typescript )
Intersection Observer API는 타겟 요소와 상위 요소또는 최상위 document의 viewport 사이의 intersection 내의 변화를 비동기적으로 관한하는 방법입니다...
[글마디 프로젝트] 반응형 UI 구현 회고
글마디 웹사이트를 데스크탑뿐만 아니라 태블릿, 모바일 환경에서도 쾌적하게 사용할 수 있도록 반응형 UI를 구현한 회고입니다.지금까지 글마디 프로젝트는 데스크탑 환경을 기준으로 UI를 설계하고 작업해왔습니다.처음부터 css flexbox와 rem 단위를 적극적으로 활용하
[Javascript] custom hook과 IntersectionObserver API 로 무한 스크롤 구현하기
풀스택과 관련된 어떤 강의를 시청하면서 custom hook을 생성하여 IntersectionObserver() 생성자와 함께 사용하여 50개 이상의 메세지 컨텐츠 데이터들을 특정 개수 단위로 잘라서 스크롤을 내릴 때마다 호출되도록 하는 일명 무한 스크롤(Infini
[React] 무한스크롤 (IntersectionObserver)
응애 개발자 국룰코스 영화 및 책 검색 사이트를 만드는 중 무한 스크롤 기능을 구현해보았다.업로드중..여러가지 방법이 있었지만 intersectionObsercer라는 api를 사용하는 방법을 택했다(사실 handleScroll이벤트와 throttle로직을 이용해 구현
[CSS, JavaScript] 스크롤을 내리면 흔들리는 버튼 만들기
지나가다 본 요소를 클론 코딩해보았다💡 스크롤을 내려서 화면에 보이면 흔들리는 버튼을 만들어보자.
웹뷰 최적화 만점을 위한 노력 -2-(IntersectionObserver, Token provider, Prefetch, font, Lcp, Lighthouse)
개선 후 개선 전 > 만점에 가까운 라이트 하우스 점수 쨖쨖 👏 어니언은 앱 서비스이지만, 웹의 장점이 필요한 페이지는 vue를 이용하여 웹으로 구성되어 있다. 그렇기에 앱에서 웹뷰 페이지를 로드할 경우 이질감 없이 로드하여 서비스를 제공하여야 하기 때문에
Intersection Observer API
https://heropy.blog/2019/10/27/intersection-observer/https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC
무한스크롤(2), URL 과 IntersectionObserver API [TOY / Simple-SNS]
현재 "Simple SNS" 프로젝트는 axios 라이브러리를 이용하여 클라이언트에서 서버로 데이터를 요청하여 받고 있다. 하지만 XMLHTTPrequest나 fetch를 사용할 때도 마찬가지로 서버에 요청을 하기 위해서는 우선 서버 URL이 필요하다.
[React] useIntersectionObserver(+once) custom hook
이 글은 설명글이 아닌 뷰포트 내에 Element의 교차점을 관찰하여 애니메이션 동작 여부를 결정할 때 사용하기 적합한 IntersectionObserver custom hook을 제공하는 글입니다.우리는 IntersectionObserver를 아래와 같은 상황에 자주
