import { useMemo, useState, ChangeEvent, MouseEvent } from 'react';
import { useDebounce } from 'util/hooks/useDebounce';

const About = () => {
  const [second, setSecond] = useState<string>('');
  const [timer, setTimer] = useState<any>(0);
  const handleOnChangeSecond = (e: ChangeEvent<HTMLInputElement>) => {
    setSecond(e.target.value as string);
    if (timer) {
      console.log('clear', timer);
      clearTimeout(timer);
    }
    const newTimer = setTimeout(() => {
      console.log('hi!', e.target.value);
    }, 800);
    setTimer(newTimer);
    return;
  };
  const handleNormalOne = () => {
    console.log('hi!');
  };

  useDebounce({
    func: () => {
      console.log('debounce????');
    },
    delay: 1000,
    deps: [second],
  });

  return (
    <div role="heading">
      <div>
        <h2>second</h2>
        <h4>{second}</h4>
      </div>
      <input onChange={handleOnChangeSecond} />
      <input onChange={handleNormalOne} />
    </div>
  );
};

export default About;

기본적인 아이디어는 호출이 많은 함수에 대해 마지막 함수만을 실행시켜주는 것이다.

여러함수가 (1)=> (2)=> (3)=> ... 이런식으로 실행 요청이 들어왔다고 가정하면

마지막 (3)=> 함수만 실행해주는 것이다.

이런걸 어떻게 가능하게 하는가?

timer를 사용하는 것이다.

setTimeout의 callback 함수로써 원하는 함수를 받고 그 함수의 실행 시간을 ms으로 정해놓자.

아 물론 많은 요청들이 쌓일 함수들의 삭제를 담당할 clearTimeout으로 요청이 있다면 삭제하고 새 요청을 쑤셔넣어준다.

따라서 요청 1은 요청 2에 의해 삭제되고 2는 3에 의해 삭제된다.

요청 3은 요청 4가 없는 경우 800ms 이후에 발동한다.

type ReturnedActions<T> = {
  // eslint-disable-next-line no-unused-vars
  [P in keyof T]: T[P] extends (...args: any) => infer R ? {
    type:P,
    payload:R
  }:never
}[keyof T]

class Test {
  constructor(){}

  hello():void{
    console.log('hello')
  }
  num():number{
    return 1
  }
}

type TestAction = ReturnType<Test[keyof Test]>
type Ret = ReturnedActions<Test>

class Drill {
  constructor() {}

  consoleHi(): string {
    return 'Hi';
  }
}

type DrillAction = ReturnType<Drill[keyof Drill]>;

error handle with cause

// custom error를 만들자.
{
  class ValidationError extends Error {
    constructor(message: string) {
      super(message);
      this.name = "ValidationError";
    }
  }

  class PropertyRequiredError extends ValidationError {
    property: string;
    constructor(property: string) {
      super("No property: " + property);
      this.name = "PropertyRequiredError";
      this.property = property;
    }
  }

  function readUser(json: any) {
    let user = JSON.parse(json);
    if (!user.age) {
      throw new PropertyRequiredError("age");
    }
    if (!user.name) {
      throw new PropertyRequiredError("name");
    }
    return user;
  }
  try {
    let user = readUser('{"age":25}');
  } catch (e) {
    if (e instanceof ValidationError) {
      console.error("Invalid data: " + e.message);
      console.error(e.name);
    } else if (e instanceof SyntaxError) {
      console.error("JSON Syntax Error: " + e.message);
    } else {
      throw e;
    }
  }
}

// custom한 에러


{
  class MyError extends Error {
    constructor(message: string) {
      super(message);
      this.name = this.constructor.name;
    }
  }
  class ValidationError extends MyError {}
  class PropertyRequiredError extends ValidationError {
    property: string;
    constructor(property: string) {
      super("No property: " + property);
      this.property = property;
    }
  }

  console.log("name???????????", new PropertyRequiredError("field").name);
}

infer는 generic으로 받은 type을 tsc가 추론하여 스스로 결정하게 된다.

type SecondArg는 전달받은 F의 타입을 추론해 해당 인자의 타입을 끌어내어 반환해주고 있다. 이를 infer가 아닌 방법으로 어떻게 하면 끌어낼 수 있을지 두렵다

위 코드는 에러가 발생한다. isString이 boolean을 준다는 것을 parseInput 함수는 알 지 못한다.

isString 함수 내에서만 작동하는 것이다. 따라서 isString 함수는 boolean을 반환하는 것을 알려주지만 typeguard로써의 역할을 완벽하게 해내지 못했다!

function isString(a:unknown):a is string{
    return typeof a === 'string';
}
function parseInput(input:string|number){
    let string:string;
    if(isString(input)){
        string = input.toUpperCase(); 
    }
}

is는 매개변수 타입을 정제하고 boolean을 반환하는 함수에 사용자 정의 타입 안전장치를 이용 함수가 해당 타입을 반환한다고 보장 하도록 할 수 있다.

type Dig<T, U extends keyof T> = Pick<T, U>[U]
const obj = {
    a: {
      first: '1',
      second: '2',
      thrid: '3',
    },
    b: 'b',
    c: {
      fourth: '4',
      fifth: '5'
    }
  }

const Dig:Dig<typeof obj,'a'> = {
    first:'3',
    second:'4',
    thrid:'5'
}
type Diff<T, U> = T extends U ? never : T
type DiffExample = Diff<'a' | 'b' | 'c' | 'd', 'a' | 'c' | 'f'>;  // 'b' | 'd' 

아래의 Dig, Diff는 안도형님의 글을 참고하였습니다 안도형님의 블로그

호출자는 팩토리가 특정 인터페이스를 만족하는 클래스를 제공할 것이라는 사실만을 알아야 하고, 어떤 구체 클래스가 이 일을 하는지 알지 못해야 한다.

타입스크립트에서 final을 따라해보자.

final을 응용하여 싱글톤을 만들어 낼 수 있다.

아무튼 final이 뭔지 설명하자면 클래스나 메서드를 확장 혹은 오버라이드 할 수 없게 만드는 키워드이다. (다른 oop lang에서)

class의 constructor를 private으로 생성하면 해당 class를 생성, 확장할 수 없게 된다. 하지만 static method로 해당 클래스를 생성하여 돌려준다면 확장이 막힌 클래스를 생성할 수 있다.

final이 없으므로 이렇게 구현하면 되는 것이다

위 코드를 간단히 요약해보자. (1): 모든 생성자를 표현하는 ClassConstructor 타입이다. 타입스크립트는 전적으로 구조를 기반으로 타입을 판단하므로 new로 생성할 수 있는 모든 것을 생성자로 규정한다. 인자는 어떤 타입의 매개변수가 올지 알 수 없으므로 임의의 개수의 any타입을 인수로 받는다.

withEZDebug는 class를 받아 debug라는 메소드를 추가한 확장된 클래스를 돌려준다. 이렇게 withEZDebug는 자신이 반환하는 class와 입력 받은 class를 mix 시켜 안에 주입한다 하여 mixin 기법이라 할 수 있고

보통 믹스인이라고 한다. 동작을 캡슐화하여 외부에서는 debug 함수의 정체를 모르게 할 수 있게된다.

자바는 사용자의 입력을 받기 위해 nextInt() 함수를 실행시키고 그대로 코드의 실행을 묶어둔다.

```java package com.company; import java.util.Scanner;

public class Main { public static void main(String[] args) { getTyping(); }

public static void getTyping(){
    Scanner sc = new Scanner(System.in);
    while(sc.hasNextInt()){
        System.out.println("You input "+sc.nextInt());
    }
    sc.close();
}

}

// 이런식으로 boolean method를 사용하여 입력을 누적할 수 있다.

// validate 할 때 Record + keyof
interface User {
  id: number;
  name: string;
  age: number;
}
function isValid(user: User): Record<keyof User, boolean> {
  const result: Record<keyof User, boolean> = {
    id: user.id > 0,
    name: user.name !== '',
    age: user.age > 0,
  };
  return result;
}

요청받은 사항은 아래의 두가지 였다.

1. 화면의 최상단에 있는 경우 navBar의 배경색을 투명하게한다.

2. 스크롤이 내려가면 화면을 따라 navBar가 따라오고 배경색이 흰색이 된다.

<nav>
...
</nav>

위와 같이 nav 태그 내부에 당신의 navBar가 있다고 하자.

lint에 오류가 있지만 상관하지 않고 기능을 구현하기로한다

우선 dom의 형태를 변경해준다.

<div>
  <div /> // 1
  <nav> // 2
  ...
  </nav>

</div>

위와 같은 형태를 한 이유는 nav 태그 위의 div가 필요해서이다.

1의 역할은 화면에 보이면 false를 반환한다라는 이벤트를 하는 io를 심어놓는다.

2의 역할은 화면에 안보이면 true를 반환한다라는 이벤트를 하는 io를 심어놓는다.

즉 스위치를 만든 것이다.

아래는 실제 코드의 일부이다.

const Navigation = () => {
  const [showMenu, setShowMenu] = useState(false);
  const toggleMenu = () => setShowMenu(!showMenu);
  const [isNavBgVisible, setIsNavBgVisible] = useState(false);
  const navIoRef = useRef<any>();
  const ceilingIoRef = useRef<any>();
  const topObCallBack = () => {
    setIsNavBgVisible(false);
  };
  const navObCallBack = () => {
    console.log(`callback!`);
    setIsNavBgVisible(true);
  };
  useEffect(() => {
    const observeWhenNavDisappear: IntersectionObserver = new IntersectionObserver(([entries]: any): void => {
      if (!entries.isIntersecting) {
        navObCallBack();
        observeWhenNavDisappear.unobserve(entries.target);
      }
    });
  // lint error
    navIoRef.current && observeWhenNavDisappear.observe(navIoRef.current);
  }, [navIoRef, isNavBgVisible]);
  useEffect(() => {
    const observeWhenCeilingAppear: IntersectionObserver = new IntersectionObserver(([entries]) => {
      if (entries.isIntersecting) {
        topObCallBack();
      }
    });
    // lint error
    ceilingIoRef.current && observeWhenCeilingAppear.observe(ceilingIoRef.current);
  }, [ceilingIoRef, isNavBgVisible]);

  return (
    <div>
      <div ref={ceilingIoRef} />
      <nav
        ref={navIoRef}
        className={tw(`bg-white ${isNavBgVisible ? `bg-opacity-100 fixed` : `bg-opacity-0  `}  absolute z-20 w-full`)}
      >
        ...
      </nav>
      ...
      </div>

react의 life cycle을 고려하여 useEffect와 useRef를 사용해야 한다. 문법적으로 걸리는 부분은 주석으로 lint error이라 써놓았고

ref를 선언하는데 any 타입을 사용한 것이다.

하지만 위 코드의 일부는 landingpage에서 사용되고 nextjs를 거쳐 compile되기 때문에 결국 static한 html 파일이 된다.

따라서 lint나 type 선언이 지저분해도 어느정도는 감안이 되는 부분이다.

잘 생각해보면 useEffect와 io 하나에 모든 기능을 넣을 수 있겠지만 굳이 그래야 하는가? 라는 생각도 들어 useEffect를 두개로 나누었다.