[TIL] 0225

WaffleCard Refactoring

hook, page컴포넌트 ts전환

const useClickAway = <T extends HTMLElement>(
  // HTMLElement 제외한 나머지 타입만 넘겨주면 알아서 HTMLElement 도 확장해준다
  handler: (e?: Event) => void,
): RefObject<T> => {
  const ref = useRef<T>(null);
  const savedHandler = useRef(handler);

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const handleEvent: EventListener = e => {
      // addEventListener에 파라미터로 넘겨주려면 EventListener타입이어야한다
      // 그러나 여기엔 e.target에 대한 타입이 없어서 as로 설정해줘야한다
      e.stopPropagation();
      !element.contains(e.target as HTMLElement) && savedHandler.current(e);
    };

알고리즘

DFS

필요한 것
시작점, 빠져나오는 조건, 파고드는 조건, 실행문

작성 순서
1. 종료조건을 걸어준다
2. 파고드는 경우를 판단해서 다음 노드의 값을 재귀함수의 파라미터로 넣는다
3. 재귀함수를 실행 코드의 전후에 실행문을 작성해 실행문의 시점을 정한다(이진트리 일경우-현재노드, 왼쪽 자식, 오른쪽 자식)