[TIL] 1. 브라우저 저장소 / 저장소 특징 비교 / 비회원 장바구니 / 오늘 본 상품

 

Weekley Goals

브라우저 저장소 / 웹에디터 / 결제 프로세스 / 지도

1. 이제 cont{}, const[] 원리 - Destructuring
2. 무시무시한 타입이당 - generic
3. 그냥 텍스트 말고, 웹에디터로 꾸며줘! - Web-Editor
4. 결제 API 테스트할 신용/체크카드 준비 됐지?! - Import
5. 지도 연동 ?! 굉장히 쉽잖아 - Map 해당 위치가 어딘지 나오는거. 중고상품 어디서 판매할건지 위치 찍기.

 

Today Goals

1. 무시무시한 타입이다 - Generic
2. 변수 말고, 브라우저에 저장해봐! - Cookie / LocalStorage / SessionStorage
3. 비회원 전용 장바구니가 있다고? - Basket ”회원 장바구니로 옮겨드릴까요?”

 

---

 

오늘의 정리

오늘은 앞서 알아 보았던 타입스크립트와 브라우저 저장소에 관해서 좀 더 세부적으로 알아봤죠! 우선 타입들을 조금 더 심도 있게 알아보는 시간을 가졌습니다.

 

any와 unknown

any 알지 못하는 타입을 표현할때 자주 사용

타입 검사를 하지 않게 되는데 타입의 일부만 알고 전체에 대한 타입을 알지 못할때 유용했습니다!

 

unknown

any와 비슷하면서도 조금 다릅니다. any와 unknown 모두 매개변수(arg)로 뭘 넣어주든 상관없습니다. 하지만 unknown은 뭘 넣어 주든 뭔지는 모르지만 개발자에게 조금 더 안전하게 타입을 지정할 수 있도록 경고해 줄 수 있다는 차이가 있습니다.
알지 못하는 타입이 생겨 any나 unknown을 사용하지 않고 우리가 직접 타입을 만들어줄 수 있습니다.

( (매개변수) 앞 <>를 사용해 함수에 타입 변수를 추가 )

 

 

generic

generic 또한 any와 비슷합니다. 하지만 any는 실제로 함수 반환 시 어떤 타입인지에 대한 정보는 잃게 되어 string을 넣어도 any타입이 반환되는 반면, generic은 입력 값에 따라 내부 타입이 정의가 되었습니다. 즉, 단일 타입이 아닌 다양한 타입에서 작동하게 작성할 수 있습니다! 이 generic은 useState,useMutation 등을 만들어 사용할 경우에 자주 쓰인다 하였습니다!

 

클로저에서의 generic

 

뒤() 가 앞()을 실행시켜 줍니다.

 

함수에서 함수를 return하는 클로저에서 사용하는 generic 또한 알아봤습니다.

const aaa = () => () => {} 형식에서 제네릭을 붙여서

const aaa = <>()=><>():반환타입(return 있을경우)=>{} 의 형태가 되었습니다.

 

HOC에서 사용할때는 어땠죠? 가장 큰 차이는 매개변수와 반환되는 형태가 컴포넌트라는 점이였습니다!

따라서 Component부분은 ComponentType으로, props부분은 {}객체로써 지정하였습니다.

지금까지 공부하면서 매개변수에 대한 타입을 지정하는것은 여러번 해주어 어느정도 익숙해졌습니다.

그렇다면 return 타입은 어떻게 적어줄까요?  : 을 통해 return type을 지정해 줄 수 있었습니다.

Ex) fuction aaa():string{return “망고”}

 

 

---

브라우저 저장소

 

 

변수에 데이터를 넣어 두면, 새로고침 시 저장된 데이터가 날아가는 현상이 있습니다.

이는 HTML, CSS, JS 를 다시 다운로드 받아서 화면에 새로 그리기 때문입니다.

 

 

 

따라서, 데이터를 유지하기 위해 브라우저 저장소에 저장했습니다. 브라우저 저장소는 크게 쿠키(cookie), 로컬스토리지(localStorage), 세션스토리지(sessionStorage)가 있었습니다. 사용은 공통적으로 간단합니다.

 

쿠키는 document.cookie,

로컬스토리지와 세션스토리지는 .setItem()    .getItem()

을 사용합니다. 각각의 특징들이 있는데 아래에서 살펴 보도록 하겠습니다!

쿠키

쿠키는 백엔드와 데이터 공유 시 유용합니다.

 

저장된 데이터가 Backend-API 요청시에 자동으로 함께 보내집니다. 

백엔드와 브라우저 간 데이터를 공유할때 유용하지만 너무 많은 데이터를 담아두면 효율성이 떨어지게됨, 만료 시간이 존재하기에 브라우저를 종료해도 만료시간까지 살아있음, 주로 보안과 관련된 정보(httpOnly를 사용해 보안 옵션을 걸어)를 주고 받을때 사용

 

CF) 다른 웹 브라우저들

로컬스토리지: 브라우저를 껐다가 다시 켜도 저장 정보가 남아있음 <- 주로 가벼운 정보들 저장 

세션스토리지: 브라우저를 껐다가 다시 켜면 저장 정보가 사라짐 <- 다시 켰을 때 초기화하고 싶다면.

(언제 어떤 브라우저 저장소를 쓸지 잘 생각해보는 것이 중요 뽀인트입니다!!!)

 

 

쿠키 조회 할때 특징 (순서 기억할 것✨)

1. 쿠키에 담긴 모든 내용을 구분없이 하나의 문자열로 가져옵니다.

따라서 우리는 쿠키 내용의 구분점인 ; 를 기준으로 잘라주어야했습니다! 그러기 위해 document.cookie.split(‘; ’)을 사용합니다.

2. 그 안에서 필요한 내용을 뽑아주기 위해 filter()를 사용했고

3. 필요한 내용을 찾아내기 위해 filter()안에서 startWith()를 사용했고

4. 추출된 결과 data를 우리의 필요에 의해 다시 한번 가공( key,value형태를 value만 남을수 있게 replace 등등 )해주었습니다. 

 

 

 

---

 

비회원 장바구니 

 

브라우저 저장소를 활용해서 비회원 장바구니와 오늘 본 상품 리스트를 만들 수 있습니다.

장바구니의 내용을 활용해본다면 오늘 본 상품 리스트는

클릭했던 상품들만 로컬스토리지에 저장해 놓으면 되겠지요.

 

비회원은 아직 로그인 하기 전이므로,

Backend에서 어떤 유저가 장바구니에 무엇을 담고 있는지 기록하기가 애매합니다.

그래서 비회원의 장바구니, 오늘 본 상품 리스트들의 경우

쿠키 저장소는 적합하지 않을 것 같습니다.

물론, 브라우저를 껐다가 다시 들어올 수도 있으므로

세션스토리지보다는 로컬스토리지가 알맞을 것 같습니다!

(언제 어떤 브라우저 저장소를 쓸지 잘 생각해보는 것이 중요 뽀인트입니다!!!2222)

 

 

이렇게, 비회원의 경우 쿠키보다는 로컬스토리지에 임시로 저장해 놓고,

나중에 로그인에 성공했을 때 미리 담아 놓은 장바구니를 쉽게 가져올 수 있는 부분입니다.

 

하나 포인트가 있었죠!

object로 받게 되는 value를 JSON.stringify로 감싸주어야 문자열로 담깁니다.

이렇게 담아주는 정보에서 불필요한 부분들은 REST 파라미터를 사용해 제외해주었습니다!

 

 

하지만 장바구니인 만큼 우리가 본 상품들은 계속 쌓여야하는데 새로 갱신되는 문제가 있었습니다!

이부분은 JSON.parse()를 사용해 LocalStorage의 basket을 객체로 만들어 변수에 담아주고

이 변수에 push를 통해 새로운 상품들을 담아주는 형태로 만들어주었죠! 장바구니에 중복 상품이 들어가면 안되겠죠!

이 부분의 처리는 push() 해주는 시점에서 해주었습니다!

el의 id와 baskets안에 담겨있는 id를 비교했습니다!!