49日目(02-17-22021)

最近本当に有能な人をよく見かけます今回はスプレーの時も独学でコデステッツに来た人とフェアゲームをしましたが、本当にHard Carry言いつけたとおりにして、テストはすぐに合格した.
今日のsprintの内容は、昨日作成したビデオ再生アプリをfakedataではなくYouTubeに直接GETを請求することです.まずAPIキーが必要です.他の人のブログを参考にして、言いつけ通りにしました.発送を受けた後、郵便配達員を利用して依頼が順調かどうかを確認した.
ちょうどいいところへ来た.不思議な感じがします今これらのデータを利用して、今まで練習してきたreact+AJAXを利用してアプリを完成させましょう!まずクライアントを起動(?)コードはすでに実現して、私が実現しなければならない部分は入力ボックスに検索語を入れて、検索ボタンを押して、データの取得を要求して、props、stateを使ってデータを伝達すればいいです.
ここで重要な部分はfetchが非同期で行われ,ほとんどの非同期要求が副作用を伴う.ここで、副作用は、コードステータスドキュメントで指摘されている「関数または構成部品の入力に加えて、関数の結果に影響を与える要因」です.でもよくわかりませんが...ざっと考えてみると、JavaScriptコードそのものではなく、コード外部で実装され、内部(?)に影響を及ぼすのです.と思います.表現は難しいですが、頭の中ではだいたいわかっているようです.
とにかくこの副作用を管理しなければならない.サブアセンブリでは、副作用の発生を最小限に抑え、発生した場合は、アセンブリDidMountのプロセスで処理できます.実は理論的にはよくわかりませんが...続けてやればわかるでしょう?いつものように?

// ~~~ class 생략
  componentDidMount() {
    this.searchVideo('코드스테이츠')
  }

searchVideo(queryString) {
    this.setState({isLoading: true})
    fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&key=APIkey=${queryString}&type=video&videoEmbeddable=true`)
      .then(res => res.json())
      .then(data => {
        console.log(data.items)
        this.setState({videos: data.items, isLoading: false, currentVideo: data.items[0]});
      })
  }

// ~~~ 생략

queryStringでは,inputに入力された検索語をパラメータとしてgetリクエストを受信して部分的なコードを受信すると,上記のコンポーネントDidMount関数を用いて副作用を処理する様子が見られる.そして受信データを確認するために、ランダムにコンソールを撮ったので、確認してみましょう.

Nookaちゃん検索してみました

上手に持っているのが見えます.不思議で面白かった!ちょっと残念なのは理論的(?)部分的に不足している.何か辺鄙な単語が出てきたら、脳は拒否するようです.もっとプロフェッショナルな面があると思いますが、それは難しいので、頑張りましょう.