JS - intersection observer, 커스텀 이벤트

무한 스크롤기능에서 이미지 지연로딩을 위해 사용된다.

이미지가 많을 때 한번에 로딩하면 이미지가 현재 화면에서는 점차 로딩되어지는게 보여지고

보이지않는 마지막 이미지만 로딩이  완료되어버리면 사용자 ui 경험에 좋지않은 영향을 준다.

 

직접 글을 작성하려고 했으나 아래 링크에서 잘 정리되어있어서 링크를 블로그에 저장한다.

 

https://heropy.blog/2019/10/27/intersection-observer/

Intersection Observer - 요소의 가시성 관찰

 

 

무한스크롤을 이용해서 이미지를 지연로딩 할 때 커스텀 이벤트를 사용했다.

근데 CustomEvent와 Event 라는 두가지 커스텀이벤트가 존재했다.

그래서 커스텀 이벤트를 다시 공부해야했다..ㅠㅠ

https://mong-blog.tistory.com/entry/JS-%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%A5%BC-%EB%A7%8C%EB%93%9C%EB%8A%94-2%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95Event-CustomEvent

[JS] 커스텀 이벤트를 만드는 2가지 방법(Event, CustomEvent)

 

이전에는 커스텀이벤트를 window(전역)에 설정해놓고 dispatch로 이벤트를 등록해 만약 이벤트가 발생하면 내가 원하는 로직을 수행하도록 했다.

 

아래 로직을 다시 한번 봐보자

//커스텀 이벤트는 키같은 것이 반복되고 잘못 쓸 수 있기 때문에 별도로 만듦
const ROUTE_CHANGE_EVENT_NAME = "route-change";

export const initRouter = (onRoute) => {
  //커스텀 이벤트 사용방법
  //window내의 dispatch이벤트가 발행하면
  //Event로 된 데이터를 받아온다.

  window.addEventListener(ROUTE_CHANGE_EVENT_NAME, (e) => {
    //클릭한 post데이터의 id를 받아와서 해당 url로 바꿔주고, route 실행
    const { nextUrl } = e.detail;

    if (nextUrl) {
      history.pushState(null, null, nextUrl);
      onRoute(); // 콜백으로 해줘야 this.route로 url에 따라 이동가능
    }
  });
};

export const push = (nextUrl) => {
  //커스텀 이벤트 사용방법
  //꼭 new CustomEvent로 설정해야 detail에 id값이 들어감
  window.dispatchEvent(
    new CustomEvent(ROUTE_CHANGE_EVENT_NAME, {
      detail: { nextUrl },
    })
  );
};

 

위처럼 커스텀 이벤트를 사용할 환경을 만든다.

 

그리고 window에 이벤트를 등록하도록 아래 명령어를 실행한다.

그럼 window에 "route-change" 라는 이름의 이벤트가 등록된다.

 initRouter(() => this.route());

그리고 아래와 같이 사용하면 된다.

push(`${e.target.id}`);

 

이해가 안가니까 쉽게 작성해보자

 

먼저 push로 이벤트가 어딘가에서 수행되면 

-> push에서는 Custom이벤트를 "route-change"라는 이름으로 만들어서 바로 dispatch로 호출한다.

-> 그럼 initRouter로 등록된 이벤트가 받아온 detail데이터를 가공하고, 로직을 수행한 후 인수로 받아온 함수를 실행해서 라우팅을 하는 것이다.

 

위 로직은 바닐라JS로 수행한 로직이다

까먹은 것 같아서 다시 리마인딩하기 위해 작성해보았다.