Defcos Notationクローン:モジュール、fetch、SPA

ローカルストレージに関する注意事項

localStorageにはstringしか含まれていないのでJSON.stringgifyで文字列に変換し、読み込み時もJSONである必要があります.parseでグループ化して書くべきです.
localStorageの容量が大きくなったり、外部で操作するとエラーが発生する可能性があります.jsを作成し、try catchを使用してここでのみアクセスすることが望ましい.

🔺 モジュールとimport

import defaultExport from "module-name";各構成部品はファイルを使用するため、ほとんどの構成部品はdefaultルールとしてエクスポートおよびインポートされます.import * as allItems from "module-name";module-nameでエクスポートされたすべてのコンテンツがインポートされます.as以降の名前は重複していなければ、勝手に決めることができます.import { loadItem } from "module-name";module-nameは、エクスポートされた特定の値のみを取得します.import defaultFunction, { loadItem } from "module-name";export defaultと個別exportを一度にインポートできます.import "module-name";個別のモジュールバインドなしでロードできます.ロードするだけでいいです.

モジュールを使用する理由:

各JSで使用されているモジュールを明示的にインポートすることで、未使用または未使用のスクリプトを追跡できます.

scriptタグのロード順序は重要ですが、モジュールの順序は関係ありません.

script srcと異なり、グローバル汚染は発生しない.

|𐥍⚠注意事項:importを使用するにはWebサーバが1台必要であり、後でjsを貼り付けなければならない.

Promiseの組み込み関数

Promise.all(iterable) ex) Promise.all([promise1, promise2, promise3]).then(()⇒{すべてのイテレーションのPromiseを実行して返します.

Promise.any(iterable)複数の承諾のうちの1つを解決すると終了する.

Promise.allSettled(iterable)成功するかどうかにかかわらず、この状況は処理されます.

Promise.resolve(value)Promiseは、所与の値を実行する.次に、オブジェクトを返します.

async wait特性

asyncキーワードを持つ関数は、実行結果をPromiseで包みます.

async awaitが拒否する必要がある場合はtry catchを使用します.

デフォルトではawaitはasyncで囲まれた関数sccpeでのみ使用できますが、toplewaitが表示され、toplevelでも使用できます.ただしサポートされていないブラウザ(IOS Safari、IEなど)

🔺 fetch

Fetch APIは、Promiseベースの非同期HTTP要求を容易に実行できるAPIである.XMLHTTPRequestの代わりに、サポートされていないブラウザでは、特定のスクリプトを使用してサポートできます.
⚠HTTPエラーが発生した場合、ネットワークエラーまたはリクエストが完了していない場合にのみ拒否されるため、rewponseのstatus codeまたはokを確認してfetchが成功したかどうかを確認する必要があります.
1番目のパラメータURL、2番目のパラメータでオプションオブジェクトを受信し、Promiseタイプのオブジェクトを返します.

fetch("https://jsonplaceholder.typicode.com/posts/", { // 패치사용예시
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        title: "Test",
        body: "I am testing!",
        userId: 1,
      }),
    }).then(res => {
          if (res.ok) { // res.ok는 200~299 사이인 경우 true 반환
            return res.json()
          }
          throw new Error(`Status: ${res.status} 요청을 처리하지 못했습니다.`)
        }) 

🔺 SPAとhistory api

SPA(SIngle Page Application)

サーバからHTMLをダウンロードすると、通常はサーバ上でHTMLが生成され、JSで操作されるが、レンダリングポイントが乱雑になるという問題が発生し、繰り返しレンダリングが必要になる.これらの問題から引き出された概念はSPAである.
SPAはAPIのみを処理し、すべてのレンダリングはクライアントで行われ、単一のページの名前から、Webサイトのページ全体を1つのページに配置し、画面を動的に切り替えて表示することもできます.
より詳細には、Webアプリケーションは、要求に応じてデータをJSONなどに格下げするだけで、個別のクライアントアプリケーションを構成する.クライアントのhtmlはindexです.htmlは1つのみ存在し、すべてのurlリクエストをインデックスします.html、動的処理および操作後のurl、および描画するページに移動します.
ページを移動するたびにすべてのコンテンツをロードする方法とは異なり、コンテンツを再ダイナミックにレンダリングするだけなので、最初のロード後にネットワークの負担を減らすことができます.history apiを使用するときにURLリクエストパスにファイルがない場合はindexを使用します.htmlを返すには追加の設定が必要です.
SPAルーティング方式はhashbang,hitory apiなどがあり,Angular,React(事実ライブラリ),VueなどのSPAフレームワークがあり,JavaScriptフレームワークの第3の大将に選ばれている.

history apiメソッド

history.pushState():指定されたデータをセッション履歴スタックに格納します.シリアル可能なすべてのJavaScriptオブジェクトを格納できます

history.replaceState():セッション履歴に新しいurlステータスをスタックするのではなく、現在のurlを置き換えます(支払、コミットなどの操作で後方に移動しないようにします).

pushState/replaceStateで使用される値

state: history.stateから取り出して書き込むことができる値.

title:変更するページを指すtitleの値ですが、ほとんどのブラウザではサポートされていないため、文字列が空になることが多いです

url:セッション履歴の新しいurl.urlを変更しても画面は再ロードされません.

history.go():特定のセッション履歴に移動する非同期メソッド.1を入れると前のページを直接呼び出し、-1を入れると後のページを直接呼び出します.

history.back():非同期メソッドで、セッション履歴の次のページに直接移動できます.ブラウザをクリックした場合と同じ効果が得られます.

history.forward():非同期メソッドで、セッション履歴の前のページに直接移動できます.効果は、クリックしたブラウザの進行方向と同じです.

history.popstate():ブラウザのbackボタンまたはhistory.go, history.これは、履歴が前後に移動したときに発生するイベントです.

request、export default、exportの違いをどのように実現するか、historyAPIなど、タスククローンを行う前に学んだことは何も知らない.結局、授業を再開したり、グーグルを遊んだりして、概念を理解するのに多くの時間を費やしました.どうせ長い時間がかかるなら、勉強するときは必ずよく勉強しなければなりません.
理解できないからTILを書くのか、TILを書かないから理解できないのか.理解できなければTILを書くことをもっと勉強すべきだ.ストレスを言い訳にしたくないようなので反省しました.日記帳のような文章よりもTILに集中すべきです.
コメントサイトスパって何?by Husky