プログラマフロントエンドDefcosフロントエンドプロセスの記録.

9月10日（金）

📚 TIL

アルバムブラウザアプリケーションの実装

実装機能

検索キーワードを入力すると、「推奨検索語API」で推奨検索語リストが表示されます

キーボードまたはマウスを使用した推奨クエリーの選択

キーボードの上ボタンと下ボタンを押すと、推奨検索語のハイライトが表示されます.

強調表示されたクエリーにEnterキーを入力すると、そのクエリーの検索処理機能

検索結果に基づいて写真リスト画面をレンダリング

取得したクエリーにキャッシュ機能を実行し、apiを呼び出すことでサーバ負荷を削減

ディレクトリ構造

📦PhotoSearch
 ┣ 📂src
 ┃ ┣ 📜api.js
 ┃ ┣ 📜App.js
 ┃ ┣ 📜debounce.js
 ┃ ┣ 📜Header.js
 ┃ ┣ 📜Keyword.js
 ┃ ┣ 📜main.js
 ┃ ┣ 📜SearchResults.js
 ┃ ┣ 📜storage.js
 ┃ ┗ 📜SuggestKeyword.js
 ┣ 📜.gitignore
 ┗ 📜index.html

DEMO

📮 Feelings

アルバムブラウザアプリケーションの実装

今日は、Vanilla JSのみを使用して、アルバム検索アプリケーションをSPA形式で実現しました.
複数のアプリケーションが実装されており、SPAの開発に詳しい.各構成部品を設計する過程で、サブ構成部品の独立した状態管理により、レンダリング中の流れの理解が向上します.これは、構成部品と親構成部品の伝達状態を集中的に制御するためです.
私はよく使うイベントを簡単に処理する方法に慣れており、いろいろなイベントを知りたいと思っています.重要な機能を実装する過程で,種々の異常処理を考慮してきた.特に,イベント発生時のapiリクエストを効率的に処理する方法を考えてきた.
今日実装されているアプリケーションは、大量のイメージファイルをロードする際にストレージのキャッシュ機能を使用し、API呼び出しに要する時間を短縮することでサーバ負荷を低減し、パフォーマンスを最適化するプロセスが印象的です.
目標の機能を実施した後、異常処理に対する思考は順次漸進的な過程であり、これは私に非常に面白く感じさせ、異なる段階で新しい内容を学ぶことができます.

終了時🙏

6週目の平日はこれで終わり、週末に各アプリケーションのコンポーネントを再エンコードする方法を復習したいと思います.復習の時間は毎日新しい考えがあるようなので、いろいろなことを学ぶことができます.
今週は多くのアプリケーションが実施され、コードの改善について多くの考えが行われ、これらのプロセスは想像以上に時間がかかるようです.
すぐに慣れて、一日でもっと勉強したいという欲求も焦りました.様々なテーマを曖昧に学ぶよりも、少ないテーマに触れても、深く勉強し、自分を充実させ、勉強を続ける方向に学ぶように心理管理をしっかり行いましょう...!

📅 Future Action Plans

週末に6週目の学習内容を復習する