今週は特技入門週間です.
最初から地面にヘディングをする気持ちで、何から始めればいいのか分からず、迷ったし、急に涙が出てきた.😭
課題は「1週間の採点を残す」こと.
次の機能があります.
1.メイン画面の点数はランダム
2.詳細ページは週ごとのページです
3.スコアを選択します.(ホームページにアクセスした場合、選択したスコアは反映されません)
最初は繰り返さない扉で、7ページに丸と三角形を描いていましたが、どう考えてもその方法が間違っていたようで、5日目にひっくり返してしまいました.
(今週を過ぎても航海コースは今まで満足していたと思います.2週目にアルゴリズムが完成したので、主な特長で使われていたJavaScript文法は少しも気まずくない…!)

今週習ったこと

サーバレンタルとは?

1)データの作成
2)データ照会
3)データの削除・変更
などの機能を代替して提供されるサービスをサーバリース(サーバロールを予め設定したサーバ)と呼ぶ.
=>つまり、サーバリースは、1つのサーバから10のサーバに作成する必要はありません.サーバ機能を提供する場所では、一度クリックするだけで必要な機能を実現できるサービスをサーバリースと呼びます.
Ex)火台
これらのサーバからデータをリースまたは送信するには、サーバによって規定されたルールに従う必要があります.
リクエストサーバ
サーバレスポンス
=>これらのサーバ側で作成されたルールは、通常、APIと呼ばれます.

ドームって何?

これは、JavaScriptがWebページを構成するタグを使用できるように、ブラウザがツリー構造で作成したオブジェクトモデルを使用することを意味します.
HTMLドキュメントまたはXMLドキュメントにアクセスするインタフェース.
DOMはHTMLとスクリプト言語(JavaScript)の接続です. HTML表記を視覚形式に変換するのに要する時間(CSSが適用され修正されて反映される時間)は避けられないが、最小限のDOM操作でタスクを処理すると仮想ドームの概念が導入される.
バーチャルドームとは?
実際のドームではなく、抽象化されたJavaScriptオブジェクトを使用します.リアル(重い)ドームの簡単なコピーに似た概念.

覚えておきたいこと

(例本課題の使用方法)

props

function App() {
...
return(
....
 {shoes.map((a, i) => {
                return <Card shoes={shoes[i]} i={i} key={i} />;
 )
function Card(props) {
  return (
    <div className="col-md-4">
      <img
        src={
          "https://codingapple1.github.io/shop/shoes" + (props.i + 1) + ".jpg"
        }
        width="100%"
      />
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.content}</p>
      <p>{props.shoes.price}</p>
    </div>
  );
}

useState

function ## () {
 const [point, setPoint] = useState(0);
....
return (
...
 {Array.from({ length: 5 }, (item, idx) => {
                        return (
                            <Circle key={idx} onClick={() => { setPoint(idx + 1); }}
                                style={{ backgroundColor: point < idx + 1 ? "#ddd" : "#FF1E9D" }} />
                        )
                    })}
)
}