feat: 용어집 무한스크롤 #136

sensecodevalue · 2021-09-05T10:29:44Z

Description

용어집 무한스크롤 구현

Help Wanted 👀

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

Related Issues

resolve #109
fix #

Checklist ✋

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

…s-handbook into feature/109

sensecodevalue · 2021-09-10T17:04:20Z

 .../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반환해서 이렇게 쓴다. 신기 방기
*/

…he IntersectionObserver.

…re, useIntersectionObserver was changed to return ref

…s-handbook into feature/109

uoon-dev · 2021-10-08T11:00:34Z

src/hooks/useIntersectionObserver.ts

+
+  useEffect(() => {
+    const node = ref?.current; // DOM Ref
+    const hasIOSupport = !!window.IntersectionObserver;


intersection-observer 플러그인을 import 해주셔서 폴리필 미지원으로 인한 이슈는 없을 것 같은데 해당 조건이 필요한 케이스가 있을까용?

없을 것으로 보입니다! 제거하는게 좋아보입니다!

uoon-dev · 2021-10-08T11:00:57Z

src/hooks/useIntersectionObserver.ts

+  return { ref, entry };
+}
+
+export default useIntersectionObserver;


so 깔끔한 훅이네요! 굿굿

uoon-dev · 2021-10-08T11:01:29Z

src/hooks/useIntersectionObserver.ts

+  const ref = useRef<HTMLFormElement | null>(null);
+  const [entry, setEntry] = useState<IntersectionObserverEntry>();
+
+  const frozen = entry?.isIntersecting && freezeOnceVisible;


boolean type 지정이 있으면 좋을 것 같아요!

넵! 타입지정!

uoon-dev · 2021-10-08T11:22:19Z

src/hooks/useInfiniteScroll.ts

+    const startIdx = 0;
+    const endIdx = currentOffest;
+    return source.slice(startIdx, endIdx);
+  };


타입 지정되면 좋을 것 같아요~

넵! 타입지정!

uoon-dev · 2021-10-08T11:25:21Z

src/hooks/useInfiniteScroll.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+const usePagination = ({ source = [], limit = 10, offset = 0 }) => {


Prop에 대해 interface를 정의하고 각 prop에 대한 설명이 있으면 좋을 것 같아요 :)

interface Props { source limit offset }

이부분은 생각지 못했는데 감사합니다! 설명!

uoon-dev · 2021-10-08T11:26:37Z

src/hooks/useInfiniteScroll.ts

+    return source.slice(startIdx, endIdx);
+  };
+
+  const getMaxOffset = () => {


return type도 명시되면 좋을 것 같습니다 ㅎㅎ

Suggested change

const getMaxOffset = () => {

const getMaxOffset = (): number => {

넵! 타입지정!!!@!

uoon-dev · 2021-10-08T11:33:31Z

src/hooks/useInfiniteScroll.ts

+    return source.length;
+  };
+
+  const [currentOffest, setCurrentOffest] = useState(limit);


state generic에는 type 지정을 해주는 게 좋아요 :) 지금은 limit 값으로 초기화를 해줘서 typescript가 setCurrentOffest() 함수를 썼을 때 number 타입 이외에 다른 값이 들어가지 않게 추론을 해주긴 하지만 IDE 환경에 의존해야 하는 부분이 있거든요. 초기화를 안했을 경우에는 어떤 타입으로 할당해야 하는지 추론이 안되구요 ㅎㅎ 그래서 일관성을 위해 다음처럼 작성하면 좋습니당!

Suggested change

const [currentOffest, setCurrentOffest] = useState(limit);

const [currentOffest, setCurrentOffest] = useState<number>(limit);

넵! 타입지정을 자꾸 빼먹고 작성을하게 되네용! 꼭 기억하겠습니다!

uoon-dev · 2021-10-08T11:45:57Z

src/components/WikiTable/WikiTable.tsx

+              {...word}
+              last={getLastRow(index)}
+              onNext={onNext}
+            />


layer tree가 업데이트 될 때마다 table의 width 값이 계속 바뀌네요 ㅎㅎㅠ 새로 추가되는 콘텐츠에 따라 기존에 있던 table의 너비가 달라지니 당연한 거긴 한데 사용자 경험 측면에서 자연스럽지 않아 보이는군요.. 반응형을 생각했을 때 table 구조가 용어 사전을 보기에 적절한 UI인지도 논의가 필요할 것 같아요

2021-10-08.8.45.00.mov

.

아하 영상보고 이해가 되었습니다! 이부분은 적절한 UI로 변경되야될것으로 보이네요!

sensecodevalue · 2021-10-16T20:11:03Z

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

feat: ADD 1차

3d402de

sensecodevalue self-assigned this Sep 5, 2021

sensecodevalue changed the title ~~feat: 용어집 무한스크롤~~ feat: 용어집 무한스크롤 진행중... Sep 5, 2021

sensecodevalue added 2 commits September 11, 2021 00:09

Merge branch 'main' of https://github.com/SenseCodeValue/web-analytic…

155eeb1

…s-handbook into feature/109

feat: Add infinite scroll hooks and Apply it in Wiki Table

447aeea

sensecodevalue added 6 commits September 19, 2021 01:33

fix: change intersectionRatio to isIntersecting for accurate use of t…

7e0aac7

…he IntersectionObserver.

refactor: When using a IntersectionObserver, ref is required. Therefo…

eaeae1a

…re, useIntersectionObserver was changed to return ref

enhance: Add package for Adding the polyfill about IntersectionObserver

c8c7df1

fix: Remove unused code.

1efccad

review: Add delay option used in callback action when target on screen

a6fc028

Merge branch 'main' of https://github.com/EveryAnalytics/web-analytic…

da70de4

…s-handbook into feature/109

sensecodevalue marked this pull request as ready for review September 28, 2021 20:12

sensecodevalue changed the title ~~feat: 용어집 무한스크롤 진행중...~~ feat: 용어집 무한스크롤 Sep 28, 2021

sensecodevalue added enhancement New feature or request 📖 용어집 labels Sep 30, 2021

uoon-dev reviewed Oct 8, 2021

View reviewed changes

sensecodevalue added 2 commits October 17, 2021 04:55

review: remove unnecessary code by importing polyfills

9ef2ba8

review: Add types

2ad8083

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 용어집 무한스크롤 #136

feat: 용어집 무한스크롤 #136

sensecodevalue commented Sep 5, 2021 •

edited

Loading

sensecodevalue commented Sep 10, 2021 •

edited

Loading

uoon-dev Oct 8, 2021

sensecodevalue Oct 10, 2021

uoon-dev Oct 8, 2021

uoon-dev Oct 8, 2021

sensecodevalue Oct 10, 2021

uoon-dev Oct 8, 2021

sensecodevalue Oct 10, 2021

uoon-dev Oct 8, 2021

sensecodevalue Oct 10, 2021

uoon-dev Oct 8, 2021

sensecodevalue Oct 10, 2021

uoon-dev Oct 8, 2021

sensecodevalue Oct 10, 2021

uoon-dev Oct 8, 2021

sensecodevalue Oct 10, 2021

sensecodevalue commented Oct 16, 2021

		@@ -0,0 +1,34 @@
		import { useEffect, useState } from 'react';

		const usePagination = ({ source = [], limit = 10, offset = 0 }) => {

	const getMaxOffset = () => {
	const getMaxOffset = (): number => {

	const [currentOffest, setCurrentOffest] = useState(limit);
	const [currentOffest, setCurrentOffest] = useState<number>(limit);

feat: 용어집 무한스크롤 #136

Are you sure you want to change the base?

feat: 용어집 무한스크롤 #136

Conversation

sensecodevalue commented Sep 5, 2021 • edited Loading

Description

Help Wanted 👀

Related Issues

Checklist ✋

sensecodevalue commented Sep 10, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sensecodevalue commented Oct 16, 2021

sensecodevalue commented Sep 5, 2021 •

edited

Loading

sensecodevalue commented Sep 10, 2021 •

edited

Loading