Generic
any는 아무거나 다 받는다. 자바스크립트와 같음
unkown은 아직 모른다. 상황별로 구체적으로 지정해주어야 함.
unkown의 타입 지정
가급적이면 any보다는 unknown으로 지정하기
타입스크립트를 적용하면 결과에 대한 예측도 가능
예시에서는 number 아니면 "숫자를 넣어주세요" 문구가 나올 것이다.
이것을 바탕으로 Generic을 알아가보자.
- 타입을 내가 마음대로 이름지어 지정
뭐가 들어오는지는 몰라도 들어오는 것과 같은 내용으로 사용하겠다.
TIP
프리티어를 무시하게 하는 주석
// prettier-ignore
- any처럼 뭐가 들어올 지는 모르겠지만 들어오면 그 타입으로 지정
- 축약
generic 타입에 명시할 수도 있음
화살표 함수에서의 generic
HOC에 적용
작동 방식
적용 예시
컴포넌트는 리액트에서 제공하는 컴포넌트 타입이 있다.
props는 확장될 수 있다는 의미로 extends {} 와 함께 써준다.
Cookie / LocalStorage / SessionStorage
로컬 스토리지와 세션 스토리지는 키 밸류 형식으로 저장이 된다.
세션 스토리지는 브라우저를 껐다 키면 사라지고, 로컬 스토리지는 유지가 된다.
비회원 장바구니를 만든다고하면 로컬스토리지가 적합할 수 있다.
쿠키도 마찬가지로 키 밸류 형식으로 저장이 된다.
만료시간이 지나가면 해당하는 쿠키는 사라진다.
httpOnly : 자바스크립트로 접근이 가능한지 아닌지 알려준다. 체크가 되어있으면(true)이면 자바스크립트에서 쿠키를 가지고 올 수 없고 api 요청으로만 백엔드로 갈 수 있다.
체크가 되어있지 않으면 자바스크립트로 조작도 가능하다.
api 요청을 할 때 쿠키에 있는 애들이 백엔드로 같이 전송이 되어버림.
https의 s는 secure의 약자
secure가 체크되어있으면 https일때만 전송을 하겠다는 의미
백엔드에서 쿠키에 데이터를 넣어줄 수도 있음.
쿠키는 단순 저장소 개념이 아니라 백엔드와 같이 데이터를 주고받는 역할도 가능하다.
백엔드에서 브라우저로 데이터로 넣어줄 때도 쿠키를 사용한다.
쿠키가 많다고 무조건 좋은 것은 아님.
그만큼 데이터 전송량이 많아지기 때문
로컬 스토리지와 세션 스토리지는 키와 밸류로 나뉘어 조회를 했을 때 밸류 값이 나오지만 쿠키는 통째로 나옴
띄어쓰기를 기준으로 split, 배열로 감싸고 = 을 기준으로 나누면 원하는 결과가 나올 것 같다.
split 적용
aaa를 포함하는
aaa로 시작하는
방법은 다양하니 자유롭게 하기
Basket
여기의 문제점은 넣었던 것을 또 넣는 문제가 생긴다.
이미 담겨있는 id를 필터를 써서 temp에 담고, temp가 이미 있으면 경고창을 띄우며 함수를 종료한다.
이미 담긴 걸 뺄 수도 있게 응용 가능!
