220419
any 와 unknown
ts를 쓸 때 값을 모르는 데이터가 있다면 any와 unknow을 넣어줄 수 있다. 둘 다 아무거나 넣을 수 있다.
unknown은 타입에 따른 지시가 있어야한다.
타입스크립트는 어떤 결과가 나올지 예측이 가능하다.
unknown 은 개발자가 안전하게 코딩하도록 유도한다. 그렇기 때문에 코드양이 늘어날 수 있지만 any보다는 안전하게 만들어줄 수 있는 unknown 사용하자.
Generic
평소에 쓰이기보단 특정 라이브러리를 만들 때 많이 사용한다. useState 도 이런 방식으로 만들어졌다.
any 와 공통점
어떤 타입의 값이 들어올지 모른다.
any 와 차이점
any는 리턴값이 뭐가 나올지 모르지만 generic은 들어온 값에 따라 타입이 정해지기 때문에 return 타입을 예측할 수 있다
generic 타입은 내가 원하는 대로 네이밍을 할 수 있다.
// 타입 쓰는 순서 : <뒤에 두개를 묶어줄 공통 부분>(매개변수 타입)[리턴값 타입]
function getGenerics<MyType1, MyType2, MyType3>
(arg1: MyType1, arg2: MyType2, arg3: MyType3): [MyType3, MyType2, MyType1] {
return [arg3, arg2, arg1];
}
generic 과 closure
closure를 이용한 HOF에도 generic을 지정해줄 수 있다.
const withAuth = <C>(component: C) => <P>(props: P): [C, P] => {
return [component, props];
};
const result5 = withAuth("Bbb")({ aaa: "철수" });
generic 과 HOC
HOC 에도 generic을 지정해줄 수 있다.
export const withAuth = (Component: ComponentType) => <P extends {}>(props: P) => {
const router = useRouter();
// 권한분기 로직 추가하기
useEffect(() => {
if (!localStorage.getItem("accessToken")) {
alert("로그인 후 이용 가능합니다");
router.push("/23-04-login-check");
}
}, []);
return <Component {...props} />;
};
component의 ComponentType
은 react에서 제공하는 타입이다.
또 여러 개의 매개변수가 들어올 수 있으므로 <P extends {}>
로 props 의 타입을 묶어준다.
cookies
- 저장된 내용이 api를 요청할 때마다 백엔드에 전달된다.
- HttpOnly 는 api 요청에서만 백엔드로 보낼 수 있으므로 목록에 체크 표시가 된 부분들은 js에서 사용할 수 없다.
- https 는 안전한 통신을 보장한다. 주소 앞에
자물쇠 아이콘
이 생성되어 있다. - http 는
주의 요함
이라는 문구가 같이 뜬다. - cookies 에 secure 항목은 https 사이트에만 정보를 전송하겠다는 뜻이다.
- 응답할 때 백엔드에서 cookies에 데이터를 넣어줄 수도 있다.
- 쿠키는 단순 저장소 개념이 아니라 백엔드와 데이터를 주고 받는 개념이다.
- 쿠키에 저장된 내용들이 많을수록 백엔드에 전송되는 데이터가 많아지기 때문에 필요한 것들만 쿠키에 넣는 것이 좋다.
localStorage를 이용한 장바구니
브라우저 localStorage 를 이용하여 회원가입이나 로그인을 하지 않아도 장바구니에 상품을 담는 소스 코드를 만들 수 있다.
export default function BasketPage() {
const { data } = useQuery(FETCH_BOARDS);
// button 을 클릭했을 때 html 쪽 el이 넘어옴. 매개변수이기 때문에 이름은 아무거나 상관X
const onClickBasket = (el) => () => {
console.log(el);
// 1. 기존 장바구니 가져오기
// 데이터를 먼저 가져와서 새로 담은 데이터를 push || 불러올 데이터가 없다면 [] 출력
const baskets = JSON.parse(localStorage.getItem("baskets") || "[]");
// 2. 중복값 확인하기
// const temp : 임시로 데이터를 담아놓는 변수 네이밍
const temp = baskets.filter((basketEl: IBoard) => basketEl._id === el._id);
if (temp.length === 1) { // 중복되는 값이 있을 때
alert("이미 담으신 상품입니다.");
return; // 함수 종료
}
// 3. 장바구니에 담기
const { __typename, ...newEl } = el;
baskets.push(newEl);
// localStorage에는 텍스트만 들어갈 수 있기 때문에 el을 텍스트로 바꿔주어야 한다.
localStorage.setItem("baskets", JSON.stringify(baskets));
};
}
같은 방식으로 장바구니에 담은 물건을 조회하는 소스코드를 작성할 수 있다.
export default function MyBasketPage() {
const [basketItems, setBasketItems] = useState([]);
// 프론트엔드 서버에는 localStorage가 없기 때문에 프리렌더링 과정에서 문제가 생길 수 있다
// 따라서 모든 페이지가 마운트 된 다음에 실행될 수 있도록 useEffect 안에 넣어주자
// if(typeof window !== "undefined") 는 런타임 오류가 뜰 수 있다
useEffect(() => {
const baskets = JSON.parse(localStorage.getItem("baskets") || "[]");
setBasketItems(baskets);
}, []);
}
Author And Source
이 문제에 관하여(220419), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@imnamesol/220419저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)