๐Ÿ”ญ

2024. 04. 03. ํšŒ์˜๋ก

ย ๋””์ž์ด๋„ˆ๋‹˜ ํšŒ์˜

โ€ข
์ด๋ฉ”์ผ ๋กœ๊ทธ์ธ์€ ์—†์• ๊ธฐ
โ€ข
supabase user Table โ†’ users ๋กœ ์ด๋ฆ„ ๋ฐ”๊พธ๊ธฐ
โ€ข
์ผ๋‹จ ์†Œ์…œ๋กœ๊ทธ์ธ์œผ๋กœ ๋‹ค ์ˆ˜๊ฐ•์ƒ์œผ๋กœ ๋ฐ›๊ณ , ๋งˆ์ดํŽ˜์ด์ง€์—์„œ ์„ ์ƒ๋‹˜์œผ๋กœ ์ „ํ™˜ํ•˜๋ฉด์„œ ์ •๋ณด ๋ฐ›๋„๋ก?
โ€ข
๋กœ๊ทธ์ธ์‹œ ๊ฐ•์‚ฌ/์ˆ˜๊ฐ•์ƒ ์ •๋ณด๋ฅผ ์–ด๋–ป๊ฒŒ ๋ฐ›์„ ๊ฒƒ์ด๋ƒ
์†Œ์…œ๋กœ ๋กœ๊ทธ์ธ ๋ฐ›๊ณ  ๋ชจ๋‹ฌ์—์„œ ๊ฐ•์‚ฌ ์ˆ˜๊ฐ•์ƒ ์„ ํƒํ•ด์„œ ์ •๋ณด๋ฐ›๊ธฐ
โ€ข
> ๊ฐ•์‚ฌ ์„ ํƒ์‹œ ์ง์—…, ๋ถ„์•ผ๋งŒ ๋ฐ›๊ณ  ๋งˆ์ดํŽ˜์ด์ง€์—์„œ ์ถ”๊ฐ€ ์ •๋ณด ์ž…๋ ฅํ•ด์•ผ ํด๋ž˜์Šค ๋“ฑ๋ก ๊ฐ€๋Šฅ
โ€ข
> ๊ฐ•์‚ฌ ์ˆ˜๊ฐ•์ƒ๋งŒ ์„ ํƒํ•˜๊ณ  ๋งˆ์ดํŽ˜์ด์ง€์—์„œ ์ •๋ณด๋ฐ›๊ธฐ
๊ทธ๋ƒฅ ์ˆ˜๊ฐ•์ƒ์œผ๋กœ ๋กœ๊ทธ์ธ ๋ฐ›๊ณ  ๋งˆ์ดํŽ˜์ด์ง€์—์„œ ์ „ํ™˜ํ•˜๊ธฐ -> ๊ฐ•์‚ฌ ์ •๋ณด๋ฅผ ์ด๋•Œ ๋ฐ›์Œ.

์†Œ์…œ๋กœ ๋กœ๊ทธ์ธ โ‡’ ์ผ๋‹จ ์ˆ˜๊ฐ•์ƒ์œผ๋กœ ๋ฐ›๊ณ  ๋ฐ”๋กœ ๋ฉ”์ธ์œผ๋กœ โ‡’ ๊ฐ•์‚ฌ ์ „ํ™˜ ํ•˜๋ ค๋ฉด ๋งˆ์ดํŽ˜์ด์ง€์—์„œ ์ •๋ณด ์ถ”๊ฐ€ ์ž…๋ ฅ

๋ฐ์ผ๋ฆฌ ์Šคํฌ๋Ÿผ ํŠœํ„ฐ๋‹˜

โ€ข
๋ฌดํ•œ์Šคํฌ๋กค - ์ธํ„ฐ์…‰์…˜ ์˜ต์ €๋ฒ„(์–ธ์ œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ์ง€) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ณ ๋ ค,
โ€ข
๋ฆฌ์•กํŠธ์ฟผ๋ฆฌ SSR ์‚ฌ์šฉ์€ ๊ณต์‹๋ฌธ์„œ ์ฐธ๊ณ 
โ€ข
useSuspense
โ€ข
์ด๊ฑฐ ์ฐธ๊ณ 
Routing: Loading UI and Streaming
Built on top of Suspense, Loading UI allows you to create a fallback for specific route segments, and automatically stream content as it becomes ready.
https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
โ€ข
์˜ˆ์•ฝํ•˜๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ๋‚จ์€ ์ž๋ฆฌ ์ˆ˜ ํ•œ๋ฒˆ ๋” ์ฒดํฌ โ‡’ db์—์„œ fetchํ•ด์„œ ํ•œ๋ฒˆ ๋” ํ™•์ธ
โ€ข
๊ณ„์ขŒ๋ฒˆํ˜ธ ์ผ๋ถ€ ๋น„๊ณต๊ฐœ
โ—ฆ
โ‡’ ๋ Œ๋”๋ง๋ถ€๋ถ„์—์„œ ๋น„๊ณต๊ฐœ์ฒ˜๋ฆฌํ•œ๋‹ค๋ฉด ๋„คํŠธ์›Œํฌ ํƒญ์—์„œ ๋ณผ์ˆ˜์žˆ์ง€๋งŒ
โ—ฆ
โ‡’ ๋งˆ์ดํŽ˜์ด์ง€ ์ž์ฒด๊ฐ€ ์ž๊ธฐ์ •๋ณด๋ฅผ ํŠน์ •ํ•ด์„œ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ดœ์ฐฎ์„๊ฒƒ์ด๋‹ค

์ฝ”๋“œ ๋ฆฌ๋ทฐ

โ€ข

ย ์ €๋… ๋ฐ์ผ๋ฆฌ ์Šคํฌ๋Ÿผ ์–˜๊ธฐ ๋‚˜๋ˆ ๋ณด๊ธฐ