2022_01_14

⚙︎ Try ~ catch
変異やqueryを送信する場合、常に成功することは保証されません.バックエンドコンピュータで、停電、修正、クエリーなどの予期せぬイベントが発生し、問題が発生する可能性があります.このような状況に対応するために、エラーが発生した場合にクライアントに通知する処理が必要です.ここで適用できるのはTryとcatchです.

	try{
   	    const onClickSubmit = async () => {
            const result = await createProduct({
                 variables: {
                     seller: seller,
                     createProductInput: {
                         name: name,
                         detail: contents,
                         price: price
                    }
                }
            })
     	}
    	} catch(error) {
       	 	alert(`${error.message}의 이유로 실패하였습니다.`)
    	} finally {
         ...
     	}

Try~catchを適用すると、まずtryのコードを実行します.このときblockで異常が発生した場合はcatch実行に移行します.最後に、final-blockは常に実行され、上記の結果にかかわらず実行されます.
⚙︎ Router Object & Routing
Routerオブジェクトは、ページ移動などの機能を持つオブジェクトです.たとえば、Aというnaverのホームページで関連記事をクリックすると、画面はBという関連記事ページになります.同様に、ページ移動機能を提供するのは、AからBへのルーティングを示すRouterである.
⚙︎ Static Routing & Dynamic Routing
ユーザーが掲示板に投稿を書くために「投稿の作成」ボタンをクリックしたとします.データベースからデータを抽出することなく、投稿の作成などの画面をクライアントにすぐに表示できます.これらのページでルーティングを行う場合、「静的ルーティング」と呼ばれます.これに対して、ユーザーが投稿をクエリーする場合は、データベースから必要なデータを取得し、ユーザーに表示する必要があります.これらのページに移動することを「動的ルーティング」と呼びます.
このダイナミックルーティングを実現するには、フォルダ名を[]にカプセル化する必要があります.(ex) [ folder_name]). この場合[]には、動的ルーティングに使用するデータが変数として含まれます.
⚙︎ Optional Chaining
Backendに情報を要求すると、削除などの理由で要求されたデータに特定の情報がない可能性があります.この場合、エラーが発生します.&&演算子を使用してエラーを防止します.

<div> {data && data.fetchBoard.contents} </div>

&&演算子の場合、上記のようにdataをもう一度書く必要があります.そのために「?」オプションリンクと呼ばれる使用方法が表示されます.

 <div> {data?.fetchBoard.contents} </div>