開発ログ📝_10

6270 ワード
Web basics テキストリンク

💡 今週はライブラリとAPIを学び、実践しました。


新学の内容🌼


✔庫
:再利用可能なコードスイート
:Web/APpでよく使われる機能を再利用可能なコードで実現
👉ライブラリを大量に使用すると、ログインページのロード速度など、Webページのパフォーマンスに問題が発生する可能性があります.
🔗コンテキストJSライブラリ
データの可視化(地図、ネットワーク、グラフの描画)D3.js Chart.js leaflet.jsDOM操作jQueryアニメーション効果GSAP Anime.js修飾、日付処理Date.jsUIコンポーネントReact.js👀 ライブラリの使用方法
:開発中のアプリケーションでライブラリを使用する場合は、プロジェクトフォルダに直接ライブラリをインストールするか、CDNからライブラリをインポートできます.
ライブラリを
  • プロジェクトフォルダに直接インストールする場合は、npm、sayなどの簡単なコマンドを使用してパッケージマネージャとして使用できます.
    ex)swiperライブラリをインストールする場合は、ターミナルを開き、プロジェクトフォルダのルートディレクトリで次のコマンドを実行します.
    👉 $npm install swiper
  • CDNから必要なライブラリをインポートすると、<script src="라이브러리 경로"></script>がhtmlドキュメントの一部にコピーされて貼り付けられます.
    ✔ Ajax
    :ブラウザからサーバにデータ要求を送信し、サーバ応答のデータを使用してWebページを動的に更新する非同期プログラミング方法
    👉非同期処理:複数のタスクを同時に処理できることを示します.Ajaxが登場するにつれて、Webページの変更に必要なデータを非同期で受信するだけで、Webページの変更を必要としない部分は再レンダリングされず、変更が必要な部分に限定されます.パフォーマンスが向上し、画面切り替えがスムーズ
    ✔ XMLHttpRequest
    :ブラウザでJavaScriptを使用してHTTPリクエストを送信する場合、XMLHttpRequestオブジェクトを使用します.AjaxはXMLHttpRequestをベースとしている.XMLHttpRequestオブジェクトには、HTTPリクエストの送信およびHTTP応答の受信のために使用される様々な方法およびプロトコルがある.
    // XMLHttpRequest 객체의 생성
const xhr = new XMLHttpRequest();
    ✔ Json
    :クライアントとサーバ間のHTTP通信用テキストデータフォーマットJavaScript Object Notation
    したがって、クライアントからサーバにオブジェクトを転送するには、オブジェクトを文字列化する必要があります(シリアル化serializing).
    👉 JSON.stringifyメソッドは、オブジェクトをJSON形式の文字列に変換します.
    const dog = {
	name: '댕댕이'
	age: 5,
	sound: '멍멍'
}

// 객체를 JSON 포맷의 문자열로 변환
const json = JSON.stringify(obj);

console.log(typeof json, json)
// string {"name": "댕댕이", "age": 5, "sound": "멍멍"}
    したがって、サーバからクライアントに送信されたJSONのデータは文字列である.文字列をオブジェクトとして使用するには、JSON形式の文字列をオブジェクト化する必要があります(逆シーケンス化deserializing).
    👉 JSON.parseメソッドは、JSON形式の文字列をオブジェクトに変換します.
      const dog = {
	name: '댕댕이'
	age: 5,
	sound: '멍멍'
}

// 객체를 JSON 포맷의 문자열로 변환
const json = JSON.stringify(obj);

// JSON 포맷의 문자열을 객체로 변환
const parsed = JSON.parse(json);
console.log(typeof parsed, parsed);
/* object {
	name: '댕댕이'
	age: 5,
	sound: '멍멍'
} */

    📌プロジェクトの進捗



    :中間試験項目で、CSSで実現したスライダ部分をJSで矢印ボタンを押した場合、スライダを1ブロックスキップしてみます.既存のWebサイトでは、マウスを離すと矢印ボタンが表示されるため、このセクションをさらに変更する必要があります.前回から計画していたので、遅れたスマートフォン、タブレット、pcに対応したメディア検索を残り時間で済ませてほしい.

    に感銘を与える


    今週、私は新学の内容から「ライブラリ」について勉強しましたが、興味深いことに、あらかじめ作成したコードを持ってきて、マニュアルに従って使用したり、カスタマイズしてホームページを実現したりすることができます.状況ごとに様々なJSライブラリがあることに不思議を感じました.CoronannewsAPIを使用して垂直スライダを作成する実践では、共通データAPIの使用を申請する方法と、API技術ドキュメントでAPIサービスを使用する場合に必要な部分について説明します.実はAPIの話を聞いていて、理解できないことがあったので、NOTIONの講義資料を見て、復習して、実習するべきだと思います.期末试験があまり残っていないので、その时までプロジェクトに集中しなければなりませんが、休みの时も别に勉强しなければなりません.
    Webプログラミングの基礎科目を通して、HTML、CSS、JSに関する理論内容を学び、自ら実践し、Webページの様々な要素と機能を理解しました.クローンをプロジェクトにエンコードすると、Webページを実装するには考慮すべき要素が多く、HTML、CSS、JSコードを作成して各Webページを表すのは容易ではありません.この授業を通じて、今まで学んだことのない新しい内容を知ることができて嬉しいです.これも私がネットプログラミング分野に興味を持ったきっかけになりました.残りの2週間でもっと努力して、順調にプロジェクトを完成することを望んでいます.教授に感謝します.彼は1学期中に毎週リアルタイムの授業を受けて、私たちに役立つ内容を教えてくれます.😊復習の時に皆さんにもっとよく理解してもらうために、NOTIONで話した内容とその例を含めて、書いた講義資料も感動しました
    • BeanShellスクリプトインタフェースのインタフェースタイプとタイプ変換
    TIL|codeコマンドを使用してvscodeを開く