오픈소스 훔쳐보기2

kyj2471·2021년 11월 15일
0

참고한 오픈소스

GitHub - outline/outline: The fastest wiki and knowledge base for growing teams. Beautiful, feature rich, and markdown compatible.

[ for of ]

const databases = await window.indexedDB.databases();
for (const database of databases) {
    if (database.name) {
      await window.indexedDB.deleteDatabase(database.name);
    }
  }

[ 현재 윈도우 사이즈를 구하는 hooks ]

import { debounce } from "lodash";
import * as React from "react";

export default function useWindowSize() {
  const [windowSize, setWindowSize] = React.useState({
    width: undefined,
    height: undefined,
  });

  React.useEffect(() => {
    // Handler to call on window resize
    const handleResize = debounce(() => {
      // Set window width/height to state
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }, 100);

    // Add event listener
    window.addEventListener("resize", handleResize);

    // Call handler right away so state gets updated with initial window size
    handleResize();

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowSize;
}

*debounce: 중첩된 호출 후, 입력주기가 끝나면 호출한다.

https://pks2974.medium.com/throttle-와-debounce-개념-정리하기-2335a9c426ff

[ 이전 값 저장해 사용하는 hooks ]

import * as React from "react";

export default function usePrevious(value) {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

👉 사용예시

const Guide = ({
  children,
  isOpen,
  title = "Untitled",
  onRequestClose,
  ...rest
}) => {
  const dialog = useDialogState({ animated: 250 });
  const wasOpen = usePrevious(isOpen);

  React.useEffect(() => {
    if (!wasOpen && isOpen) {
      dialog.show();
    }
    if (wasOpen && !isOpen) {
      dialog.hide();
    }
    // ...

💡 for in, for of, foreach 차이점 정리해보기, 사용예제 만들기.

🌱 forEach

오직 Array 객체에서만 사용가능한 메서드로, 배열의 첫번째부터 마지막까지 반복하면서 item을 꺼낼수 있다.

 let couponPrice = 0;
 let couponList = [];
 couponData.list.forEach((data) => {
   if (data.canUse && data.amount.value > couponPrice) {
     couponPrice = data.amount.value;
   }
   if (data.canUse) {
     couponList.unshift(data);
   } else {
     couponList.push(data);
    }
 });

🌱 for in

객체의 key값과 value 값을 뽑아내는데 유용하다.

객체의 키값의 갯수만큼 반복하여 첫번째키값부터 마지막 키값까지 반복하며 key값을 리턴한다.

const categorise = {
 "category1": "자동차",
 "category2": "RC카",
 "category3": "바이크",
 "category4": "뷰티"
 //...
}

// 카테고리 선택
for (let index in categorise) { 
  return (
      <div
       key={index}
       onClick={() => {
            this.selectChange(categorise[index]);
        }}
       >
       <a>{categorise[index]}</a>
      </div>
  );
}

🌱 for of

for of 구문은 ES6에 추가된 반복 구문으로 [Symbol.iterator] 속성을 가지는 collection만 대상으로 하며 value를 리턴한다.

Array, String등은 잘 동작하는데 Object에 사용하면 결과값은 TypeError가 나온다. 이유는 Object는 iterable하지 않다고 한다. iterable이란 "반복이 가능한"이란 뜻으로 Object는 반복이 가능하지 않다는 것이다. 간단히 말해서 길이와 순서가 있지 않은 것이다.(Array, String등은 길이와 순서가 있다)

const parcels = [
    {"name": "Gs25" ,"fee": 2000},
    {"name": "Cu" ,"fee": 3100},
    {"name": "Homepick" ,"fee": 3000}
]; 

// 리스트 세팅
const deliveryList = 
 for (let parcel of parcels) {
    let parcelData = {
      title: parcel.name,
      fee: parcel.fee,
    };
    return parcelData;
  });

💡lodash는 언제 쓰는 라이브러리인지?, debounce 말고 다른 두가지 정리하고, 사용예제 만들기.

lodash란 JavaScript에서 배열이나 객체등의 함수나 자주쓰이거나 유용한 함수를 제공해준다. 이러한 점으로 인해 JavaScript의 코드를 줄여주고, 빠른 작업에 도움이 된다. 특히 frontend 환경에서 많이 쓰인다고 한다.

장점

  • 브라우저에서 지원하지 않는 성능이 보장되어있는 다양한 메소드를 가지고 있음.
  • npm이나 기타 패키지 매니저를 통해 쉽게 사용 가능.

🌱 Trottle

한번에 많이 실행되는 scroll이벤트에서 무한스크롤등의 api나 다른 동작을 할때 사용할 수 있다.

→ Debounce와의 차이점

Debounce는 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이고, Throttle 은 이벤트를 일정한 주기마다 발생하도록 하는 기술이다.
throttle은 대표적으로 빠르게 많이 실행되는 무한 스크롤링에 유리하고(아래 예제), debounce는 자동 완성 양식의 키 누르기 추천과 같은 이벤트에 유리하다. (검색 쿼리를 입력하는 input 태그에 이벤트를 등록하면, 입력하는 글자 수 만큼의 수 많은 이벤트가 발생하기 때문에 최종적으로 작성한 마지막 쿼리에 대해서만 요청이 가도록)

import lodash from 'lodash';
import react, { useEffect } from 'react';

const Trottle = () => {

  useEffect(()=>{
    const handleScroll = lodash.throttle(() => {
      // 스크롤시 이벤트 동작
      var doc = document.body;
      if (doc.scrollTop > doc.scrollHeight - 1000) {
		  getApi();
  }
    }, 100);

    window.addEventListener("scroll", handleScroll);
    handleScroll();

    return () => window.removeEventListener("scroll", handleScroll);

  },[])

  return (
    <>
      <div></div>
    </>
  )
}
profile
[ frontend-developer ]

0개의 댓글