5)ああ...ルーティング...条件付きレンダリング...graphql... これはいいですよ.(コードキャンプFE 6機)

4469 ワード

graphql mutation 条件付きレンダリングコード起動キャンプ tryCatch 開発者コードセットひどうきつうしん演算子開発者 templete literal router optional chaining Apollo client さんこうえんざんし routing エンコーディングテキストリンク

今日の概要
前回の授業まで、投稿登録について勉強しました.😉
登録完了待ちのasync/awaitもあります!
このセクションでは、登録されている投稿IDまたは投稿番号を使用して動的ルーティングを行います.
移動したページでrouter.また、queryを使用して投稿IDや投稿番号を取得することもできます.
また、インポートされた投稿IDと投稿番号を使用してデータをクエリーしました.
クエリはuseQuery()を使用し、使用方法はuseMutation()とほぼ同じです.
ただし、違いは、useQueryが非同期ページの描画(レンダリング)時に自動的に要求を発行することです.
返事を受け取る前にhtmlを描き、データを受け取ったら内容を記入します!
しかし、いくつかの問題が発生し、条件レンダリングを使用してこれらの問題を解決します.
条件レンダリングには&&演算子と3つの演算子を使用する方法がありますよね?
また、&&演算子を使用する場合、通常はオフセットフィルタを使用してコード量を減らします.
最後に,通信で成功/失敗分岐を共有するtry,catchも学習した.
これまで,最小のデータ通信セットとなる.
この方法を適用して、SNS、動画、画像などにデータを変更するだけなら、Facebook、YouTube、Instagramなど私たちが使っているサービスの原理は同じでしょう?!

-ルータ、静的ルーティング、動的ルーティング

-静的ルーティング

/loginページは、誰がいつログインしてもログインページ1が表示されます.
これらのページに移動することを「静的ルーティング」と呼びます.

-動的ルーティング

-掲示板の記事を閲覧する場合、すべての記事がWebサイトを作成できるわけではないので、ルーティングを効率的に処理するために動的ルーティングを使用します.
例)

-NEXT.jsが提供する動的ルーティングは、表示するフォルダ名のサブフォルダです.
[bordId(サンプル名)]作成後のインデックス.jsファイルを作成すれば使用できます!
-移動するページ番号、投稿番号をカッコ内の変数名に含め、変数からデータを抽出してクエリーできます.
-これはrouterオブジェクトのヘルプで完了しました.実際にはrouterです.Query={bordId:1}この形式で投稿番号を入力できます!

——授業の補習テーマ——『地下鉄で探してみろ!』
ルータオブジェクトpushとreplaceの違いを知っていますか?誰もが使用例を話しています.
ルータオブジェクトのpathnameとasPathの違いは何ですか?
ReactにもNextのようなRouterがあります.
ReactとNextのRouterは明らかに違います.どんな違いがあるか説明してください.

-apollo-clientを使用してGraphQLクエリーを実行

Apolloクライアントとは?
GraphQL APIを呼び出すためのライブラリ!
reactアプリケーションでは、Apolloクライアントを使用してGraphQL APIを呼び出すことができます!

簡単にクリックすると、バックエンドサーバに格納されている投稿を番号で検索できます.

-非同期通信および条件レンダリング

javascriptは、データの要求や応答の受信時に、画面に描画するデータの内容が定義されていないため、最初の画面の描画時にデータのロード時にエラーが発生します.

このセクションを効率的に実行するには、画面を事前に描画してください.
条件付きレンダリングを使用してデータを描画します.

ページ移動!

事前にアップロードできるコンテンツアップロード後にアップロードできる投稿データ

-条件付きレンダリングのタイプ

3項演算子
-データが来る前にreturnセクションがレンダリングされているため、3つの演算子を使用して、データがあるときもないときも書く必要があります.

data ? data.fetchProfile : undefined```

&演算子
-&&演算子は、データがない場合に定義されていない値

data && data.fetchProfile```

を自動的に返します.

Nullish連結演算子
-&&演算子は、前の値が真の場合にのみ後の値を表示し、逆に前の値が偽の場合は後の値を表示します.
-??前の値がNULLの場合、演算子は後の値を表示し、前の値がfalseの場合、演算子は後の値を表示します.

data ?? data.fetchProfile
data || data.fetchProfile ```

-テンプレート文字

テンプレート文字は、文字と変数を同時に書き込むツールです.${변수명}は、演算子として文字列や変数を追加する必要がなく、コードを簡単に記述することができます.
例)

let a = 1;
let b = 2;
//기존 불러오는 방법
"바나나는" + a + "개이고" + "사과는" + b + "개이다."

//Template Literals 법
`바나나는 ${a} 개이고 사과는 ${b} 개이다.`

<<このように'`backticを使って書くのはとても簡単です!>

-try~catchをgraphql音楽に適用する

突然変異は必ずしも成功したわけではない.

Backendパソコンに問題が発生する可能性があります.私が修正したい投稿が突然削除され、修正に問題が発生するなど、多くの失敗の可能性があります.

そのため、私たちは成功した処理に対して、失敗した処理に対してすべて分けて来ました!

try {
		await createBoard({
				variables: {
						aaa: "훈이",
						bbb: "1234",
						ccc: "안녕하세요 훈이에요",
						ddd: "반갑습니다"
				}
		})
} catch(error) {
		alert(error.message)     // 경고창(실패했습니다.)  ==>  백엔드 개발자가 보내주는 실패 메시지
} finally {
	// 성공, 실패 여부와 상관없이 무조건 마지막에 실행되는 부분
	// 필요없다면 생략 가능
}