220614 프론트엔드 부트캠프 라라일차 : Generic, 브라우저 저장소, 장바구니

1. 무시무시한 타입이다! → Generic
2. 변수 말고, 브라우저에 저장해봐 → Cookie/ LocalStorage/SessionStorage
3. 비회원 전용 장바구니? → Basket (위의 것들 활용해서 만든다.)

 

  Generic - 일반적인

any : 어떤 타입이든 가능 (자바스크립트)

unknown : 넣는 사람은 아무거나 넣을 수 있음, 함수 내부 코딩시엔 숫자일 때, string일 때 ... 나눠서 코딩한다.

 

// 1. 문자 타입
const getString = (arg: string): string => { // (arg: 인자타입): 리턴타입
     return arg;
}

const result1 = getString("만두");

모든게 들어가긴 하는데, 타입이 예측되면 얼마나 좋을까?! → 제네릭

주로 쓰는 곳 : useState 만들어서 다른 사람에게 제공해줄 때, 그때 갖다쓰는 사람들이 뭘 보낼지 몰라, generic으로 any보단 안정성있게 배포해주는 것

 

오픈 소스, yarn install 그런 것 대부분 타입 제네릭

HOF 에서 적용하기

 

이 자리로 들어온다.

 

"resolutions": { "@types/react": "^17.0.30" }

추가하고 노드 모듈, 얀락 지우고 다시 설치

 

 

 

  브라우저 저장소

state에만 하는 게 아니라!!

 

개발자 도구 - 로컬 스토리지, 세션 스토리지

로컬 스토리지 - 브라우저 껐다켜도 살아있고, 세션 스토리지는 껐다 키면 사라진다.

api 날릴 때마다 쿠키에 있는 애들 자동으로 따라붙어서 날아갑니다

 

쿠키 : 브라우저-백엔드 주고받을 수 있는 창구 !!!!!!!!!!

로컬, 세션 스토리지 - 그건 아님

 

document.cookie 콘솔에 치면 나옴

document.cookie.split(”;”) 해서 배열처럼 [0] 가져오면 키 밸류 가져올 수 있다.

 

자바스크립트로 갈취될 수도 있어서 조심..~~

IndexedDB 옛날부터 있었던 기능이 아니라 지원이 안되는 브라우저도 있다.

1. 로컬 스토리지, 세션 스토리지, 쿠키 데이터 저장하고 조회하기
2. 로컬 스토리지 이용해서 그 안에 배열 저장하기

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

데이터 넣고 조회하기

함수 여섯개, 버튼 여섯개(로컬/세션/쿠키, 저장/조회)

 

http only인 쿠키는 조회가 안된다. 보안성 높일 수 있음

document.cookie = “aaa=망두";

 

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

 

“; “로 쪼개고 aaa= 으로 시작하는 애들 가져와주세요.

 

 

이상하게 들어갔어, localStorage는 문자열밖에 못 들어가.

객체를 문자열로 바꿔서 넣어줘야해.

JSON.stringify(el) 이렇게 감싸줘야해.

근데 누르면 기존꺼 사라지고 덮어쓰기가 돼. 우리는 누적 하고 싶은 건데,

 

const onClickBasket = (el) => () => {
    console.log(el);

    // 1. 기존 장바구니 가져오기
    const baskets = JSON.parse(localStorage.getItem("basket") || "[]"); // 일단 가져와 , 문자열을 객체로 바꿔준다.
    // 없으면 어칼건데? 빨간줄 뜸.

    // 2. 장바구니에 담기
    baskets.push(el);

    // 3. 새로운 장바구니로 세팅하기
    localStorage.setItem("baskets", JSON.stringify(baskets));
  };

원본을 변경하는 명령어는 좋은 명령어가 아니야

delete.키 는 아예 빼 버림

 

rest

 

age가 뽑혀져 나오고, rest란 변수에는 그 나머지가 들어간다.

…qqq로 받아도됨 . rest는 관례

 

 

const { _typename, ...newEl } = el;

baskets.push(newEl);

 

-> _typename빼고 나머지 가져오기 

 

스토리지는 별로 보안이 좋지 못해요~

 

useEffect() 는 서버에서 실행이 안된다. 브라우저에서만 실행이 된다!

 

 오늘은 앞서 알아 보았던 타입스크립트와 브라우저 저장소에 관해서 좀 더 세부적으로 알아봤죠! 우선 타입들을 조금 더 심도 있게 알아보는 시간을 가졌습니다! 어제 any와 unknown를 먼저 알아봤죠! any는 우리가 알지 못하는 타입을 표현할때 자주 사용했습니다! 이 경우 타입 검사를 하지 않게 되는데 타입의 일부만 알고 전체에 대한 타입을 알지 못할때 유용했습니다! unknown은 any와 비슷하면서도 조금 달랐죠! any와 unknown 모두 매개변수(arg)로 뭘 넣어주든 상관없었습니다, 하지만 unknown은 뭘 넣어 주든 뭔지는 모르지만 개발자에게 조금 더 안전하게 타입을 지정할 수 있도록 경고해 줄 수 있다는 차이가 있었습니다! 알지 못하는 타입이 생겨 any나 unknown을 사용하지 않고 우리가 직접 타입을 만들어주었던 것 기억나시나요? ( (매개변수) 앞 <>를 사용해 함수에 타입 변수를 추가했죠! ) generic 또한 any와 비슷했어요! 하지만 any는 실제로 함수 반환 시 어떤 타입인지에 대한 정보는 잃게 되어 string을 넣어도 any타입이 반환되는 반면, generic은 입력 값에 따라 내부 타입이 정의가 되었습니다.

 즉, 단일 타입이 아닌 다양한 타입에서 작동하게 작성할 수 있었습니다! 이 generic은 useState,useMutation 등을 만들어 사용할 경우에 자주 쓰인다 하였습니다! 함수에서 함수를 return하는 클로저에서 사용하는 generic 또한 알아봤습니다! 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를 사용해 보안 옵션을 걸어)를 주고 받을때 사용 - 로컬스토리지: 브라우저를 껐다가 다시 켜도 저장 정보가 남아있음, 주로 가벼운 정보들 저장 - 세션스토리지: 브라우저를 껐다가 다시 켜면 저장 정보가 사라짐

 

 우리는 브라우저 저장소를 활용해서 비회원 장바구니와 오늘 본 상품 리스트를 만들 수 있었습니다! 비회원은 아직 로그인 하기 전이므로, Backend에서 어떤 유저가 장바구니에 무엇을 담고 있는지 기록하기가 조금 애매했죠! 그렇기에 쿠키보다는 로컬스토리지에 임시로 저장해 놓고, 나중에 로그인에 성공했을 때 미리 담아 놓은 장바구니를 쉽게 가져올 수 있다 했습니다! 하나 포인트가 있었죠! object로 받게 되는 value를 JSON.stringify로 감싸주어야 문자열로 담겼던 점! 기억하시죠!?

 이렇게 담아주는 정보에서 불필요한 부분들은 REST 파라미터를 사용해 제외해주었습니다! 하지만 장바구니인 만큼 우리가 본 상품들은 계속 쌓여야하는데 새로 갱신되는 문제가 있었습니다! 이부분은 JSON.parse()를 사용해 LocalStorage의 basket을 객체로 만들어 변수에 담아주고 이 변수에 push를 통해 새로운 상품들을 담아주는 형태로 만들어주었죠!

 장바구니에 중복 상품이 들어가면 안되겠죠! 이 부분의 처리는 push() 해주는 시점에서 해주었습니다! el의 id와 baskets안에 담겨있는 id를 비교했습니다!! 장바구니의 내용을 활용해보면 오늘 본 상품 역시, 클릭했던 상품들만 로컬스토리지에 저장해 놓으면 되겠죠?! 물론, 브라우저를 껐다가 다시 들어올 수도 있으므로 세션스토리지보다는 로컬스토리지가 알맞을 것 같습니다!

Item에게 setIsPut 준 건 아니라서 전부 바뀐다.
댓글처럼 따로 빼는 건 아닌 것 같은데...
그냥 myindex만들어서 true,false 값을 줄까??...

setIsput을 먼저해서 리렌더돼서 안들어가나 했는데
prosp.onClickBasket(props.el); 을 맨 위로 올려도 그 함수의 console.log는 안들어오고 onClickOnBasket의 console.log만 작동했다.

문제 해결 못 하고 다른 방식으로 담기/담기 취소 렌더하는 걸로 변경했다.

객체 삭제하기

const baskets = [{ name: 'ddalgi', friend: 'banana'}, { name: 'banana', friend: 'kiwi'}];

delete baskets[0].name;

console.log(baskets); 

// [
//  { friend: 'banana' },
//  { name: 'banana', friend: 'kiwi' }
// ]

delete baskets.filter((el)=> el.name === 'ddalgi')[0].name

 

뭔가 엄청 잘못했나봐...

push안하고 그냥 값을 = 로 할당하는 식으로 하니까 저렇게 객체로 들어가졌다.
개체 삭제를 이런 식으로 하려고 했는데... .당황 ㅎㅎ 그래서 아직 구현 못했다

오늘은 약간 멘붕의 멘붕의 날이다ㅎㅎ

나의 X-PF님들... 떠나지 말아요ㅠㅠ

일단 저번주부터 숙제를 제대로 이해못하고 있었던 것...은 어제 그래도 많이 했다. 어제 회원가입, 로그인, 상품등록, 상품상세까지.. 제대로는 아니고 기능 구현만,,,

근데 오늘은 알고리즘 푸는데 거의 4시간? 쓴 것 같고... 집 오는 버스에서도 풀었는데 그게 오히려 독기★를 불러일으켜 안좋았던 것 같기도하고...^^ㅜㅜ 결국 숙제는 10시에 시작했는데, 내 맘대로 안되고 잘되던게 안되니까 너무 당황스러웠고~~~~~~~ 어찌저찌 굴러가게만 만들고 싶었는데 한 건 날짜 이쁘게 꾸미기... 흑흑

그래도 작은 일에 최대한 나 천잰데^^^^를 외치고 있다................ 블로그도 밀렸지만... 이틀이니까 금방 괜찮아지겠지!!!!!!!!! 알고리즘과 숙제와 하고 싶은 포폴 작업 균형을 잘 맞춰야할 것 같다.

 

두루마리뉨