[TIL]fetch関数

アクセス権のある値

フロントエンドでAPIを呼び出すと、バックエンドは要求に従ってデータを返します.HTTP通信の1つの特性は無状態(以前の通信の状態を覚えていない)であるため、ユーザがページを切り替えるたびに、フロントはユーザがログインしたかどうかを知り、バックエンドに要求を送信する必要がある.
→フロントは、ユーザーがログインしているかどうかを知るためにブラウザに情報を格納し、accesstokenを使用して管理する.フロントが直接アイデンティティ、パスワード値を管理するとハッカーの危険性があり、accesstokenで管理する必要があります
accesstokenには、他の個人情報を含めることはできません.アイデンティティを含めることはできません.

ログインページでイベントが発生した場合のデータ処理手順

ログインページ(client)では,ユーザがid,pwを入力してログインし,loginボタンをクリックしてクリックイベントが発生し,バックグラウンド(server)を介してAPI通信を行う.

API呼び出し(fetch関数またはaxiosライブラリを使用)は、呼び出し方法(GET、POST、PUT、DELETE)、body(ログイン情報)などに必要な情報を含む.(Request)

バックグラウンドでは、フロントからの情報が受信され、データベース内のユーザーデータが一致しているかどうかを確認し、フロントに応答を送信します.(Response)
ログインに成功するとaccess tokenが同時に渡されます.

Fetch関数

fetch関数は,クライアントがサーバにリクエストを送信する際に使用する関数であり,ログインリクエストを送信する際にpostメソッドを用いて情報を伝達する.情報はbody部分に組み込まれて送信されます.情報を公開できないためです.HTTP規則によれば、JSONタイプに含まれる情報は文字列形式で伝達されなければならないため、stringifyの方法で文字列形式に変換される.
fetch関数では、パラメータには、サーバアドレス、リクエストに関する情報(メソッド、ヘッダ、ボリューム)が含まれます.

fetch("api주소", {
      method: "POST",
      body: JSON.stringify({
        email: this.state.id,
        password: this.state.pw,
      }),
    })
      .then((response) => response.json())
      .then((result) => console.log("결과: ", result));