TIL - 6주차 화요일

목차

1. Generic
2. Cookie / LocalStorage / SessionStorage
3. Basket (비회원 전용 장바구니)

1. Generic

any vs. unknown

// 1. any 타입 ( 그냥 자바스크립트랑 같음 )
const getAny = (args: any) => {
  return args + 2;
};
const result1 = getAny("철수");

// 2. unknown 타입 (개발자에게 안전하게 코딩하도록 유도!)
// 아무거나 들어올 수 있는데 상황에 따라 명시를 해줘라!
const getUnknown = (args: unknown) => {
  if (typeof args === "number") {
    return args + 2;
  } else {
    return "숫자를 넣어주세요!!";
  }
};
const result2 = getUnknown("철수");

문자 타입

// return type은 괄호 뒤에 : 하고, 적어준다.
const getString = (args: string): string => {
  return args;
};
const result1 = getString("철수");

숫자 타입

// 2. 숫자타입
const getNumber = (arg: number): number => {
  return arg;
};
const result2 = getNumber(8);

any 타입

// 3. any 타입 - 1
const getAny = (args: any): any => {
  return args;
};
const result3_1 = getAny(3);
const result3_2 = getAny("chulsoo");
const result3_3 = getAny(true);

// 4. any 타입 - 2
const getAnys = (arg1: any, arg2: any, arg3: any): [any, any, any] => {
  return [arg3, arg2, arg1];
};
const result4 = getAnys("철수", "다람쥐초등학교", 8);

generic 타입

// 5. generic 타입 (들어온 타입을 그대로 사용)
// 뭔진 모르겠으나, 들어온타입을 그대로 사용 
// 문자가 들어오면 전체가 문자가 되는 것이고 숫자면 전체가 다 숫자, 등등
function getGeneric<MyType>(args: MyType): MyType {
  return args;
}
const aaa: string = "철수";
const bbb: number = 8;
const ccc: boolean = true;

const result4_1 = getGeneric(bbb);
const result4_2 = getGeneric(aaa);
const result4_3 = getGeneric(ccc);

generic 축약 - 1

//
// 7. generic - 축약1
// prettier-ignore
function getGenericsT<T1, T2, T3>(arg1: T1, arg2: T2, arg3: T3): [T3, T2, T1] {
    return [arg3, arg2, arg1]
}
const result7 = getGenericsT("철수", "다람쥐초등학교", 8);

generic 축약 - 2

//
// 8. generic - 축약2
// prettier-ignore
function getGenericsTUV<T, U, V>(arg1: T, arg2: U, arg3: V): [V, U, T] {
    return [arg3, arg2, arg1]
}

// prettier-ignore
const result8 = getGenericsTUV<string, string, number>("철수", "다람쥐초등학교", 8);

2. Cookie / LocalStorage / SessionStorage

1. 쿠키

• 저장된 데이터가 Backend-API 요청시에 자동으로 함께 전송된다.
• 로그인 토큰 등을 쿠키에 넣어서 전달할 수도 있다.
  

2. 로컬스토리지

• 데이터를 브라우저에 저장하고, 브라우저를 종료한 후 다시 들어와도 저장 기록이 남아있다.

3. 세션스토리지

• 데이터를 브라우저에 저장하고, 브라우저를 종료할 때 삭제된다.(완전 임시 저장용)

오늘본상품, 최근본상품

• 로컬스토리지에 저장 -> key값에 해당날짜를 기준으로 객체나 배열이 들어가도록