TIL 25

브라우저 저장소

브라우저 저장소인 cookie에 저장된 값이 BE에 API 요청할 때 자동으로 전송한다. 즉, 서버와 연결이 될 때마다 쿠키 데이터를 주고 받는다.
물론 BE에서도 cookie로 전달이 가능하고
보통 보안이 중요한 데이터를 전송할 때 사용하는 저장소이다.
document.cookie 로 쿠키에 저장된 데이터를 조회할 수는 있지만 httpOnly 명령어를 통해 http 전송할 때만 쿠키 데이터를 사용할 수 있게 설정해
document.cookie 를 사용 불가능하게 할 수도 있어서 보안성이 높다.

type: any vs type: unknown

export const getAny = (args: any) => {
  const answer = args + 2;

  return answer;
};

const myResult1 = getAny("철수");

console.log(myResult1);

위가 TS에서 타입을 any로 설정해준 경우이고

const getUnknown = (args: unknown) => {
  if (typeof args === "number") {
    const answer = args + 2;
    return answer;
  } else {
    return "숫자를 입력해주세요";
  }
};
const myResult2 = getUnknown("영희");
console.log(myResult2);

이게 TS에서 타입을 unknown으로 설정해준 경우이다.

any와 unknown 모두 타입을 모를 때 사용한다는 것은 동일하지만 unknown은 타입을 모르더라도 이상한 데이터가 들어와서 오류를 발생하지 않게끔 개발자에게 더욱 안전한 코드를 사용해보라고 경고를 해준다.

type: generic

export function getGenericReverseT<T1,T2,T3>(arg1: T1,arg2: T2,arg3: T3): [T3,T2,T1] {
  return [arg3,arg2,arg1];
}
const R7 = getGenericReverse("영희", "초등", 9);
console.log(R7);

// generic 응용 3 - 축약버전2
//prettier-ignore
export function getGenericReverseTUV<T,U,V>(arg1: T,arg2: U,arg3: V): [V,U,T] {
  return [arg3,arg2,arg1];
}
const R8 = getGenericReverse("영희", "초등", 9);
console.log(R8);

제네릭 타입 또한 타입을 모를 때 사용하지만 제네릭의 경우 입력받은 인자값의 타입을 그대로 적용시켜 아웃풋에도 타입을 적용시킨다.
즉, 데이터를 입력받기 전에는 타입을 모르지만 string타입으로 입력을 받은 데이터의 경우 출력할 때의 타입이 string으로 고정이 된다.
타입이 고정되므로 예기치 못한 타입의 데이터가 들어왔을 경우 발생하는 에러를 방지하게 도와주는 셈.

type: generic, HOC

export const firstFn5=<C>(Compotnent: C)=> <P>(props: P): [C, P]=> {
  return [Compotnent, props];
};

const resultFn5 = firstFn5("bbb")({ aaa: "aaa" });
console.log(resultFn5);

type: generic, Arrow Function

export const firstFn4=<T>(arg1: T)=> <U>(arg2: U): [T, U]=> {
    return [arg1, arg2];
  };

const resultFn4 = firstFn4("영희")(20);
console.log(resultFn4);