サマリ

1)質問するとき

オペレーティングシステム(ウィンドウ10,Mac)

エラーが発生した場合、エラーメッセージ(スクリーンショット)

が表示されます.

どうしたいの

2）ブラウザの作業

1)要求を送信する(サーバが作成したAPIの約束に従って要求を送信する).
「https://naver.com/」=>サーバ「naver.com」の「/」ウィンドウにリクエストを送信します.
2)受信したHTMLファイルの記述

3)クライアントとサーバ

クライアントは私たちがウェブサイトを閲覧するツール(携帯電話、PC、iPad)であり、クライアントです.
サーバは、私たちが見ているサイトに送信するもの(htmlまたはデータ)を作成し、クライアントに送信します.

4)サーバレンタルとは?

サーバリースは、サーバを作成する必要がないというだけです.
サーバの設定時にEC 2を購入し、サーバ設定を借用します.つまり、サーバの仕様、ネットワーク設定などは予め設定されたサーバを借りているので、インフラストラクチャの作業は必要ありません.
※サーバリースはバックエンドリースではありません.

5) scope

var:関数単位
let:block単位(変数:letと宣言された変数は値を変更できます).
※ハウステンボス事件が発生する可能性があります.
const:block単位(定数:宣言した値は変更できません)

6) =, ==, ===

=割当てを表します.変数に値を割り当てるときに使用します.
==等差に等しい.タイプの等差を比較しません.変数値に基づいて比較します.
(ex.0="0"はtrueを返します.)
==も等差です.タイプも比較的アップグレード比較です.
(ex.0=="0"はfalseを返します.)

7)条件付き3つの演算子。

3つの演算子はif文の略です.
使用法:条件?もし本当なら:偽物なら

8）Array内蔵関数

8-1) map

mapは、配列内のアイテムを変換するためによく使用されます.
配列に属する項目を必要な値に変換し、変換後の値を新しい配列に変換します.
つまり、元の配列は変わらない.

const array_num = [0, 1, 2, 3, 4, 5];
const new_array = array_num.map((array_item) => {
return array_item + 1;
});
// console.log(new_array);
[1, 2, 3, 4, 5, 6]
// ! console.log(array_num);
[0, 1, 2, 3, 4, 5]

8-2) filter

filterは、いくつかの条件を満たす項目のみを選択し、新しい配列にする関数です.
元の配列は変わらず、必要な配列をもう1つ作成できます.

const array_num = [0, 1, 2, 3, 4, 5];
const new_array = array_num.filter((array_item) => {
	return array_item > 3
};

console.log(new_array);
[4, 5]

9) DOM

ドキュメントオブジェクトモデルドキュメントオブジェクトモデル(DOM)は、html単位ごとにオブジェクトとして扱われるモデルである.たとえば、divタグという名前のオブジェクトには、テキストノード、サブノードなど、サブオブジェクトのいくつかの値があります.この構造をツリー構造と呼ぶ.
DOMツリーを変更するたびに、すべてのDOMが検索され、変更する内容が検索されます.すべて変更すると、
不要な演算が多すぎる.だから現れたのは仮想ドームです.
仮想ドームはメモリ内で動作する偽DOMです.
仮想ドームの動作方式:既存のDOMとある動作の後、それを新しい絵のDOM(仮想ドーム)として表す.それに比べて、本当に変わった部分だけが変わった.
どのような動作をすればDOMを描き直すことができますか?

初めてページに入るときは

データ変更時は

10)ライフサイクル

コンポーネントがレンダリングの準備をしている時点から、ページから消えるまでのライフサイクルです.
詳細については、「文書:https://ko.reactjs.org/docs/state-and-lifecycle.html」を参照してください.
ライフサイクルチャート

要素が作成され、->修正(更新)、および->消去されます.

を作成することは、最初に構成部品をロードするステップです.

スパって何?

Single page Application
名前の通り、サーバが提供するのはhtmlのアプリケーションが1つしかありません.
従来のWebサイトがページを移動するたびにhtml、css、js(=静的リソース)をサーバからダウンロードする場合、SPAは静的リソースを一度だけ受信します.

11-1)どうしてhtmlをくれないの?

最も重要なのは使用性です.
ページを移動するたびに、サーバが提供するhtmlで画面を置き換えると、状態を維持することが難しく、変更されていない部分を再ロードすることもでき、効率が低下します.
(変更は1つのみですが、すべて再ロードする必要がある非効率な問題)

11-2）SPAの欠点

SPAは静的リソースを一度しかダウンロードしていないので、最初はすべてのコンポーネントを受信します.
つまり,ユーザは入るべきでないページをすべて持ってくる.加えて一度に全部持ってきて、たくさんの素子があれば、1回目のロード速度が遅くなります.

ルーティングとは?

12-1)SPAはどのようにアドレスを移動しますか?

htmlは1つしかありませんが、SPAはブラウザのアドレスウィンドウに従って他のページを表示することもできます.このようにブラウザアドレスに異なるページを表示することをルーティングと呼ぶ.

13)Webの動作方式

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