1️⃣ Generic 타입

나가는 타입을 string으로 지정해줬기 때문에 return 123을 입력하면 오류가 남.

123을 넣으면 arg:number로 들어가서 return이 되는데 얘가 string타입이라고? 말이 안된다!

이런식으로 arg:number, 리턴타입을 number라고 써줘야함

any:그냥 자바스크립트랑 같음
unknown: 타입처리는 해줘야함
generic: 들어온 타입을 그대로 사용함

내가 만든 타입을 그대로 사용한다

// generic = "일반적인"
// 1. 문자타입
// string을 리턴한다
const getString = (arg: string): string => {
  return arg;
};
const result1 = getString("철수");





// 2. 숫자타입
// string을 리턴한다
const getNumber = (arg: number): number => {
    return arg;
  };
  const result2 = getNumber(123);




// 3. any 타입 (그냥 자바스크립트랑 같음) 가급적 any는 쓰지 말기로, any라고 쓰게 되면 무엇이 잘못되었는지를 판단할 수 없게됨
const getAny2 = (args: any): any => {
    return args;
  };
  const result3_1 = getAny("철수");
  const result3_2 = getAny(1));
  const result3_3 = getAny(true);




//   4. any 타입2
// [any, any, any] 라고 쓸 경우, 서비스규모가 커지게 되면서 어디선가 에러가 튀어나게 될 것임
const getAnys = (arg1:any, arg2:any, arg3:any):[any, any, any] => {
    return [arg3, arg2, arg1]
};
const result4= getAnys("철수", true, 8)




// 5. generic 타입 (들어온 타입을 그대로 사용) (내가 타입을 만든다)
function getGeneric<MyType>(arg: MyType):MyType {
    return arg
}
const aaa : string = "철수"
const bbb : number = 8
const ccc : boolean = true
const result5_1 = getGeneric(aaa)
const result5_2 = getGeneric(bbb)
const result5_3 = getGeneric(ccc)


//   6. generic 타입2
// prettier-ignore
// 리턴타입을 [any, any, any] 라고 쓸 경우, 서비스규모가 커지게 되면서 어디선가 에러가 튀어나게 될 것임
// arg3, arg2, agr1 순서로 리턴되기 때문에 리턴타입은 [MyType3, MyType2, MyType1] 과 같이 써주었음
function getGenerics<MyType1, MyType2, MyType3>(arg1:MyType1, arg2:MyType2, arg3:MyType3):[MyType3, MyType2, MyType1]{
    return [arg3, arg2, arg1]
};
// 결국 8, true, "철수"가 들어오므로 타입은 [number, boolean, string] 처럼 예측됨
const result6= getGenerics("철수", true, 8)


// 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("철수", true, 8)


//   8. generic - 축약2
// prettier-ignore
function getGenericsTUV<T, U, V>(arg1:T, arg2:U, arg3:V):[V, U, T]{
    return [arg3, arg2, arg1]
};
// 첫번쨰는 string, 두번째는 boolean, 세번쨰는 number 여야 한다.
const result8= getGenericsTUV<string, boolean, number>("철수", true, 8)


// 9. useState 에서의 generic!!!
// 내가 useState를 만들어서 다른사람들에게 쓰라고 전달해줄때에는 generic이 필수임
// qqq에 111을 넣을것이므로 타입을 <number>로 지정해주었음
const [qqq, setQqq] = useState<number>(111)


//   10. 화살표 함수에서의 generic!!!
// prettier-ignore
const getGenericsArrow = <T, U, V>(arg1:T, arg2:U, arg3:V):[V, U, T] => {
    return [arg3, arg2, arg1]
};
// 첫번쨰는 string, 두번째는 boolean, 세번쨰는 number 여야 한다.
const result9= getGenericsArrow<string, boolean, number>("철수", true, 8)

리턴은 arg1과 2를 묶어서 배열로 리턴하므로 리턴타입은 string임

3️⃣ 세번째 시간

localStorage : 브라우저 껐다 켜도 그대로 남아 있음, 브라우저 저장소
sessionStorage : 브라우저 껐다 켜면 사라짐

쿠키에 data를 담아서 백엔드에 보낼수도 있고
백엔드로부터 쿠키를 받아올 수도 있음
=>보안문제 발생가능(백엔드랑 주고 받다 보니까)

쿠키는 로컬스토리지, 세션스토리지와 달리 백엔드와 주고 받을 수 있는 data 이기 때문에 Secure 등의 추가적인 옵션이 존재함

💡장바구니 만들기

목록만들고 오른쪽에 장바구니 담기버튼, 버튼 누르면 localStorage에 push 하는 함수 실행

콘솔 찍힌 필요없는 정보 삭제하기
delete profile.age는 원본이 삭제되는 방법이기 때문에 좋은 방법이 아님

구조분해할당하면 원본을 해치지 않으면서 age를 삭제할 수 있음!!!!!!!

useEffect 사용하는 이유

문제는 프리렌더링할때 서버에 localStorage가 없기 때문에 is not defined라고 뜨는것임
useEffect는 서버 실행x 브라우저에서만 실행됨
두번 그려지는걸 방지 (didMount시점에서 한번만 실행되는게 useEffect)