航海99 Week 02 WIL

19318 ワード
テキストリンク

第2周到だ😁!
今週は中秋節と重なり、ほとんどの時間を授業に費やしました.
私が想像していたより授業が長く、個人的でしたが疲れました・・・特にReduxは...
分からない内容を入れたいと思っていたら、頭が痛くなりました.
授业だけでは分かりにくいので、课题をしながら勉强しています.
△私は確かにそれをもっと理解しています.完璧だとは思いませんが、どのように完成したのか.
今回はDOMとサーバーレンタルについて書きたいと思います.

1.DOM


🤔 DOM... 何だったっけ...?


実際にWeb開発に携わっている人(私を含む)😅 ) 中にはDOMの存在は分かっていますが説明はあまりできません….正確にはDOMはこれ!知らない.
だから今回はDOMって何?小学生に聞かれても簡単に説明できるのでヒントをあげましょう
🙋 FEの時に登場するドームはHTMLですか?
🤖 深さの関連付けはありますが、異なります.
まず単語からDOMとは何かを推測する
(Document Object Model)ここで、DocumentはHTMLドキュメントを表します.
😡 あぁHTMLだぁ!!!
🤖 ここでいうHTMLは、ブラウザという工場で必要なコンテンツを作成するための設計書です.
🤯 それはどういう意味ですか...?
🤖 imgタグを例にとると、imgタグは実際には文字列にすぎない.ここでを使っても動かないように.しかし、このタグをブラウザファクトリに送信すると、通常、私たちが知っているタグが表示されます.
HTMLは、画面に表示する外観と構造をドキュメントとして作成する簡単なテキストで構成されています.
ただし、DOMはHTMLドキュメントの内容と構造をオブジェクトモデルに変更し、異なるプログラムで使用します.
つまり、HTMLは、コード設計されたWebページがブラウザに表示され、機能を実行するオブジェクトが実体化された形でDOMに表示されます.
👶 難しすぎる...?
🤖 建潭を買いたい子供に組み立て型の建潭を買うのも好きな意味と同じです.
👶 うん...?
🤖 実際、贈り物は乾いた壁ではなく、乾いた壁の材料ですが、子供は実際に体化した結果をDOMと呼んでいます.
🤬 具体的に言えば――――.
🤖 ドキュメントオブジェクトモデル(DOM)とは?Webページのプログラミングインターフェース.基本的に、多くのプログラムは、ページの内容と構造、スタイルを読み取り、操作できるAPIを提供しています.

DOMの構造


みんなはよくDOM Treeという単語を聞いたことがあるはずです.ではDOMの構造は木!どうしてそう言うの?どうしてそんなことが言えるの?あの….クリスマスツリーです!そう言えばカッコ悪いHTMLドキュメントを表示すると、HTMLタグに複数のタグが含まれていることがわかります.
たとえば、次のHTMLコードをDOMに設定します.
Hello,world!
👇 木の構造で出てきます

🙋 そのままいますか?
🤖 ツリー構造はノードで構成されています!
🙋 Nodeの機能は何ですか?
ノードは通常、HTML要素でよく見られる機能がノードの属性または機能であると考えられます.また、これらのノードはEventTarget(クリックなど)であるため、addEventListerなどの機能を備えています.
要するに,各工場(ノード)には基本機能がある.もちろん、各工場には、対応する結果を作成するための追加の機能があります.だからJS、Pythonのbtsでこれらの工場を制御することができます.APIのように

MDNサイトでDOMを定義します。


HTMLまたはXMLドキュメントを表すAPI
Virtual DOM
ではDOMについては、今回のバーチャルドームは何なのかな?react、Angular、VueなどのSPA frameworkを使用すると、仮想ドームがよく聞こえます.
以前は、jqueryを使用してDOMの各要素を選択してこの機能を実行していました.
ただし、reactのようなフレームワークでは、HTML要素をテンプレートにエンコードし、ある変数などのデータに接続するだけで、画面はこれらのデータに応じて調整されます.
シングルラインサマリー👉 以前:jqueryを使用してDOM->最近:SPAフレームワークを使用(VCOMを使用)
🙋 だからバーチャルドームは何ですか?
🤖 はい、DOM構造のJSオブジェクトだけを簡単に真似します.
なぜバーチャルドームを使うのですか?
HTML要素は家具などの物理要素の設計と注文と一致しなければならないと仮定します.
従来のjquery DOM操作
👨‍🔧 : その後やっと内装工事が終わりました!
👨‍🦰 : すみません、壁紙の色を変えてください.
👨‍🔧 : ..?
👨‍🦰 : あ、それから私を寝室の寝室に移して、ソファーがなくてもいいです!
👨‍🔧 : ...?!?!?!?!?! そうでなければ家を改装しなければなりません.🤬
👨‍🦰 : 😄 がんばってください.ほほほ
上記の例に示すように、実際のDOMを操作しようとするため、コンピュータの負担が重くなり、速度も遅くなります.したがって、仮想DOMを使用することは、上記の例で家具のサムネイルを作成し、大家が自分の意思で移動し、変更したかどうかを理解し、実際にはそれらの家具だけが移動していることを決定することである.
つまり、実際のDOMは重すぎて、簡単なJSオブジェクトに変換してシミュレーションし、最も経済的で効率的な方法でDOMを変更することができます.

2.SERVERLESS


まず、Webページの動作を理解します。


Webはリクエストと応答としてスクロールします!
クライアント要求サーバ、サーバ応答クライアント!

-サーバーの作業


サーバーの仕事が多い.
データの管理、分散処理、Webアプリケーションの管理が必要です.
サーバには多くの作業があります
つまり、サーバが行うことをすべて管理します.😢

-サーバーレンタルだから何だ?


私が最初の週に言ったように、サーバリースはサーバがないのではなく、サーバに関心を持つ必要はありません.
すでに構築されているサーバの一部を借りることができます.
これは、インフラストラクチャの構築もサーバの仕様も考慮する必要がないことを意味します.
私たちは、何台のサーバが必要かだけを借りることができます.

-BaaSは何を借りましたか?


BaasはBackend as Serviceの略です.
→私たちがよく楽屋で思いついたものを借りる.
私たちが使うFirebaseを例にとると、
API形式のデータベース、ソーシャルサービス連動(ソーシャルログイン)とファイルシステムを提供します!

Firebase


サイトに行ってみましょうか?(リンク)
  • Firestoreはクラウドデータベースを提供します.
  • データが追加、削除、インポートされました.
  • 樹液とfirebaseというパッケージで簡単に接続できます!

    • 火の店とは何ですか。


    Firebaseのサービスです。


    柔軟で拡張性のあるNoSQLクラウドデータベース!

    - 구조:
    - 1. Collection: 문서(다큐먼트)의 집합
    - 2. Document: JSON 형식으로 데이터를 저장할 수 있음

    火の店を設ける


    (1)生成された項目をクリック
    (2)クラウドリカバリの追加

    (3)「データベースの作成」をクリック

    (4)セキュリティルールの設定
  • テストモードlocalhostからfirstoreにデータを要求できます!
    • (5)クラウドリカバリ場所の設定

    ダッシュボードからFireStoreデータを挿入


    (1)コンソールから「マイアイテム」→「Firestore」を選択しダッシュボードに入る

    (2)ダッシュボードの「コレクションの開始」ボタンをクリック

    (3)コレクションの作成

    (4)文書IDを指定し、フィールド値を記入する

    Firebaseをリアクターにバインド


    Firebaseパッケージのインストール

    yarn add firebase

    configのインポート


    (1)srcフォルダのサブフォルダにFirebaseを追加する.jsファイルを作成してください
    //firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    // firebase 설정과 관련된 개인 정보
};

// firebaseConfig 정보로 firebase 시작
initializeApp(firebaseConfig);

// firebase의 firestore 인스턴스를 변수에 저장
const db = getFirestore();

// 필요한 곳에서 사용할 수 있도록 내보내기
export { db };
    (2)FirebaseダッシュボードでWebボタンをクリックします.

    (3) App.jsのfirebase.jsからエクスポートされたFirestore DBのインポート
    import {db} from "./firebase";
    (4)useEffectからのデータのロードと表示
    ...
const bucket = firestore.collection("buckets");
React.useEffect(() => {
    console.log(db);
  }, []);
...

    FireStoreデータをプレイ


    （1）全てのデータを読み込む


    collection()に移動し、getDocs()にデータをインポートします.
    そしてforeach文で内容を確認できます!(実は並びじゃない!
    import { db } from "./firebase";
import { collection, getDoc, getDocs } from "firebase/firestore";
...
React.useEffect(async() => {
    const query = await getDocs(collection(db, 'bucket'));
		console.log(query);
    query.forEach((doc) => {
      console.log(doc.id, doc.data());
    });
  }, []);

    (2)データの追加


    コレクションを見つける→addDoc()!
    ダッシュボードに追加されたものが正しいかどうか見てみましょう.
    import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
...
const docRef = await addDoc(collection(db, 'bucket'), {
     completed: false,
     text: "new"
   })

    （3）データの修正


    コレクションを見つける→ドキュメントIDでDoc()を更新!
    import { db } from "./firebase";
import { collection, doc, updateDoc } from "firebase/firestore";
...
React.useEffect(async() => {
    const docRef = doc(db, "bucket", "P5Oz4GbccEg9uaca8sJG");
    await updateDoc(docRef, {
      completed: true,
    });

  }, []);
    (4)データの削除
    コレクションを検索→ドキュメントIDでDoc()を削除!
    
import { db } from "./firebase";
import { collection, doc, deleteDoc } from "firebase/firestore";
...
React.useEffect(async() => {
    const docRef = doc(db, "bucket", "P5Oz4GbccEg9uaca8sJG");
    await deleteDoc(docRef);

  }, []);

    コレクションの名前を変えたらどうなりますか?

    // bucket에서 buckets로 이름 바꾸기! 그리고 대시보드를 확인해보세요!
import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
...
const docRef = await addDoc(collection(db, 'buckets'), {
     completed: false,
     text: "new"
   })

    良い開発者になるためには、大変ですが、努力を続けなければなりません.
    たまに疑心暗鬼になることもありますが、今やっていることが正しいと信じて、最後までやり続けてください.
    高同時プログラミングシリーズ:4大同時ツールクラスの機能、原理、および応用シーン
    J 2 ee高同時の場合のListenerインスタンスの詳細