Day 26.

[ Generic ]

1𗞚𗞚anyとunknown
typeを知らない場合は、開発者を安全にコードするためにunknownではなくanyに設定します.
anyでは、関数を返すときにどのようなタイプの情報が実際に失われ、文字列を入れても任意のタイプが返されますが、genericでは入力値に基づいて内部タイプが定義されます.

// 6. generic 응용

export function getGenericReverse<MyType1, MyType2, MyType3 >(arg1: MyType1, arg2: MyType2, arg3: MyType3): [MyType3,MyType2,MyType1]  {
  return [arg3, arg2, arg1]
}
const result6 = getGenericReverse("철수", "다람쥐초등학교", 8);
console.log(result6);

================================================================================

// 8. generic 응용 - 축약버전2

export function getGenericReverseTUV<T, U, V>(arg1: T, arg2: U, arg3: V): [V,U,T]  {
  return [arg3, arg2, arg1]      📌 📌 (매개변수) 앞 < >를 사용해 함수에 타입 변수를 추가해 직접 type을 만들어줄 수 있다
}
const result8 = getGenericReverseTUV("철수", "다람쥐초등학교", 8);
console.log(result8);

genericは単一のタイプではなく複数のタイプで動作し、usState、useMutationなどの作成や使用時によく使用されます.
useStateの作成ではありませんが、hocで適用できます.
2️⃣ generic - closure
関数から関数を返すモジュールで使用されるgeneric

const aaa = <T>(arg1: T ) => <U>(arg2: U ): [ T, U ] => {
	return (있을경우)
} 

3️⃣ generic - hoc
パラメータと返される形状は構成部品であるため、構成部品部分は構成部品タイプとして指定され、props部分はオブジェクト{}として指定される.

<P extends {}>  📌 뭔진모르지만 객체 타입이야~

returnは、:によってreturn typeを指定することができる.

fuction aaa():string{
	return “망고”
}

[ Cookie/LocalStorage/SessionStorage ]
ブラウザリポジトリ3ペア😎
1. Cookie
2. Local-Storage
3. Session-Stroage
変数にデータを入れると、リフレッシュ時に格納されたデータが失われます.AccessToken、stateもページの更新または移動時に初期化されます.これは、HTML、CSS、JSが再ダウンロードされ、画面に再描画されるため、データを保持するためにブラウザリポジトリに格納する必要があるためです.
🔥 各ブラウザ・リポジトリの特徴が異なるため、プロパティに基づいて3つの側面から1つを選択して使用してください.
1️⃣ Session-Stroage
ブラウザが終了すると、保存情報は消えます
📌 setItem() .getItem()の使用
2️⃣ Local-Storage
ブラウザを閉じても、消失した勘定科目の勘定科目を永続的に保存することはできません.主に、より軽い情報を格納します.
📌 setItem() .getItem()の使用
📌 refreshTokenを学習する前に一時的に使用
3️⃣ Cookie ❗️❗️
Backend-APIリクエストの場合、格納されたデータはhttp通信ヘッダに自動的に含まれます(リクエストはありません!)見送りました.
利点:ブラウザとバックエンドの間でデータを共有する場合は、Cookieで自動的に転送できます.
欠点:データが多すぎると、時間がかかりすぎて効率が低下します.有効期限があるため、ブラウザを閉じても有効期限が切れるまで待つ必要があります.セキュリティに敏感なコンテンツであれば、避けるべきです.
¥¥¥はセキュリティ上重要なコンテンツを交換する際にオプションを使用し、http通信のみで交換する
➡️ secure: https, httpOnly: true
📌 document.クッキーの使用
🔎 Cookieデータの照会
Cookieに含まれるコンテンツをコンソールに印刷すると、1文字列として表示され、セミコロン;を基準にデータ分割が行われます.
Cookieデータ加工法🍪
1.セミコロンで分割
2.startWithを使用して必要なコンテンツの鍵を検索してフィルタする
3.key-valueシェイプをvalueのみを保持するように置き換える
[ Basket ]
非会員としてショッピングバスケット&今日は本商品リストを作りましょう!
非会員状態でローカルストレージに一時的に格納しapiで情報の受信を要求する
1ますます情報を手に入れましょう!(文字列をJSON.stringifyに変換)

const onClickBasket = (el) => () => {
    localStorage.setItem("basket", el);  ---> ❗️ object로 받아오기 때문에 JSON.stringify로 문자열 변환해야한다
  };
                      ⬇️ 
  const onClickBasket = (el) => () => {
    localStorage.setItem("basket", JSON.stringify(el));
  };

JSON.stringyfy():object->文字列JSON.parse():文字列->オブジェクト
2ππ▼▼▼▼▼▼▼▼▼▼▼▼▼

const onClickBasket = (el) => () => {
    const { __typename, ...newEl } = el;  ---> ❗️ 새로운 NewEl 선언, __typename은 지우자
    localStorage.setItem("basket", JSON.stringify(newEl));
  };

3▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

既存データ+new
1.新規に発表された(バスケット)胃とは違う!

const baskets = JSON.parse(localStorage.getItem("basket") || "[]")  ---> ❗️ 기존 데이터 가져와서 배열로 바꿔주고 새로 선언 (없으면 빈값)

新しいEL宣言

const { __typename, ...newEl } = el; ---> ❗️ 필요없는 데이터 지우고 새로 선언

新声明のバスケットに入れる

baskets.push(newEl);

加工データのロードサイクル

localStorage.setItem("basket", JSON.stringify(baskets))

重複除外
1.かごの中のel.id(basektel.id)とクリックしたel.idが同じ場合は一時記憶tempに含める

    const temp = baskets.filter((basketEl) => basketEl._id === el._id);

値が

の一時記憶(長さが1の場合)である場合、

が戻る.

if (temp.length === 1) {
      Modal.error({ content: "이미 담은 상품입니다" });
      return;
    }

以降の内容は同じ

4ログイン後に持参