feat: 용어집 무한스크롤

[sensecodevalue]

Description

용어집 무한스크롤 구현

Help Wanted 👀

무한 스크롤 시점을 체크하는 마지막 요소에서 ref를 넣어 줍니다. 이때 3항 연산자를 통하여 넣어주도록 구현했습니다. 이부분을 더 깔끔하게 구현해보고자 여러 다르게 구현했지만 상위에 ref를 위한 테그를 만들거나 더 지저분해지는 느낌이 있어서 더 좋게, 더 깔끔하게 할 수 있는 아이디어가 있을까요?

Related Issues

resolve #109 fix #

Checklist ✋

• [x] 모든 변경점들을 확인했으며 적절히 설명했습니다.
• [x] 빌드가 정상적으로 수행됨을 확인했습니다. (yarn build)

[sensecodevalue]

 .../hooks/useIntersectionObserver.ts 에 대한 간략 설명 
 및 intersection observer API에 대한 간략 설명 입니다.

/*
  intersection observer를 생성하기 위해서는 생성자 호출 시 콜백 함수를 제공해야 합니다. 
  이 콜백 함수는 threshold가 한 방향 혹은 다른 방향으로 교차할 때 실행됩니다. 즉, 화면에 보여질때 호출하게 됩니다.
      - 그래서 해당부분에 setTimeout을 두어서 delay부분을 구현할 수 있습니다.
  
  생성시 Options 설명
  - root
    대상 객체의 가시성을 확인할 때 사용되는 뷰포트 요소입니다. 
    이는 대상 객체의 조상 요소여야 합니다. 
    기본값은 브라우저 뷰포트이며, 
    root 값이 null 이거나 지정되지 않을 때 기본값으로 설정됩니다.

  - rootMargin
    root 가 가진 여백입니다.
    이 속성의 값은 CSS의 margin 속성과 유사합니다. 
    e.g. "10px 20px 30px 40px" (top, right, bottom, left). 이 값은 퍼센티지가 될 수 있습니다. 
    이것은 root 요소의 각 측면의 bounding box를 수축시키거나 증가시키며, 
    교차성을 계산하기 전에 적용됩니다. 기본값은 0입니다.

  - threshold
    observer의 콜백이 실행될 대상 요소의 가시성 퍼센티지를 나타내는 단일 숫자 혹은 숫자 배열입니다. 
    만일 50%만큼 요소가 보여졌을 때를 탐지하고 싶다면, 값을 0.5로 설정하면 됩니다. 
    혹은 25% 단위로 요소의 가시성이 변경될 때마다 콜백이 실행되게 하고 싶다면 [0, 0.25, 0.5, 0.75, 1] 과 같은 배열을 설정하세요.
    기본값은 0이며(이는 요소가 1픽셀이라도 보이자 마자 콜백이 실행됨을 의미합니다). 1.0은 요소의 모든 픽셀이 화면에 노출되기 전에는 콜백을 실행시키지 않음을 의미합니다.

  - freezeOnceVisible ( .../hooks/useIntersectionObserver.ts 에서만 사용)
    해당 것으로 한번 보여 졌을 경우에만 Callback진행되도록
    ex) 하나의 Element의 교차가 중복되서 발생되어지지 않도록 방지하기 위해서 사용
*/

/*
    IntersectionObserverEntry 객체 설명

    IntersectionObserverEntry
    readonly boundingClientRect: DOMRectReadOnly; // 타겟 엘리먼트의 정보를 반환합니다. 
    readonly intersectionRatio: number; // IntersectionObserver 생성자의 options의 threshold와 비슷합니다. 교차 영역에 타겟 엘리먼트가 얼마나 교차되어 있는지(비율)에 대한 정보를 반환합니다. threshold와 같이 0.0부터 1.0 사이의 값을 반환합니다.
    readonly intersectionRect: DOMRectReadOnly; // 교차된 영역의 정보를 반환합니다.
    readonly isIntersecting: boolean; // 타겟 엘리먼트가 교차 영역에 있는 동안 true를 반환하고, 그 외의 경우 false를 반환합니다.
    readonly rootBounds: DOMRectReadOnly | null; // root 엘리먼트의 정보를 반환합니다. root를 선언하지 않았을 경우 null을 반환합니다.
    readonly target: Element; //  타겟 엘리먼트를 반환합니다.
    readonly time: DOMHighResTimeStamp; // 교차가 기록된 시간을 반환합니다.

*/

/*  
    보고 이거 뭐지 하는 간단 코드 설명
    new IntersectionObserver(callback, options) 
      callback부분에 useState를 활용하기 위해 updateEntry를 만들어 사용

    const hasIOSupport = !!window.IntersectionObserver; // !!사용이유 window.IntersectionObserver가 있으면 !일경우 false 반화 근데 !하나 더붙이면 true반환해서 이렇게 쓴다. 신기 방기
*/

[sensecodevalue]

"layer tree가 업데이트 될 때마다 table의 width 값이 계속 바뀌네요" 이슈 제외하고 모두 처리 완료했습니다.