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