220419

anyとunknown

tsを書くときは、値を知らないデータがあればanyとunnowを加えることができます.両方とも入れられます.

unknownにはタイプの指示があるはずです.

タイプスクリプトは、結果を予測します.
unknownは開発者を安全に符号化するように導いた.そのため、コード量は増えるかもしれませんが、anyよりも安全なunknownを使いましょう.

Generic

通常の使用よりも、特定のライブラリを作成するときに多く使用されます.useStateもこのように作成されています.

anyとの共通点

どんな値段になるか分かりません.

anyとの違い

anyは戻り値が何なのか分かりませんがgenericは入力した値に基づいてタイプを決定するので、戻りタイプを予測できます
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: "철수" });

汎用と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は、反応によって提供されるタイプである.
また、複数のパラメータが導入される可能性があるので、propsタイプを<P extends {}>でバンドルします.

cookies

apiが要求されるたびに、

に格納されたコンテンツがバックエンドに送信される.

HttpOnlyはAPIリクエストからバックエンドにしか送信できないため、リストにマークされている部分はjsでは使用できません.

httpsは安全な通信を保証します.アドレスの前に자물쇠 아이콘が生成される.

httpでは、주의 요함の文が同時に表示されます.

cookiesのセキュリティ・アイテムは、httpsサイトにのみ情報を送信することを意味します.

が応答すると、バックエンドはクッキーにデータを入れる可能性があります.

Cookieは単なる記憶概念ではなく,バックエンドとデータを交換する概念である.

Cookieに格納されているコンテンツが多ければ多いほど、バックエンドに送信されるデータが多くなるので、必要なコンテンツだけCookieに格納することが望ましい.

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);
  }, []);
}