主な技能学習注釈[深化]

1,2週目

Prototype

JavaScriptとクラスベースのオブジェクト向け言語
JavaScriptはプロトタイプベースの動的言語であり,クラスベースのオブジェクト向け言語とは異なり,オブジェクトを作成する方法も異なる.

プロトタイプモードは、オブジェクトの作成時にリソースコストを最小限に抑えるモードです.したがって、オブジェクトを作成するときは、オブジェクトを再作成するのではなく、プロトタイプ(プロトタイプ)をコピーして、プロトタイプが持つメソッドまたはプロトタイプをインポートして使用できるようにします.
[クラウドベース]
オブジェクトを作成する前にクラスを定義し、オブジェクトインスタンスを作成します.
[JavaScript]
クラスなしオブジェクトの作成(テキストとジェネレータ)
JavaScriptは、オブジェクトの作成時に関数を使用して作成し、オブジェクトのプロトタイプをコピーしてオブジェクトを作成します.
各オブジェクトは、自分がどこでコピーされたかを知っています.
オブジェクト向けの継承コンセプトのように、親オブジェクトのpropertyまたはメソッドを継承して使用できます.
これを委任と呼ぶ.
これらの親オブジェクトをプロトタイプオブジェクトまたはプロトタイプと呼びます.
また、参照親はプロトタイプリンクと呼ばれます.

フォルダ構造の参照

defaultProps

構成部品のPropsがない場合にpropsをデフォルト値に設定すると、データがない場合にレイアウトが破壊されたり、エラー画面が表示されたりすることを防止できます.
//データがない場合のデフォルト設定
.... (構成部品の下にある)...
Post.defaultProps = {
user_info: {
user_name: 'tester',
user_profile: ' https://newsimg.sedaily.com/2021/10/13/22SQ3131O5_1.jpg '
},
image_url: ' https://newsimg.sedaily.com/2021/10/13/22SQ3131O5_1.jpg' ,
contents:「イカゲームはおもしろい!」
comment_cnt: 10,
insert_dt: '2021-02-27 10:00:00'
}

最小単位構成部品

最小単位素子を作成する場合、propsを使用して異なるコンテンツを異なる方法で表示し、素子内部のコンテンツを毎回個別に記述することができます.

# 우선 defaultProps를 사용해서 컴포넌트에서 사용할 상태의 초기값을 설정해 둔다.

Grid.defaultProps = {
  children: null,
  is_flex: false,
  width: "100%",
  padding: false,
  margin: false,
  bg: false 
}

# styled-components를 사용해서 해당 props를 통해 동적으로 스타일을 적용 시킬 수 있도록 정의 할 수 있다.

const GridBox = styled.div`
  width: ${props => props.width };
  height: 100%;
  box-sizing: border-box;
  ${props => props.padding ? `padding: ${props.padding};` : '' }
  ${props => props.margin ? `margin: ${props.margin};` : '' }
  ${props => props.bg ? `background-color: ${props.bg};` : '' }
  ${props => props.is_flex ? `display: flex; align-items: center; justify-content: space-between;` : '' }

# 만약 별도의 props를 내려받는다면 그 props에 해당하는 값에 따라 유동적으로 렌더링을 할 수 있게 받아준다.

const Grid = (props) => {
  const { is_flex, width, padding, margin, bg, children } = props
  const styles = {
    is_flex,
    width,
    padding,
    margin,
    bg
  }
  
  return (
  	... 컴포넌트 렌더링 ...

# 상위에서 받아온 props는 컴포넌트가 렌더링될때 사용될 수 있도록 컴포넌트 내부에 작성한다.

  return (
    <React.Fragment>
      <GridBox {...styles}> // spread 연산자를 통해서 속성 적용
        { children }
      </GridBox>
    </React.Fragment>
  )
}

トークンベースの認証

セッション認証の欠点
セッションベースの認証では、サーバがユーザのすべてのログイン状態を持っているため、ログインするユーザが多ければ多いほど、サーバの負荷が大きくなります.

**Google Authの行動をまとめてみましょう

Webリポジトリ(feat.token)

Cookie、セッションストレージ、ローカルストレージの使用状況と違いを理解する

クッキー

クライアントがローカルに格納鍵:値ペアを含む小データファイル

document.クッキーによる

へのアクセス

expires(有効期限)を指定できます.ブラウザが終了しても

(有効期限)が保持されます.

Cookieクライアントのステータス情報をローカルに格納します.

を参照してください.

クライアントあたり最大300個のCookieを保存でき、ロットあたり20個に制限され、Cookie 1台あたり4 KB

Cookieは、ブラウザリクエスト時にリクエストヘッダを追加し、ユーザーリクエストを必要とせずにサーバに自動的に送信します.

ローカルストレージとセッションストレージ

サーバ

に自動的に送信.

windowオブジェクトの

デスクトップが5~10 MBのモバイルデバイスの容量が不足している場合、IndexedDB(50 MB)

ローカルストレージセッション格納データ保持O(ユーザがクリアしていない)用途自動ログインアラートパスワードなどの重要情報(絶対保存Xパスワードなど)を使用してXを絶対保存

差異の定理

[1]差異の整理
1.Cookieの欠点を補い、HTML 5に「Webストレージ」技術が誕生した.
1-1)Webストレージ:ローカルストレージ、セッションストレージ.
1−2)WebストレージはKeyとValueの形で存在する.
1−3)Webストレージは、クライアントに関する情報を格納する.
1−4)Webストレージは、ローカルにのみ情報を格納し、Cookieは、サーバおよびローカルに情報を格納する.
​

ローカルストレージ永続ストレージクライアント情報ex)自動ログインストレージ

.
​

セッション格納セッション終了時(ブラウザを閉じる時)クライアントを削除する情報ex)入力フォーム情報格納

.
3-1)ローカルおよびセッションストレージ

장점1 : 서버에 불필요하게 데이터를 저장하지 않는다.

3-2)ローカルおよびセッションストレージ

장점2 : 용량이 크다. (약 5Mb, 브라우저마다 차이 존재)

3-3)ローカルおよびセッションストレージの欠点:HTML 5をサポートしていないブラウザは使用できません
​

Cookieは、有効期限を有するKey、Valueリポジトリ

である.
4-1)Cookieのメリット:ほとんどのブラウザでサポートされています
4-2)Cookieの欠点1:各HTTP要求は、api呼び出しによってサーバに負担される1つを含む.
4-3)Cookie欠点2:Cookie容量が小さい(約4 Kb)
4-4)Cookieの欠点3:暗号化はx->ユーザ情報盗難のリスクがある
​
​
​
[2]各例-どのタイプのデータをどこに格納すればよいか.
​
自動ログイン→ローカルストレージ
フォーム情報の入力->セッションストレージ
非登録カート->セッションストレージ
ポップアップウィンドウを再試行しない->Cookie
​
​
​
JavaScriptオブジェクトの例
let object = {
"A": 1, "B": 2, "name": "wecode", "Key": "Value"
}
​
[3]取得値
​

ローカルストレージ

localStorage.A (Key == A)
localStorage.getItem("A")
​

セッションストレージ

sessionStorage.A (Key == A)
sessionStorage.getItem("A")
​

クッキー

getCookie("A") (Key == A)
​
​
​
[4]設定方法
​

ローカルストレージ

localStorage.A = 1 (Key == A, Value = 1)
localStorage.setItem("A", 1)
​

セッションストレージ

sessionStorage.A = 1 (Key == A, Value = 1)
sessionStorage.setItem("A", 1)
​

クッキー

setCookie(「A」,1,7)(Key=A,Value=1,有効期間=7秒)
ソース:https://racoonlotty.tistory.com/entry/%EC%BF%A0%ED%82%A4%EC%99%80-%EC%84%B8%EC%85%98-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80%EC%99%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

パッド

yarn add redux react-redux redux-thunk redux-logger [email protected] [email protected]

ConnectedRouter

必要に応じて必要に応じてルーティングするために必要なライブラリ
既存のBrowswerRouterでは、ConnectedRouterを使用してルーティングコンポーネントをカプセル化し、ショップが設定した履歴情報を使用してルーティングを行います.

yarn add immer redux-actions

redux-actionsとimmer

imer管理不変性、redux-actionsは動作管理をより楽にします!

**リカバリポイントの設定の流れを再確認する必要があります.△ちょっと難しいですね.

うろうろするのはシミュレーション学習法ですか...
redux-action、immer、connectedRouterのreduce設定を追加するのは少し複雑です.
コードを一つ一つ暗記するよりも、大きな脈絡からどの要素が貼り付けられているかを暗記したほうがいい.
最終的には、基本的なプロセスで非常に簡単な冗長性を使用し、徐々に必要とされるパッケージを挿入するプロセスで、
コードは複雑になる可能性がありますが、インストールされたパッケージは可用性を向上させます.

import React from "react";
import {Route} from "react-router-dom";
import {ConnectedRouter} from 'connected-react-router'
import {history} from '../redux/configureStore'

import Header from "../components/Header";
import PostList from "../pages/PostList";
import Signup from "../pages/Signup";
import Login from "../pages/Login";
import {Grid} from "../elements";

function App() {
  return (
    <React.Fragment>
      <Grid>
        <Header></Header>
        <ConnectedRouter history={history}>
          <Route path="/" exact component={PostList} />
          <Route path="/login" exact component={Login} />
          <Route path="/signup" exact component={Signup}/>
        </ConnectedRouter>
      </Grid>
    </React.Fragment>
  );
}

export default App;

Firebase認証の使用

Firebaseインストール

導入

import firebase from 'firebase/app'
import 'firebase/auth'

Firebase構成情報

を入力して初期化する.

ログイン有効性

ログインしようとすると、ユーザーアカウントが有効で、パスワードが正しいことを確認します.
自分でデータを比較するのではなく、Firebase authログイン機能が非同期で通信している場合、エラーコードに基づいてログイン失敗の原因をユーザーに表示できます.
次のリンクは、検証パッケージの認証認証エラーコードのページです.
https://firebase.google.com/docs/reference/js/auth?authuser=0#autherrorcodes

ログインの保持

リッドからログイン情報を返信すると、セッション情報によりログイン状態

に再移行する.

認証ステータスの継続性の変更
firebase.auth().setPersistenceメソッドを呼び出すと、既存の永続性タイプを指定または変更できます.

import { getAuth, setPersistence, signInWithEmailAndPassword, browserSessionPersistence } from "firebase/auth";

const auth = getAuth();
setPersistence(auth, browserSessionPersistence)
  .then(() => {
    // Existing and future Auth states are now persisted in the current
    // session only. Closing the window would clear any existing state even
    // if a user forgets to sign out.
    // ...
    // New sign-in will be persisted with session persistence.
    return signInWithEmailAndPassword(auth, email, password);
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
  });

Permit.js

は、セッション情報とログイン状態条件に基づいて、コンポーネントモジュール化

を表示するか否かを判定する.

3週目

DeboringとThrottle

Debounce
イベントが発生した場合は、イベントが実行されるまで待機し、同じイベントが発生した場合は、以前のリクエストをキャンセルします.
通常、Decounceは入力イベントをクエリーするのに適しています.
Throttle
一定期間に発生したイベントを定期的に収集し、実行します.
Throttleはイベントをスクロールするのに適しています.

lodash(lodashライブラリ)

JavaScriptユーティリティライブラリ

取付方法

yarn add lodash

useCallback

第4週

Firestore複合クエリーの使用

無限スクロールの作成

が無限にスクロールする場合、必要なデータの値だけを取得するために、クエリーカーソルを使用してデータをページングできます.

キーワード:クエリーカーソルを使用してデータをページングし、startAt()

理解する必要がある

なぜ

useCallback()と書くのか、どう書くのか.コメント作成とは?