FE 26강

jae·2022년 6월 14일

오늘의 목표

무시무시한 타입 Generic
변수말고 브라우저에 저장하기 Cookie/localStorage/SessionStorage
비회원 전용 장바구니 Basket

1. 무시무시한 타입 Generic

generic : 일반적인

나가는 타입과 들어오는 타입 각각 지정

이렇게 넘버타입으로 지정이 되어있기때문에
문자타입일경우 에러가 확인이 된다

any 의 경우 모든 타입이 다 가능하기때문에 결과를 예측할수 없다.

any는 타입을 예측하는 것이 불가능하지만
generic 타입 타입을 예측하는 것이 가능하며
들어온 타입을 그대로 사용하게 되기에
조금더 안전하게 사용하는 것이 가능하다.

제네릭을 제일 많이 쓸떄
스테이트등을 만들어서 배포해서 사용하라고 할때
어떤 타입일지 모르기 때문에 타입을 제네릭으로 하여 배포한다

주석으로 밑의 내용에 대한 것들 무시시키기
프리티어 무시시키기
타입스크립트 무시시키기

2. 변수말고 브라우저에 저장하기 Cookie/localStorage/SessionStorage

쿠키

만료시간 존재 저장된 데이터가 backend API 요청 시 자동으로 함께 전송.
-backend에서 데이터를 쿠키에 넣어서 API 응답 시 Frontend에 전달할 수도 있음

HttpOnly,secure 등의 옵션을 설정해 줄 수 있음.
- httpOnly : 브라우저에서 자바스크립트를 통해서 쿠키에 접근할 수 없음. 통신으로만 해당 데이터를 주고 받음

secure : https 통신 시에만 해당 쿠키를 받아 올 수 있습니다.

브라우저를 종료한 후 다시 들어와도 기록이 남습니다.

로컬스토리지

- 데이터를 브라우저에 저장합니다.
- 브라우저를 종료한 후 다시 들어와도 저장 기록이 남아있습니다.

세션스토리지

- 데이터를 브라우저에 저장합니다.
- 브라우저를 종료할 때 삭제됩니다.

로컬 스토리지와 세션 스토리지는 저장/조회하는 방법이 비슷하지만 쿠키는 다른데.

로컬/세션 스토리지는 localStorage.setItem("key","value") 혹은 sessionStorage.setItem("key","value")로 저장하고, 쿠키는 document.cookie = "key=value" 로 저장할 수 있습니다.
로컬/세션 스토리지의 경우 꺼내오는 것도
setItem()을 getItem("key") 로 해당 key에 대한 value를 받아올 수 있지만
하지만 쿠키는 특정 키에 대한 호출이 아니가 쿠키 전체를 가져와서 보여준다
그 쿠키에서 필요한 값을 꺼내는 작업을 해야한다!

토큰같은것을 꺼내는 방법
하지만 중요한 내용을 저렇게 쉽게 확인이 가능하다면
해킹의 위험성이 있다

Cookie/localStorage/SessionStorage를 연결하는 방법과 배열안에 객체를 넣어서 이용하기

이렇게 로컬 스토리지 안에 장바구니에 값을 넣어두기를 할것

쿠키에서 값을 꺼낼때 spilt를 이용해 ;기준으로 토큰을 나눌수 있다

 const onCLickLoadCookie = () => {
    const myCookie = document.cookie
      .split(";")
      .filter((el) => el.startsWith("aaa="));
  };

스플릿으로 나눈 다음 필터를 이용하여 "aaa="으로 시작하는 값을 찾는것

3. 비회원 전용 장바구니 Basket

  // 1. 기존 장바구니 가져오기
    const baskets = JSON.parse(localStorage.setItem("baskets") || "[]");
    // 2. 이미 담겼는지 확인하기
    // 필터에 매개변수를 넣고 지금 내가 고른 것의 아이디와 담겨있던 것의 아이디가 동일한지 확인
    // temp에 담긴 값이 있다면 알림이 실행될 수 있게 하기
   const temp= baskets.filter((basketsEl)=>basketsEl._id==el._id)
    if(temp.length===1){
        alert("이미 담긴 물품입니당")
    }
    // 3. 장바구니에 담기
    baskets.psuh(el);
    localStorage.setItem("baskets", JSON.stringify(baskets));

이렇게 장바구니담기를 누르게된다면 스토리지에 담기고
누적되게된다.