ไธๅฃใตใคใบใงๅใฃใฆ้ฃในใReact.jsๅฎ่ทตใใญใธใงใฏใ - SNS็ทจ
ใใใใๅฎ่ทตใซๆๆฆใใ็ชใงใ ๐ฅ React.js + TypeScript + SupabaseใงๅฎๅใฌใใซใฎSNSใไธ็ทใซ้็บใใชใใใ่ช่จผใป่ชๅฏใ็ก้ในใฏใญใผใซใ็ปๅใขใใใญใผใใใใใญใ็ก้ใในใใณใกใณใใใใผใฏใขใผใใชใฉใฎๆฉ่ฝใๅฎ่ฃ ใใพใใใใฎ้็จใงใZustandใจTanstack Queryใๅฉ็จใใใตใผใใผใใใณใฐใญใผใใซ็ถๆ ็ฎก็ใฎๆๆณใๅญฆใใงใใไบๅฎใงใใ
ๅ่ฌ็ 1,559ๅ
้ฃๆๅบฆ ไธญ็ดไปฅไธ
ๅ่ฌๆ้ ็กๅถ้
- ่งฃๆฑบ
ํ์๊ฐ์ ๊ตฌํ (๊ตฌํ ํ ์ต์ข ํ๋ฉด ์ถ๋ ฅ X)
ํด๋น ๊ฐ์ ์๊ฐ์ค์ ์ ํ๋๊ป์ ์งํํด์ฃผ์ ๋ถ๋ถ ๊ทธ๋๋ก ๋๊ฐ์ด ๋ฐ๋ผํ๋๋ฐ ํ๋ฉด์์๋ ์์ ์๋ฌด๊ฒ๋ ๋ณด์ด์ง์๋.. ์ถ๋ ฅ์ด ์๋ฉ๋๋ค..ใ ใ ๋ฌด์จ ๋ฌธ์ ์ผ๊น์??์์์ a
reacttypescriptreact-querysupabasezustandusemutationrkdla6664585
ใป
1ใถๆๅ
0
64
2
- ๆช่งฃๆฑบ
(6.11) ํ์๊ฐ์ ์ ํ๋กํ ์ ๋ณด ์๋ ์์ฑํ๊ธฐ Q. ํธ์ถ ์์ ๋ฌธ์
์๋ ํ์ธ์ 6.11 ํ์๊ฐ์ ์ ํ๋กํ ์ ๋ณด ์๋ ์์ฑํ๊ธฐ ๊ฐ์์ค18:17 ๋ถ ์ฏค์์๋์ฒ๋ผ useProfileData(session?.user.id) -> u
reacttypescriptreact-querysupabasezustandmanajini7740
ใป
1ใถๆๅ
0
56
1
- ๆช่งฃๆฑบ
๋ช ์์ ํ์ ์ ์ธ(์ฝ๋ก ํ์ ์ ์ธ)๊ณผ as ํ์ ๋จ์ธ ์ฐจ์ด
์๋ ํ์ธ์ 6.8 Zustand๋ฅผ ์ด์ฉํด ์ธ์ ๊ด๋ฆฌํ๊ธฐ4:52์ด์ ํ์ ์ ์ธ ๋ถ๋ถ์ ํ์ ๋ฌธ์๊ฐ ์์ด์์!์๋์ฒ๋ผ ์ฐจ์ด๊ฐ ๋ญ์ง ์ ๋ชจ๋ฅด๊ฒ๋ค์ ๊ฐ์ฌ๋์ as ํ์ ์ ์ธ์ผ๋ก ์์ฃผ ์ฐ
reacttypescriptreact-querysupabasezustandmanajini7740
ใป
1ใถๆๅ
0
55
2
- ่งฃๆฑบ
useMutation ์ ์ฉ ํ ์๋ก์ด ๊ธ ๋ฑ๋ก์ content๊ฐ ์๋ณด์ฌ์
useMutation ์ ์ฉํ,์๋ก์ด ์์ดํ ์ ์ถ๊ฐํ๋ฉด,์์ดํ ์ ์ถ๊ฐ ๋์ง๋ง ์์ ์ปจํ ์ธ ๋ด์ฉ์ ์๋์ค๊ณ , ์ญ์ ๋ ์๋๋ค์?<p style="text
reacttypescriptreact-querysupabasezustandpowerwmj
ใป
2ใถๆๅ
0
69
2
- ๆช่งฃๆฑบ
6.8 zustand ์ธ์ ์ง๋ฌธ์ ๋๋ค.
session.tsimport type { Session } from "@supabase/supabase-js"; import { create } from "zustand"; import {
reacttypescriptreact-querysupabasezustandkin4127588
ใป
2ใถๆๅ
0
109
2
- ่งฃๆฑบ
next.js ๊ฐ์์์๋ ๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ๋ค๋ค์ฃผ์๋์?
์๋ ํ์ธ์.next.js ๊ฐ์์์๋ zustand๋ tanstack query ๊ฐ์ ๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ๋ค๋ค์ฃผ์๋์?<p style="text-align
reacttypescriptreact-querysupabasezustandkimjunyoung
ใป
2ใถๆๅ
0
92
2
- ่งฃๆฑบ
shadcn์์ radix ui์ base ui ์ฐจ์ด๋ ๋ญ๊ฐ์?
shadcn์์ radix ui์ base ui ์ฐจ์ด๋ ๋ญ๊ฐ์? ๊ทธ๋ฆฌ๊ณ ์ด๋ค ๊ฑธ ์ ํํด์ผ ํ ๊น์?
reacttypescriptreact-querysupabasezustandkimjunyoung
ใป
2ใถๆๅ
1
400
2
- ่งฃๆฑบ
updateTodo ํจ์ ์์ฑ์ ํ์ดํ ํจ์ ์ฌ์ฉ ์ํ๋ ์ด์
์ ๋ชฉ๊ณผ ๊ฐ์ดupdateTodo ํจ์ ์์ฑ์ ํ์ดํ ํจ์ ์ฌ์ฉ ์ํ๋ ์ด์ ๊ถ๊ธํฉ๋๋ค! ai ์ง๋ฌธํ๋ ์คํ์ผ ์ฐจ์ด๋ผ
reacttypescriptreact-querysupabasezustandmanajini7740
ใป
2ใถๆๅ
0
84
2
- ่งฃๆฑบ
4.11 ๋ฐ๋ก ํฌ๋ ์ญ์ ๊ฐ ์๋จ ์ง๋ฌธ
ํฌ๋ ์ญ์ ํ ๋ mutation ๋ถ๋ถ ์ฝ๋๋ฅผ ๊ฐ์์ ๋๊ฐ์ด// use-delete-todo-mutation.ts export function useDeleteTodoMutation() {
reacttypescriptreact-querysupabasezustandqpwo
ใป
3ใถๆๅ
0
102
3
- ่งฃๆฑบ
๋งค๊ฐ๋ณ์ updatedTodo ๊ด๋ จ ์ง๋ฌธ
๋๊ด์ ์ ๋ฐ์ดํธ์ ๋งค๊ฐ๋ณ์์ธ updatedTodo ๊ด๋ จ ์ง๋ฌธ์ด ์์ต๋๋ค.onMutate ์์ ์ ๊ณต๋๋ ๋งค๊ฐ๋ณ์๋mutate ํจ์์ ์ธ์๋ก๋ถํฐ ์ ๊ณต๋๋ค๊ณ ํ์ จ๋
react-queryไฝๆ่ ใชใ
ใป
3ใถๆๅ
0
79
3
- ่งฃๆฑบ
์ธ์ฆ ์ ๋ณด๊ฐ ๋ง๋ฃ๋์์ ๋ ๋ผ์ฐํธ ๊ฐ๋ ์ฒ๋ฆฌ๊ฐ ๊ถ๊ธํฉ๋๋ค!
๋ผ์ฐํธ ๊ฐ๋ ํ์ต ์ค ๊ถ๊ธํ ์ ์ด ์๊ฒจ์ ์ง๋ฌธ๋๋ฆฝ๋๋ค!import { useSession } from "@/store/session"; import { Navigate, Outlet } fro
reacttypescriptreact-querysupabasezustandsebvesta
ใป
3ใถๆๅ
0
91
2
- ่งฃๆฑบ
supabase๋ฅผ ์ฌ์ฉํ์ง ์์ ๊ฒฝ์ฐ ์ธ์ ๋ฐ์ดํฐ์ ๋ณ๊ฒฝ์ ๊ฐ์งํ๊ณ ์คํ ์ด์ ๋ณด๊ดํ๋ ๋ฐฉ๋ฒ์ด ๊ถ๊ธํฉ๋๋ค!
์๋ ํ์ธ์! ํญ์ ๊ฐ์ ์ ๋ฃ๊ณ ์์ต๋๋ค :)๊ฐ์์์ onAuthState
reacttypescriptreact-querysupabasezustandsebvesta
ใป
3ใถๆๅ
0
85
2
- ๆช่งฃๆฑบ
4.6 id๋ฅผ string์ผ๋ก ๋ณ๊ฒฝ์ ์ค๋ฅ
id๋ฅผ ์ ๋ถ string์ผ๋ก ๋ณ๊ฒฝํ์์๋ ๊ณ์ ์ค๋ฅ๊ฐ ๋ฐ์ํด์ aiํํ ๋์์ ์์ฒญํ๋๋ create-todo.ts์ header๊ฐ์ ๋ถ์ด๋ผ๊ณ ํ๋๋ผ๊ณ ์!๊ทธ๋์ ํด๋น ํ์ผ ์ฝ๋์ header
reacttypescriptreact-querysupabasezustandqpwo
ใป
3ใถๆๅ
0
74
2
- ่งฃๆฑบ
๋ฆฌ์กํธ ํ์ ์คํฌ๋ฆฝํธ ๊ด๋ จ ์ง๋ฌธ์์ต๋๋ค.
ํ์ ์คํฌ๋ฆฝํธ ๊ฐ์๋ฅผ ๋ฐ๋ก ์๋ค์ด์ ๊ทธ๋ฐ๋ฐ ์ปดํฌ๋ํธ ๋ณ๋ก props๋ฅผ ๋๊ธธ๋ ์ธ์ ๋ ๊ตฌ์กฐ๋ถํดํ ๋น์ผ๋ก ๋๊ธฐ๊ณ ์ธ์ ๋ ๊ทธ๋ฅ ํ์ ๋ง ์ ์ธํด์ ๋๊ธฐ๋๋ฐ ๋ฐ๋ก ํ๋จํ๋ ๊ธฐ์ค์ด ์์๊น์? <p style="text-align
reacttypescriptreact-querysupabasezustandseop2
ใป
3ใถๆๅ
0
71
1
- ่งฃๆฑบ
์์ ๋ก๊ทธ์ธ ๊ตฌํํ๊ธฐ ๊ด๋ จํ์ฌ ์ง๋ฌธ์ด ์์ต๋๋ค!
์๋ ํ์ธ์! ๊ฐ์ฌ๋์ด ์๊ธฐํด์ฃผ์ ๋ถ๋ถ์์ ๊ตฌํ์ ๋คํ๊ณ , ์ถ๊ฐ๋ก ๊ตฌ๊ธ๋ก๊ทธ์ธ๋ ์ ์ฉ์์ผฐ์ต๋๋ค!์ดํ์, ์นด์นด์ค ๋ก๊ทธ์ธ ๊ด๋ จํด์ ์ ์ฉํ๋ ค๊ณ ์ฑ์ค์ ๋ฐ AI ๋์์ ๋ฐ์
reacttypescriptreact-querysupabasezustandrladygks12107433
ใป
3ใถๆๅ
0
108
2
- ่งฃๆฑบ
ui ํ์ผ ์ง๋ฌธ๋๋ฆฝ๋๋ค.
์๋ ํ์ธ์! ui ๊ด๋ จํด์ ๊ถ๊ธํ ๊ฒ์ด ์์ด ์ง๋ฌธ๋๋ฆฝ๋๋ค.Popover์ ๊ฐ์ด radix-ui ์ @/components/ui (shadcn/ui ..?) ์๋ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ, ์ด๋ค ๊ฒ์ ์ฌ์ฉํ๋์ง์ ๋ํ ๊ธฐ์ค
reacttypescriptreact-querysupabasezustandendeavor
ใป
3ใถๆๅ
0
90
1
- ๆช่งฃๆฑบ
tanstack query devtools์์ ์ง๋ฌธ์์ต๋๋ค!
<img src="https://cdn.inflearn.com/public/files/posts/09f489a5-4a25-48a1-819a-8f8a2dc34346/c9c38e02-0788-489d-a8be-8091acc84a98.png" media-type="img"
reacttypescriptreact-querysupabasezustandslasnrndu4468
ใป
3ใถๆๅ
0
75
2
- ๆช่งฃๆฑบ
๋๊ธ ์ญ์ ์ isPending ์ง๋ฌธ
const { mutate: deleteComment, isPending: isDeleteCommentPending } = useDeleteComment({ onError:
reacttypescriptreact-querysupabasezustandheewon97
ใป
3ใถๆๅ
0
72
2
- ่งฃๆฑบ
๋๋ฒ์งธ ์์ธ์ํฉ์ ๋ํด ์ง๋ฌธ์์ต๋๋ค!
์ดํด๊ฐ ์ ์๋ผ์์ใ ใ ์กฐํ๊ฐ ์๋ฃ๋๊ธฐ์ ์ ๋ฐ์ดํธ๋ฅผ ํ๋ ๊ฒฝ์ฐ DB์ ์ ์ฅ๋๋ ๊ฐ๊ณผ ํ๋ฉด์ ๋ ธ์ถ๋๋ ๊ฐ์ด ๋ค๋ฅผ์๊ฐ ์๋ค๋ ์๊ธฐ์ผ๊น์?
reacttypescriptreact-querysupabasezustandslasnrndu4468
ใป
3ใถๆๅ
0
69
1
- ่งฃๆฑบ
๋ฆฌ์กํธ ์ฟผ๋ฆฌ ์ง๋ฌธ์ ๋๋ค
isPending๊ณผ isLoading ์ฐจ์ด์ ์ ์ ๋ชจ๋ฅด๊ฒ ์ต๋๋ค.๊ฐ๊ฐ ์ธ์ ์ฐ๋์ง ํ์ฉ์ฒ๋ ๊ถ๊ธํฉ๋๋ค!
reacttypescriptreact-querysupabasezustandseop2
ใป
3ใถๆๅ
1
83
2

