ここで覚えておきたいアイテムコード:Query String

💭 PROJECT OVERVIEW & TIL

初めてpath parameterを使った時もquery parameterが気になりましたが、今回のプロジェクトでは動的ルーティングとクエリーで大量の通信が行われており、1回目と2回目のプロジェクトで両方使えることで、本当にRESTfulとは何かを感じました.
ページング機能も検索機能も追加のインプリメンテーションですが、残念ながら実装されていません.これも検索文字列を使っているので、後で実現したいという欲求があります!

RESTful

フロントエンドからバックエンドAPIを呼び出すURLを作成するにはどうすればいいですか?
正しい答えです.
RESTful APIの最大の利点は、それ自体がAPIの目的を簡単に理解できることである.
たとえば、セッションの例です.
HTTP GET https://api.trueshort.com/stock/005930
要求については、文書や注釈がなくても、https://api.trueshort.com APIがHTTP要求を通じて三星電子株に関する情報を受信したと容易に解釈できる.

クエリー文字列とは?

文字通り
クエリー文(query)を文字列として対応するエンドポイントに送信する要求.
主にデータの条件フィルタリング、ソート、検索(検索)に適用されます.
今回のプロジェクトでは、私が担当している部分はフィルタリングとソートに使用され、クエリー文字列を利用することができます.
最初は、クエリーのみを抽象化しました.
次の例を見ると、わかります.
ホームページでは、宿泊タイプ、宿泊場所、日付、人数をURLに入れて、パッケージ形式で発送するというフォーマットです.これは、ブラウザを使用して検索するときによく見られるフォーマットです.

http://localhost:3000/roomlists?category_name=호텔&location_name=강남&check_in=2021-05-09&check_out=2021-05-11&occupancy=2&sort_type=1&star=5

例では、一番前の値が表示されます.
?categor name=ホテル
常に端点の後
1. ? 疑問符(プロンプト開始query)で始まる
2.後ろには常にkey=value形式の文字列(string)が付いています.
3.&を使用して条件の追加を続行
?&接続で始まるクエリーパラメータを使用し、ホームページからホテルリストに移動するときにフィルタリングします.

🔥 3 BLOCKERS...

私を深く悩ませた3つのブログを整理したいと思います.疲れたけどもっと强く感谢してくれる存在たち(?!)

1. Obj <-> String

各値はstateとして管理され、各stateは一緒に送信される必要があるため、オブジェクトとして格納されます.また、key=valueからなるオブジェクトの値をURLの1行に簡潔に送信する必要があるため、stringに変換する関数を用いてこれらの値を送信する.
ここでは、Query to String、String to Queryを作成する別の関数について書きます.

最初は理解できなかった(他の話は...)やっているうちに悩んでからやりましょう.遅れたのを覚えています.クエリーパラメータのフォーマットをもう一度理解し、私が送信した値のフォーマットを理解した後、関数を単独で作成して使用すると便利になると思います.utilsというフォルダに関数configを作成します.jsのようにimportで使う、これが関数の再利用なのか…!とても便利だと感じました.

送信する値をオブジェクトに含め、あらかじめ作成したqueryToString関数に入れてStringに変換します.

2. location.search

URL Query Parameterのインポート
リストページからURL Query Parameter値を取得する必要がある場合があります.
検索結果をhotel location値「江南」で画面に表示したいからです.
ここで初めて書く方法で書いたhistoryプッシュルーティング機能を使用するとともに、ステータス値を渡すことで値を送信する必要がありますか?考えたけど(location.stateしか知らないバカ…)
location.searchを使用すると、直接値を取得できます.
メインからリスト、「リスト」ページから実行される「userEffect」から「console」へ.ロゴをクリックすると該当するURLアドレスにありますか?選択した値の出力は、後でメインウィンドウに表示されます. WOW...不思議ですね.

この値を利用して、関数を利用して必要な部分だけstateにカットして、対応するページで使用します!また、リストページから詳細ページに移動する場合は、locaitonと同じ方法でcheck inとcheck out値を渡す必要があります.必要な部分をsearchで加工し、URLに渡します!
pathパラメータはlocationです.state値を使用してstate値を交換し、queryパラメータではlocationです.searchを使用してURL値を加工し、バックグラウンドや他のページに渡す機会です.

3.変化するリアルタイム値URLに反映

一番我慢してくれた部分を…!
一度フィルタリングした結果値には、推奨順、金額順、性別分類が反映されるべきである.リアルタイムで変化する値はURLに反映されなければならないため、一致するデータをパケットからロードすることができず、詳細部分でも選択した正しい値を送信する必要があります.
人数を超えたリストページで、右上隅のsortタイプと左オプションウィンドウのstarに基づいて、既存のクエリーパラメータの後ろに追加します.
したがって、オブジェクト形式で入力した既存のstringクエリーパラメータを再作成し、選択したkeyとvalueからなるオブジェクトを作成し、それらをマージしてstringに再送信する必要があります.

この過程では,選択に別の受容値を指定する関数が必要であり,依存配列の概念を理解してこそ,配列に何が含まれているかを考慮することができる.この場合、クリック時に変更した指定された準状態値を含める必要があります.
また、最初はクリックするたびにvalue値しか変更できませんでしたが、key=valueはずっとペアです.(&sort type=1&star 2&star 3&star 4...)ただし、この場合、拡張演算子を使用して変化する値のみを追加することもできます.
また,2番ブロックの概念とともに位置決めする.searchの値を依存配列に挿入し、useEffect関数を作成してlocationをリアルタイムで変更します.検索料を出すべきです.
また、airbnbで作成したcalendar libraryを書いて、コードを一つ一つ分解するのにも時間がかかり、ホームページから受け取った値をリストに載せて、新しい日付を再選択して次のページに渡すのは、私にとって大きな挑戦です!そうですが、私も今回のプロジェクト、そして私の部分を覚えたいです.