코드캠프 FE 26일차 - TIL(Generic,Cookie/LocalStorage/SessionStorage,basket)

space's pace·2022년 6월 14일
0

📔 학습목표

1.타입 >> Generic
2. 브라우저에 저장 >> cookie/localstorage/sessionstorage
3. 비회원 전용 장바구니 >> basket

any 어떤 타입이든 다 됌.
unknown 도 any처럼 다 되는 any보다 안정성을 더 중요시함
(조건을 달아줘야 함 -> 안전하게 작동하도록)

타입스크립트 | Generic

// 타입스크립트 - generic (일반적인 타입)

import { compact } from "lodash"
import { useState } from "react"

// 1. 문자 타입
const getString = (arg: string):string => {
  return arg
}
// 괄호 뒤에 스트링은 리턴값의 타입

const result1 = getString("철수")
// 타입 추론. 


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

const result2 = getNumber(1234)



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


// 4. any 타입 2
const getAnys = (arg1: any, arg2:any2 , 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 _ingnore
const getGenerics<MyType1, MyType2, MyType3>(arg1: MyType1, arg2: MyType2, arg3:MyType3):[MyType3, MyType2, MyType1]{
  return [arg3, arg2, arg1]
};
const result6 = getGenerics("철수",true,8)



// 7. generic 축약
// 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
// pretiier - ignore
function  getGenericsTUV<T,U,V>(arg1: T,arg2: U,arg3:V):[V,U,T]{
  return [arg3, arg2, arg1]
};
const result8 = getGenericsTUV<string, boolean, number>("철수", true, 8)


// 9. useState에서의 generic
// const [aaa, setAaa] = useState<number>(111);
const [aaa, setAaa] = useState<string>(() => "철수");



// 8. 화살표 함수에서의 generic
// pretiier - ignore
const getGenericsArrow = <T,U,V>(arg1: T,arg2: U,arg3:V):[V,U,T] => {
  return [arg3, arg2, arg1]
};
const result10 = getGenericsTUV<string, boolean, number>("철수", true, 8)

HOF에서 Generic 적용하기

// 1. HOF - 일반 타입
// 함수뒤에 : 하면 리턴타입임
// 리턴function 이름은 별로 중요하지 않음
function firstFunc1(arg1: string) {
  return function secondFunc1(arg2: number) : [string, number] {
    return [arg1, arg2]
  }
}
const result1 = firstFunc1("영희")(8)


// 2. HOF - any 타입
function firstFunc2(arg1: any) {
  return function secondFunc2(arg2: any) : [any, any] {
    return [arg1, arg2]
  }
}
const result2 = firstFunc2("영희")(8)

// 3. HOF - generic 타입
function firstFunc3<T>(arg1: T) {
  return function secondFunc2<U>(arg2: U) : [T, U] {
    return [arg1, arg2]
  }
}
// 타입이 추론된 걸 볼 수 있음
const result3 = firstFunc3<string>("영희")(8)



// 4. HOF - generic타입(화살표함수)
// 자동으로 줄바꿈 x -> prettiert-arrow
const firstFunc4 = <T>(arg1: T) => <U>(arg2: U) : [T, U] => {
    return [arg1, arg2]
}
const result4 = firstFunc4("영희")(8);

// 5. HOF - generic 타입 (컴포넌트에 응용해보기 - HOC)
// 자동으로 줄바꿈 x -> prettiert-arrow
const withAuth = <C>(Component: C) => <P>(props: P) : [C, P] => {
  return [Component, props]
}
const result5 = withAuth("Bbb")({qqq: "철수"});

로컬스토리지는 브라우저를 껐다 켜도 안 사라짐
세션스토리지는 브라우저를 껐다 키면 사라짐

키밸류 형태로 저장

백엔드에 요청할 때마다 위 사진에 애들이 따라 붙어서 날라간다

브라우저와 백엔드 사이에 데이터를 주고받는 창구
그러다보면 보안문제가 생김
그래서 그럼 보안문제는 어떻게 할까?
보안관련된 옵션들

시큐어 - 트루
http - api 통해서만 주고받겠다.
무슨말이냐? api아니여도 데이터를 주고받을 수 있다.

밸류 뽑아내기

로컬/세션스토리지/쿠키 데이터 저장하고, 조회하기


함수 6개

로컬/세션/쿠키 저장하기 함수3개
로컬/세션/쿠키 조회하기 함수3개

=========================
로컬/세션/쿠키 저장하기 버튼3개
로컬/세션/쿠키 조회하기 버튼3개

쿠키 쪼개려면 세미콜론 기준으로 split하면 뙘

장바구니에 담기

로컬스토리지에 저장해서

목록 가져오기 -> 목록 우측에 담기 버튼 -> 로컬스토리지에 푸쉬하는 함수
-> 기존에 목록에 복사해서 확인할 거임

객체를 문자열로 바꿔서 저장해줘야 함


값이 있으면 baskets에 객체 또는 배열로 바꿔줘

같은 애들만 계속 담긴다면?
해결 ?

기존에 있던 애들이랑 있는지 비교하기

구조분해 할당해서 레스트 파라미터를 쓰면
원본을 해치지 않으면서 원하는 값을 얻을 수 있음
rest라는 이름 대신 다른 이름을 쓸 수 있나? 가능하다
하지만 ...rest 관례로 쓰이는 표현이기 떄문에 권장한다.

profile
블로그 이사 준비중!

0개의 댓글