ํ ์ ํฌ๊ธฐ๋ก ์๋ผ๋จน๋ React.js ์ค์ ํ๋ก์ ํธ - SNS ํธ
์ด์ ๋ ์ค์ ์ ๋์ ํ ์ฐจ๋ก์ ๋๋ค ๐ฅ React.js + TypeScript + Supabase๋ก ์ค๋ฌด๊ธ SNS๋ฅผ ํจ๊ป ๊ฐ๋ฐํด๋ณด๋ฉฐ ์ธ์ฆ&์ธ๊ฐ, ๋ฌดํ์คํฌ๋กค, ์ด๋ฏธ์ง ์ ๋ก๋, ์ข์์, ๋ฌดํ ์ค์ฒฉ ๋๊ธ, ๋คํฌ๋ชจ๋ ๋ฑ์ ๊ธฐ๋ฅ์ ๋ง๋ค์ด ๋ด ๋๋ค. ์ด ๊ณผ์ ์์ Zustand์ Tanstack Query๋ฅผ ์ด์ฉํ ์๋ฒ ๋ฐ ์ ์ญ ์ํ ๊ด๋ฆฌ ๊ธฐ๋ฒ๋ ์ดํด๋ณผ ์์ ์ ๋๋ค.
์๊ฐ์ 1,434๋ช
๋์ด๋ ์ค๊ธ์ด์
์๊ฐ๊ธฐํ ๋ฌด์ ํ
- ๋ฏธํด๊ฒฐ
๋๊ธ ์ญ์ ์ isPending ์ง๋ฌธ
const { mutate: deleteComment, isPending: isDeleteCommentPending } = useDeleteComment({ onError:
reacttypescriptreact-querysupabasezustandgmldnjs0402
ใป
8์๊ฐ ์
0
12
1
- ๋ฏธํด๊ฒฐ
๋๋ฒ์งธ ์์ธ์ํฉ์ ๋ํด ์ง๋ฌธ์์ต๋๋ค!
์ดํด๊ฐ ์ ์๋ผ์์ใ ใ ์กฐํ๊ฐ ์๋ฃ๋๊ธฐ์ ์ ๋ฐ์ดํธ๋ฅผ ํ๋ ๊ฒฝ์ฐ DB์ ์ ์ฅ๋๋ ๊ฐ๊ณผ ํ๋ฉด์ ๋ ธ์ถ๋๋ ๊ฐ์ด ๋ค๋ฅผ์๊ฐ ์๋ค๋ ์๊ธฐ์ผ๊น์?
reacttypescriptreact-querysupabasezustandgogo
ใป
2์ผ ์
0
15
1
- ํด๊ฒฐ
๋ฆฌ์กํธ ์ฟผ๋ฆฌ ์ง๋ฌธ์ ๋๋ค
isPending๊ณผ isLoading ์ฐจ์ด์ ์ ์ ๋ชจ๋ฅด๊ฒ ์ต๋๋ค.๊ฐ๊ฐ ์ธ์ ์ฐ๋์ง ํ์ฉ์ฒ๋ ๊ถ๊ธํฉ๋๋ค!
reacttypescriptreact-querysupabasezustand์ด์ง์ญ
ใป
4์ผ ์
0
24
2
- ํด๊ฒฐ
๊ฐ๋ฐ์๋๊ตฌ์์ components ๊ฐ ์๋ณด์ ๋๋ค.
React Developer Tools ๋ค์ด๋ฐ๊ณ ํ์ฅํ๋ก๊ทธ๋จ ๊ด๋ฆฌ์์ ์ค์ ๋ ํ๋๋ฐF12 ๊ฐ๋ฐ์๋๊ตฌ์์ components ํญ์ด ์๋ณด์ด๋๋ฐ ์ค์ ํ๋ ๋ฐฉ๋ฒ์ด ์์๊น์?
reactzustand๋๋ฑ๋ฐ
ใป
4์ผ ์
0
22
3
- ํด๊ฒฐ
state ๊ด๋ฆฌ์ ๋ํ ์ ๋ฆฌ
์๋ ํ์ธ์ ์ ํ๋ !!!์ ํ๋ ๊ฐ์๋ฅผ ๋ฃ๋ค๊ฐ state๊ด๋ฆฌ์ชฝ์ ๊ฐ๋ ์ด ๊ฐ์๊ธฐ ์์ฌ์ ์ง๋ฌธ์ ํ๊ฒ๋์์ด์<p style="text-a
reacttypescriptreact-querysupabasezustandkaeuhy
ใป
5์ผ ์
0
35
3
- ๋ฏธํด๊ฒฐ
[(2.4) Shadcn/ui๋ฅผ ์๊ฐํฉ๋๋ค] ๊ฐ์ Shadcn ์ธํ ๊ด๋ จ ์ง๋ฌธ ์์ต๋๋ค.
์๋ ํ์ธ์ ๊ฐ์ ์ ๋ฃ๊ณ ์์ต๋๋ค์ ํ๋ ๊ฐ์ ํ์ จ์ ๋๋ ์ง๊ธ ๊ณต์ ๋ฌธ์ ์ค์น ๋ฐฉ๋ฒ์ด ๋ฌ๋ผ์ง ๊ฒ ๊ฐ์๋ฐ ์ง๊ธ ๊ณต์๋ฌธ์๋๋ก ์งํํด๋ tsconfig.app.jsonํ์ผ๊ณผ tsconfig.jsonํ์ผ์ ๊ฒฝ๋ก ๋ณ์นญ ์ต
reacttypescriptreact-querysupabasezustand์ฝ๋ฆฐ์ด
ใป
5์ผ ์
0
47
3
- ํด๊ฒฐ
like ํ ์ด๋ธ์์ ์ create_at์ด ํ์ํ์ง ๊ถ๊ธํฉ๋๋ค.
Table ์์ฑ์, ์ created_at์ด ํ์ํ๊ฐ์? like ํ ์ด๋ธ์๋ postId, us
reacttypescriptreact-querysupabasezustandgmldnjs0402
ใป
13์ผ ์
0
47
1
- ๋ฏธํด๊ฒฐ
์ญ์ ๊ฐ ๋ฐ๋ก ์๋๋ค์ใ
๊ฐ์ ์์ค์ฝ๋๋ฅผ ๋๊ฐ์ด ํ๋๋ฐ ์๋ก๊ณ ์นจ ์์ด ๋ฐ๋ก ์ญ์ ๊ฐ ์๋๋ค์ใ ๋ค๋ฅธ๊ฑฐ๋ apiํจ์๋ฅผ ํ ๊ตฐ๋ฐ์ ๋ชจ์ ๊ฑฐ ๋ฐ์ ์๋๋ฐ...
reacttypescriptreact-querysupabasezustand์ด์ง์ญ
ใป
13์ผ ์
0
40
2
- ํด๊ฒฐ
access ํ ํฐ์ ๊ผญ ์์ ์๋ฒ๋ก๋ถํฐ ๋ฐ์์ ์ฌ์ฉํด์ผ๋งํ๋์?!
์๋ ํ์ธ์ ๋๋ฌด ์ฝ๊ฒ ์ค๋ช ํด์ฃผ์ ์ ํ๋ก ํธ ์์ด๋ณด์ธ ์ ๋ ์์ฃผ ์ ๋ฐ๋ผ๊ฐ๋ฉด์ ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ต๋๋ค ! ์ด๋ฒ ํํธ์์ ํ๊ฐ์ง ์๋ฌธ์ธ์ ์์ ๋ ์์ ์ ๋ฐฑ์๋ ์๋ฒ๋ฅผ ๊ตฌ์ถํ
reacttypescriptreact-querysupabasezustandTeo
ใป
16์ผ ์
0
59
2
- ํด๊ฒฐ
์ ์ญ ๋ชจ๋ฌ์ด ์ฌ๋ฌ ๊ฐ์ผ ๊ฒฝ์ฐ ๋ชจ๋ฌ ํ๋ก๋ฐ์ด๋๋ ๋ช ๊ฐ๊ฐ ํ์ํ๊ฐ์?
์ ์ญ ๋ชจ๋ฌ์ 2๊ฐ ์ฐ๊ณ ์ถ์ด์ ์ผ๋จ ์คํ ์ด 2๊ฐ๋ฅผ ๋ง๋ค์๋๋ฐ์. ๋ชจ๋ฌ ํ๋ก๋ฐ์ด๋๋ 2๊ฐ๋ฅผ ๋ง๋ค์ด์ผํ๋์ง, ์๋๋ฉด ํ๋์ ๋ชจ๋ฌ ํ๋ก๋ฐ์ด๋์ 2๊ฐ ๋ชจ๋ฌ์ ๋ชจ๋ ๋ฃ์ด๋ ๋๋์ง ๊ถ๊ธํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ง์ฝ ํ๋์ ๋ชจ๋ฌ ํ๋ก๋ฐ์ด๋์
reacttypescriptreact-querysupabasezustand์กํ์
ใป
19์ผ ์
0
35
1
- ํด๊ฒฐ
ํ๋กํ ์์ ํ post item ์ ๊ธ๋ค์์ ์์ ๋ ํ๋กํ ์ ๋ฐ์ดํธ ๋ฐ์
ํ๋กํ ์์ ํ ํ๋กํ ๋ํ ์ผ ํ๋ฉด์ ํฌ์คํธ ์์ดํ ๋ค์์๋ ์์ ๋ ํ๋กํ ๋ด์ฉ์ด ๋ฐ์์ด ์๋๋ ๊ฒ์ด ํ์ธ๋ฉ๋๋ค. ์๋๋ฆฌ์ค๋๋ก๋ผ๋ฉด ํ๋กํ ์์ ํ ํฌ์คํธ์์ดํ ์ ํ๋ก
reacttypescriptreact-querysupabasezustand์ง๊ธ-๋ฒ ์คํธhanbrang
ใป
22์ผ ์
0
54
2
- ํด๊ฒฐ
React 19 ๋ฒ์ ์์ ์๋ก์ด ๋ฆฐํธ ๊ท์น์ผ๋ก setState() ํธ์ถํ๊ธฐ๊ฐ ์ ๊ฒฝ์ฐ์ ๋๋ค.
์๋ ํ์ธ์. ์์ฆ React 19๋ก ๋ค์ ๊ฐ์๋ฅผ ํ์ตํ๊ณ ์์ต๋๋ค. ๊ทธ๋ฌ๋ค ๋ณด๋ useEffect ๋ด์์ setState() ํธ์ถ ์ ์๋ก์ด Lint ๊ท์น์ผ
reacttypescriptreact-querysupabasezustand์ง๊ธ-๋ฒ ์คํธCodingbear
ใป
ํ ๋ฌ ์
0
93
2
- ํด๊ฒฐ
zustand ์ฌ์ดํธ ์ด์ํด์!! ์น๋ธ๋ผ์ฐ์ ์์ ์๋ต์์ ๋ฐ์
์์ฆ zustand ๊ณต์ Docs ์ฌ์ดํธ๊ฐ ์ด์ํด์..zustand ๋ฌธ์๋ฅผ ๋ณด๋ ค๊ณ docs ์ฌ์ดํธ์ ์ ์ํ๋ฉดGPU ์ฌ์ฉ์จ์ด ์ค๋ฅด๊ณ , ์ปดํจํฐ ์จ๋๋ ํ ์ฌ๋ผ๊ฐ๋ฉด์์น๋ธ๋ผ์ฐ์ ์์ ์๋ต์์์ด ๋์ค๊ณ ๋ฉ์ถฐ๋ฒ
reacttypescriptreact-querysupabasezustand์ง๊ธ-๋ฒ ์คํธCodingbear
ใป
ํ ๋ฌ ์
0
55
2
- ํด๊ฒฐ
supabase ์๋ฌ ๋ฉ์์ง๋ฅผ ๋ฒ์ญํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฐพ์์ ์๋ ค๋๋ฆฝ๋๋ค.
์๋ฌ ๋ฉ์์ง ํ๊ตญ์ด๋ก ๋ณ๊ฒฝํ๋ ๋ถ๋ถ์ ๋ณด๋ค ๋ณด๋ ๋ฌธ๋ ํด๋น ๋ผ์ด๋ธ๋ฆฌ๊ฐ ์๋์ง ์ฐพ์ ๋ดค๋๋ฐ ์๋๋ผ๊ตฌ์. ์ค์น์ ์ฌ์ฉ๋ฒ์ ์๋์ ๊ฐ์ต๋๋ค. <c
reacttypescriptreact-querysupabasezustand์ง๊ธ-๋ฒ ์คํธCodingbear
ใป
ํ ๋ฌ ์
2
77
0
- ๋ฏธํด๊ฒฐ
4.6 id๋ฅผ string์ผ๋ก ๋ฐ๊พธ๋๊น ์ค๋ฅ๊ฐ ๋์
id๋ฅผ ๋๊ฐ์ด string์ผ๋ก ๋ค ๋ฐ๊ฟจ๊ณ ์ฝ๋๋ ๋์ผํ๋ฐ ์ด ๋ถ๋ถ์์ ํ์ ์ค๋ฅ๊ฐ ๋ฉ๋๋ค ,<img src="https://cdn.inflearn.com/public/files/posts/4b9038c5-7aa6
reacttypescriptreact-querysupabasezustand๊ฐ์ด
ใป
ํ ๋ฌ ์
0
65
2
- ๋ฏธํด๊ฒฐ
์ด๋ฏธ์ง ๋ฉ๋ชจ๋ฆฌ ๋์ ๊ด๋ จ ์ง๋ฌธ
createObjectURL๋ก ์ด๋ฏธ ๋ฉ๋ชจ๋ฆฌ์ ๋ณด๊ด๋ ์ด๋ฏธ์ง ํ์ผ๋ค์ ๋จ์ํ filter๋ก ์ญ์ ํด๋ ์ญ์ ๋์ง ์๊ธฐ๋๋ฌธ์, ๋ฉ๋ชจ๋ฆฌ ๋์๊ฐ ๋ฐ์๋๋ค๊ณ ํ์ จ๋๋ฐ์. 1. ์ค์ ๋ก ๋ฉ๋ชจ๋ฆฌ ๋์๊ฐ ๋ฐ์ํ๊ณ ์๋์ง๋ ์ด๋ป๊ฒ ํ
reacttypescriptreact-querysupabasezustandkeeenco
ใป
ํ ๋ฌ ์
0
59
2
- ํด๊ฒฐ
56๊ฐ alertModalStore ๊ตฌํ ์ค ์ง๋ฌธ
store์์ actions๋ฅผ ์์ฑํ๊ณ store๋ฅผ ๋ด๋ณด๋ด๋ ค๊ณ ํ ๋์export const useAlertModal = () => {
reacttypescriptreact-querysupabasezustand๊ทํ ๋ถ๋์
ใป
ํ ๋ฌ ์
1
59
1
- ๋ฏธํด๊ฒฐ
checkbox ์บ์ update
todo list ์ถ๊ฐ/์ญ์ ์ ์บ์๋ฐ์ดํฐ๋ ๊ฐ๊ฐ ๋ฐ๋ก ํด์ค์ผํ๋ ๋ด์ฉ์ ์๊ฒ ๋๋ฐ, ํ์ฌ ์ฒดํฌ๋ฐ์ค๋ง ๋ณ๊ฒฝํ ๋ ์บ์๋ฐ์ดํฐ๋ฅผ ์ ๋ฐ์ดํธ ํด์ฃผ๋๊ฑฐ๋ ๋ถํ์ํ์ง์์๊น ์๊ฐ์ด ๋ญ๋๋ค. ๋ง์ฝ ๋ด์ฉ ์์ ๊ฐ์๊ฒฝ์ฐ๋ผ๋ฉด ํด์ค์ผํ๊ฒ ์ง๋ง..
reacttypescriptreact-querysupabasezustandgmldnjs0402
ใป
ํ ๋ฌ ์
0
43
2
- ํด๊ฒฐ
querykey factory
querykey factory์์ all์ ์ธ์ ์ฐ๋์??
reacttypescriptreact-querysupabasezustandgmldnjs0402
ใป
ํ ๋ฌ ์
0
55
1
- ํด๊ฒฐ
28. ๋ฐ์ดํฐ ๋ฌดํจํํ๊ธฐ ๋ถ๋ถ์์ ์ง๋ฌธ
constants.ts์ ์ฟผ๋ฆฌํค๊ฐ ๊ด๋ จํ ๋ถ๋ถ์ ์์๋ก ๋นผ๊ณ , importํ์ฌ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ ์ต๋๋ค!์ฌ๊ธฐ์ ์ง๋ฌธ์ด<p style="text-align
reacttypescriptreact-querysupabasezustand๊ทํ ๋ถ๋์
ใป
2๋ฌ ์
0
67
2






