์๋
ํ์ธ์. Boaz ์
๋๋ค.
์ด 4๋ฒ์ ์ด์ง์ ๊ฑฐ์น๋ฉฐ ๋ค์ํ ์คํํธ์
์ ๊ฒฝํ ํ๊ณ , ๋ผ์ธ์์ ์ผํ๋ค ์ผ๋ง์ ํด์ฌํ 8๋
์ฐจ ํ๋ก ํธ์๋ ์์ง๋์ด์
๋๋ค.
๋ค์ํ ํ๋ก์ ํธ์์ Next.js ๋ฅผ ํ์ฉํ๋ฉฐ, ์ ๋ ๋ง์ ์ํ์ฐฉ์ค๋ฅผ ๊ฒช์์ด์.
ํนํ ์ค๋ฌด์ ์ ์ฉํ๋ฉฐ ๋ ์ข์ ๊ตฌ์กฐ๋ฅผ ๊ณ ๋ฏผํ ๋, โ์ ์ด๋ ๊ฒ ๊ตฌ์ฑํด์ผ ํ์ง?โ, โ์ด ๊ธฐ๋ฅ์ ์จ๋ ๋๋ ์ํฉ์ธ๊ฐ?โ ๊ฐ์ ์ง๋ฌธ๋ค์ด ์์์ก๊ณ , ๊ทธ๋๋ถํฐ ๋จ์ํ ์ฌ์ฉ๋ฒ๋ณด๋ค '๋ฑ์ฅ ๋ฐฐ๊ฒฝ๊ณผ ๋์ ์๋ฆฌ์ ์ดํด'๊ฐ๋ ์ค์ํ๋ค๋ ๊ฑธ ๋๊ผ์ด์.
์ด ๊ฐ์๋ ๋จ์ํ Next.js๋ฅผ โ์ธ ์ ์๊ฒโ ๋ง๋๋ ๊ฒ์ด ๋ชฉ์ ์ ์๋์ด์.
โ์ ์ด๋ ๊ฒ ์ค๊ณ ๋์๋๊ฐ?โ, โ์ค๋ฌด์์๋ ์ด๋ค ๊ธฐ์ค์ผ๋ก ์ ํํด์ผ ํ๋๊ฐ?โ๋ฅผ ํจ๊ป ๊ณ ๋ฏผํ๊ณ ์ถ์ ๋ถ๋ค์ ์ํด ๋ง๋ค์์ด์.
๋จ์ํ ์ธ ์ค ์๋๋ฐ ๊ทธ์น๊ณ ์ถ์ง ์์๋ ๊ณผ๊ฑฐ์ ์ ์ ๊ฐ์ ์ฌ๋ฌ๋ถ์๊ฒ, ์ด ๊ฐ์๊ฐ ์ ๋ฆฌ๋ ๊ด์ ๊ณผ ๊ธฐ์ค์ ์ ์ํด์ฃผ๋ ๋์นจ๋ฐ์ด ๋์์ผ๋ฉด ํฉ๋๋ค ๐
Courses
Reviews
- Next.js Deep Dive: From "Developer Who Can Use It" to "Developer Who Knows and Uses It"
csh0012319063
ยท
Next.js Deep Dive: From "Developer Who Can Use It" to "Developer Who Knows and Uses It"Next.js Deep Dive: From "Developer Who Can Use It" to "Developer Who Knows and Uses It"seocc06041699
ยท
Next.js Deep Dive: From "Developer Who Can Use It" to "Developer Who Knows and Uses It"Next.js Deep Dive: From "Developer Who Can Use It" to "Developer Who Knows and Uses It"tkyoun12409907
ยท
Next.js Deep Dive: From "Developer Who Can Use It" to "Developer Who Knows and Uses It"Next.js Deep Dive: From "Developer Who Can Use It" to "Developer Who Knows and Uses It"jihunkim6251444
ยท
Next.js Deep Dive: From "Developer Who Can Use It" to "Developer Who Knows and Uses It"Next.js Deep Dive: From "Developer Who Can Use It" to "Developer Who Knows and Uses It"
Posts
Q&A
๊ฐ์์ ์ธ๊ธ๋ ์์ ์ง๋ฌธ
์๋ ํ์ธ์!๋ง์ํ์ ์๋ฌ ๊ด๋ จ ์์์ ์๋ ์ ๋๋ค ๐https://youtu.be/Afo2f-mO5n8?si=KPYcqWpsvVvbSH39ํจ๊ป ๊ณต๋ถํด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค :)
- 0
- 2
- 16
Q&A
next Request Memoization๊ณผ react cache
์๋ ํ์ธ์. ๋จผ์ ๊น์ด ์๋ ์ง๋ฌธ ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.๐ค๋ฐ๋ก ๋ต๋ณ ๋๋ฆด๊ฒ์.์ ์ฉ ๋ฒ์Request Memoization์ ํ ๋ฒ์ ์๋ฒ ์์ฒญ(=ํ ๋ฒ์ React ํธ๋ฆฌ ๋ ๋๋ง) ๋์๋ง ์ ํจํฉ๋๋ค. ๊ฐ์ ํธ๋ฆฌ(๋ ์ด์์ยทํ์ด์งยท์๋ฒ ์ปดํฌ๋ํธ๋ค) ์์์ ๊ฐ์ fetch(๋์ผ URL+์ต์ )๋ฅผ ์ฌ๋ฌ ๋ฒ ํธ์ถํด๋ 1๋ฒ๋ง ๋๊ฐ๋๋ค. ํ์ง๋ง /dashboard์ /home์ฒ๋ผ ์๋ก ๋ค๋ฅธ ํ์ด์ง ์์ฒญ์ ๊ฐ๊ฐ ๋ณ๋ ์์ฒญ์ด๋ฏ๋ก ์๋ก ๊ณต์ ๋์ง ์์ต๋๋ค. ๋ํ React ์ปดํฌ๋ํธ ํธ๋ฆฌ ๋ฐ(์: Route Handler)์๋ ์ ์ฉ๋์ง ์์ต๋๋ค. ์ฐธ๊ณ - Next.jsํ๋ผ๋ฏธํฐ๊ฐ ๋ค๋ฅด๋ฉด?์๋์. ๋ฉ๋ชจ์ด์ ์ด์ ํค๋ **URL + fetch ์ต์ (๋ฉ์๋/ํค๋/๋ฐ๋ ๋ฑ)**์ด ๋์ผํ ๋๋ง ์ผ์นํฉ๋๋ค. ์ฟผ๋ฆฌ ์คํธ๋ง์ด๋ ํค๋๊ฐ ๋ฌ๋ผ์ง๋ฉด ๋ค๋ฅธ ์์ฒญ์ผ๋ก ๊ฐ์ฃผ๋์ด ์ค๋ณต ์ ๊ฑฐ๋์ง ์์ต๋๋ค. ์ถ๊ฐ๋ก ๋ฉ๋ชจ์ด์ ์ด์ ์ GET๋ง ๋์์ ๋๋ค. ์ฐธ๊ณ - Next.jsaxios๋ฅผ ์ฐ๋ฉด? ๋์์ react์ cacheNext์ Request Memoization์ ํจ์น๋ fetch์ ๋ถ๋ ์ต์ ํ๋ผ์ axios์๋ ์๋ ์ ์ฉ๋์ง ์์ต๋๋ค. ๋ง์ํ์ ๋๋ก axios(๋๋ ORM/DB ํด๋ผ์ด์ธํธ)๋ฅผ ์จ์ผ ํ๋ค๋ฉด, ํด๋น ํธ์ถ ํจ์๋ฅผ react์ cache๋ก ๊ฐ์ธ๋ฉด ๋น์ทํ๊ฒ โํ ์์ฒญ ๋ด ์ค๋ณต ํธ์ถโ์ ์ต์ ํํ ์ ์์ต๋๋ค ์ฐธ๊ณ - Next.js
- 0
- 1
- 40
Q&A
next.js ์๋ฒfetch ์๋ฌ fallback ui ๊ตฌํ ๋ฐฉ๋ฒ
๋ต๋ณ์ด ๋ฆ์์ต๋๋ค ๐โโ์ฐ์ ํฌ์ธํธ ์ง์ ์ข์ ์ง๋ฌธ ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. ๋ต๋ณ ๋จผ์ ๋๋ฆด๊ฒ์ ๐ค๊ฐ๋ฅํฉ๋๋ค. โ์น์ ๋จ์๋ก๋ง ์คํจ UIโ๋ฅผ ๋์ฐ๋ ๋ฐฉ๋ฒ์ ๋ ๊ฐ์ง๊ฐ ์์ด์.์น์ ๋ด๋ถ์์ ์๋ฌ๋ฅผ โ์ก๊ณ โ ์ํํธ-ํ์ผ(fallback์ ์ง์ ๋ ๋)App Router์ ์ธ๊ทธ๋จผํธ ๋จ์ ์๋ฌ ๋ฐ์ด๋๋ฆฌ๋ฅผ ํ์ฉ(= error.tsx), ์น์ ์ Parallel Routes๋ก ๋ถ๋ฆฌ๋ง์ํ์ ๋ฐฉ๋ฒ ์ค์ error.tsx๋ ์ธ๊ทธ๋จผํธ ๋จ์๋ก ์๋ฌ๋ฅผ ์ก๊ธฐ์ ์ถ๊ฐ์ ์ธ ์์ (๋ผ์ฐํ ๊ตฌ์กฐ ๊ด๋ จ)์ด ํ์ํฉ๋๋ค. ์ฐ์ ๊ฐ๋จํ 1๋ฒ๋ถํฐ ์์ธํ ์ค๋ช ๋๋ฆด๊ฒ์.1) ์น์ ๋ด๋ถ์์ ์ฒ๋ฆฌ(Soft fail)Server Component ์์์ fetch๋ฅผ ์ง์ try/catch๋ก ๊ฐ์ธ๊ณ , ์คํจ ์ ๊ทธ ์น์ ๋ง ๋์ฒด UI๋ฅผ ์กฐ๊ฑด๋ถ ๋ ๋๋ง ํ๋ ๋ฐฉ๋ฒ์ ๋๋ค. fetch๋ ๋คํธ์ํฌ ์ค๋ฅ์์๋ง throwํ๊ณ , HTTP ์๋ฌ๋ res.ok๋ก ํ๋ณํ ์ ์์ด์.// SectionB.tsx (Server Component) export default async function SectionB() { try { const res = await fetch(process.env.API_URL + '/b', { cache: 'no-store' }); if (!res.ok) { // ์น์ ์ ์ฉ fallback return ; } const data = await res.json(); return ; } catch (err) { // ๋คํธ์ํฌ/ํ์ฑ ๋ฑ ์์ธ return ; } } ์ด ๋ฐฉ์์ A, C๋ ์ ์ ๋ ๋, B๋ง fallback์ด ๋ฉ๋๋ค. ์๋ฒ ์ก์ ์ด ์๋์ด๋ ๋ฌธ์ ์์ด์. (Next ๊ณต์ ๊ฐ์ด๋๋ ๋ ๋ ์ดํ ๋น๋๊ธฐ/์ด๋ฒคํธ์ฑ ์๋ฌ๋ ๋ฐ์ด๋๋ฆฌ๊ฐ ๋ชป ์ก์ผ๋ ์ง์ ์ฒ๋ฆฌํ๋ผ๊ณ ์๋ดํฉ๋๋ค. (Next.js))์ฅ์ : ๊ตฌ์กฐ ๋ณ๊ฒฝ ์์.๋จ์ : โ๋์ง๋(throw) ์๋ฌโ๋ฅผ ๊ฒฝ๊ณ๋ก ๋ถ๋ฆฌํด์ ๋ค๋ฃจ๋ ๊ฑด ์๋(์ฆ, ๋ฐ์ด๋๋ฆฌ๊ฐ ์๋๋ผ โ์กฐ๊ฑด๋ถ ๋ ๋โ).2) ์ง์ง ๋ฐ์ด๋๋ฆฌ: Parallel Routes + error.tsxNext.js๋ ์ธ๊ทธ๋จผํธ ๋จ์๋ก ์๋ฌ ๋ฐ์ด๋๋ฆฌ๋ฅผ ๋ก๋๋ค. ๊ฐ์ URL ์์์๋ Parallel Routes(@slot) ๋ฅผ ์ฐ๋ฉด ๊ฐ ์ฌ๋กฏ์ ๊ฐ๋ณ error.tsx ๋ฅผ ๋ ์ ์์ด์. B๋ง ์คํจํด๋ B ์ฌ๋กฏ๋ง ์๋ฌ UI๊ฐ ๋์ต๋๋ค. (Next.js)์์ ๊ตฌ์กฐ:app/dashboard/ page.tsx // ์ ์ฒด ๋ ์ด์์์์ ์ฌ๋กฏ์ ๋ฐฐ์น @a/page.tsx // SectionA @a/default.tsx @b/page.tsx // SectionB @b/error.tsx // B ์ ์ฉ ์๋ฌ UI @b/default.tsx @c/page.tsx // SectionC @c/default.tsx page.tsx(๋ถ๋ชจ)์์ ์ฌ๋กฏ์ ๋ฐฐ์น:export default function Dashboard({ a, b, c, }: { a: React.ReactNode; b: React.ReactNode; c: React.ReactNode }) { return ( {a} {b} {/* B๋ง ์คํจํ๋ฉด ์ฌ๊ธฐ๋ง error.tsx๋ก ๋์ฒด */} {c} ); } @b/error.tsx๋ ๋ฐ๋์ Client Component์ฌ์ผ ํ๊ณ , reset()์ผ๋ก ์ฌ์๋ ๋ฒํผ์ ๋ง๋ค ์ ์์ต๋๋ค. (Next.js)'use client'; export default function Error({ error, reset, }: { error: Error & { digest?: string }, reset: () => void }) { return ( ์น์ B์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค. reset()}>๋ค์ ์๋ ); } ์ฅ์ : ์ง์ง โ๊ฒฝ๊ณ ๊ฒฉ๋ฆฌโ. ์คํธ๋ฆฌ๋ฐ ์ค์๋ ํด๋น ์ฌ๋กฏ๋ง ๋์ฒด UI๋ก ์ ํ.๋จ์ : ๋ผ์ฐํ (ํด๋) ๊ตฌ์กฐ๋ฅผ ๋ฐ๊ฟ์ผ ํจ.์ฐธ๊ณ : ๋ง์ํด์ฃผ์ ๊ฒ์ฒ๋ผ, ์ผ๋ฐ์ ์ธ ์ปค์คํ ์ปดํฌ๋ํธ(react-error-boundary ๋ฑ)๋ฅผ JSX๋ก ๊ฐ์ธ๋ ๊ฒ๋ง์ผ๋ก๋ ์๋ฒ ์ปดํฌ๋ํธ์์ ๋์ง ์๋ฌ๋ฅผ ๋ชป ์ก๋ ์ ์ฝ์ด ์์ต๋๋ค. App Router์์ ์ธ๊ทธ๋จผํธ error.tsx ๋ฅผ ๋์ด์ผ ์์ ์ ์ผ๋ก ์กํ์. (GitHub)์ด๋ค ๋ฐฉ์์ ๊ณ ๋ฅผ๊น?๋น ๋ฅธ ์ ์ฉ/์น์ ๋ณ ๋จ์ ์คํจ ์ฒ๋ฆฌ โ 1) Soft fail (try/catch + ์กฐ๊ฑด๋ถ ๋ ๋)์คํธ๋ฆฌ๋ฐ/๊ฒฉ๋ฆฌ/๋ฆฌํธ๋ผ์ด๊น์ง ๊ฐ์ถ ์ ์ ๋ถ๋ฆฌ โ 2) Parallel Routes + error.tsx๊ณต์ ๋ฌธ์ ์์ฝ:์๋ฌ ๋ฐ์ด๋๋ฆฌ๋ ์ธ๊ทธ๋จผํธ ๋ ๋ฒจ์์ ์ค์ฒฉ ๋ฐฐ์น ๊ฐ๋ฅ(๊ทธ ์๋๋ง ์ก์), error.tsx๋ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ์ฌ์ผ ํจ. (Next.js)Parallel Routes๋ ๊ฐ ์ฌ๋กฏ๋ณ ๋ ๋ฆฝ ๋ก๋ฉ/์๋ฌ ์ํ๋ฅผ ์ ๊ณต. (Next.js)์ง๊ธ ์ฐ๊ณ ๊ณ์ ํ์ด์ง ๊ตฌ์กฐ์ ๋ง์ถฐ ํด๊ฒฐ์ฑ ์ ์ ํํ์ค ์ ์์๊ฑฐ์ฌ์. ๋ฆฌํฉํฐ๋ง ์์ด Soft fail ํจํด์ผ๋ก ์ฐ์ ์ ์ฉํ๊ฑฐ๋, Parallel Routes๋ก ๋ถ๋ฆฌํ๋ ํ์ผ ๊ตฌ์กฐ๋ฅผ ์ ์ฉํ๋ ๋ฐฉ์์ผ๋ก์.
- 0
- 2
- 58
Q&A
ํํฐ์ต์ ์ด ๋ง์ ํ์ด์ง์์๋ ์๋ฒ fetch๋ฅผ ์ฌ์ฉํ๋๊ฒ ๋ง์๊น์??
๊น์ด์๋ ์ข์ ์ง๋ฌธ ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. Next.js์์ ํํฐ๊ฐ ๋ง์ ํ์ด์ง๋ฅผ ๊ตฌํํ ๋ ์๋ฒ Fetch๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๊ถ์ฅ๋๋ ์ด์ ๋ ์๋ฒ ์ปดํฌ๋ํธ(RSC)์ ์ฅ์ ์ธ ์ด๊ธฐ ๋ก๋ ์ ๋น ๋ฅธ ์๋ต๊ณผ ๋ฎ์ ํด๋ผ์ด์ธํธ ๋ฒ๋ค ์ฌ์ด์ฆ ๋๋ฌธ์ ๋๋ค.๊ทธ๋ฌ๋ ์ง๋ฌธํ์ ์ผ์ด์ค์ฒ๋ผ ํํฐ๊ฐ ๋ง์ ์ฌ์ฉ์๊ฐ ๋น๋ฒํ๊ฒ ๋ฐ์ดํฐ๋ฅผ ๋ณ๊ฒฝํด์ผ ํ ๊ฒฝ์ฐ์๋ ๋ช ๊ฐ์ง ํธ๋ ์ด๋์คํ๊ฐ ์กด์ฌํฉ๋๋ค.1. ์๋ฒ Fetch (RSC + route.push/replace)์๋ฒ ์ปดํฌ๋ํธ์ ์๋ฒ Fetch๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ ๋ค์๊ณผ ๊ฐ์ ์ฅ๋จ์ ์ด ์กด์ฌํฉ๋๋ค:์ฅ์ ์ด๊ธฐ ํ์ด์ง ๋ก๋ฉ์ด ๋งค์ฐ ๋น ๋ฅด๊ณ , SEO์ ์ ๋ฆฌํฉ๋๋ค.ํด๋ผ์ด์ธํธ JS ๋ฒ๋ค ์ฌ์ด์ฆ๊ฐ ์ค์ด๋ค์ด ์ฑ๋ฅ์ด ์ข์ต๋๋ค.์ํ ๊ด๋ฆฌ ๋ณต์ก๋๊ฐ ํ์ ํ ๋ฎ์์ง๋๋ค. (์ํ ๊ด๋ฆฌ๋ฅผ ์๋ฒ๊ฐ ๋์ ํฉ๋๋ค)๋จ์ ํํฐ ์ต์ ์ ๋ณ๊ฒฝํ ๋๋ง๋ค ๋งค๋ฒ ์๋ฒ๋ก ์์ฒญ์ ๋ณด๋ด์ผ ํฉ๋๋ค.์ํ๊ฐ URL๋ก ํํ๋๊ธฐ ๋๋ฌธ์ router.push ๋๋ router.replace๋ก ํ์ด์ง๊ฐ ๋ค์ ๋ ๋๋ง๋ฉ๋๋ค. ์ด๋ ํ์ด์ง๊ฐ ๊ณ์ ์๋ก ๊ทธ๋ ค์ง๋ ๋๋์ ์ค๋๋ค. (UX๊ฐ ์ฝ๊ฐ ํฌ๋ฐํ ์ ์์)์๋ฒ Fetch ๋ฐฉ์์ด ๊ฐ์ฅ ์ ํฉํ ๊ฒฝ์ฐ๋ ํํฐ๊ฐ ์๋์ ์ผ๋ก ์์ฃผ ๋ฐ๋์ง ์๊ณ , URL ๊ณต์ ๋ SEO๊ฐ ์ค์ํ ์ํฉ์ ๋๋ค.์: ์ด์ปค๋จธ์ค ์ํ ํ์ด์ง, ๊ฒ์ ๊ฒฐ๊ณผ ํ์ด์ง ๋ฑ(๋ํ revalidatePath ๋ฑ์ผ๋ก ์บ์๋ฅผ ๋ฌดํจํํ๋ ๋ฐฉ๋ฒ๋ ์์ต๋๋ค :))2. ํด๋ผ์ด์ธํธ Fetch (React Query ๋ฑ ํด๋ผ์ด์ธํธ ์ํ ๊ด๋ฆฌ)ํํฐ ๋ณ๊ฒฝ์ด ๋น๋ฒํ ๊ฒฝ์ฐ React Query์ ๊ฐ์ ํด๋ผ์ด์ธํธ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์๊ณผ ๊ฐ์ ํน์ง์ด ์์ต๋๋ค.์ฅ์ ํํฐ ๋ณ๊ฒฝ ์ UI๊ฐ ๋ถ๋๋ฝ๊ณ ์์ฐ์ค๋ฝ์ต๋๋ค. UX๊ฐ ๋ ๋ฐ์ด๋ฉ๋๋ค.ํด๋ผ์ด์ธํธ์์ ๋ฐ์ดํฐ๋ฅผ ์บ์ฑํด๋๊ณ ๋น ๋ฅด๊ฒ ์๋ต์ ์ ๊ณตํฉ๋๋ค.ํ์ด์ง ์ ์ฒด๊ฐ ์๋ ํ์ํ ๋ถ๋ถ๋ง ๋ฆฌ๋ ๋๋งํ๋ฏ๋ก UX๊ฐ ๋น๊ต์ ๋ฐ์ด๋ฉ๋๋ค.๋จ์ ์ด๊ธฐ JS ๋ฒ๋ค ์ฌ์ด์ฆ๊ฐ ๋์ด๋๊ณ , ์ด๊ธฐ ๋ก๋ฉ ์๋๋ ์๋ฒ Fetch ๋๋น ๋๋ ค์ง ์ ์์ต๋๋ค.๋ฐ์ดํฐ๊ฐ ํด๋ผ์ด์ธํธ ์ํ์ ์๋ฒ ์ํ๋ก ๋๋๊ฒ ๋๋ฏ๋ก ๊ด๋ฆฌ๊ฐ ๋ณต์กํด์ง ์ ์์ต๋๋ค.SEO ์นํ์ ์ด์ง ์์ ์ ์์ต๋๋ค. (๋ฐ์ดํฐ๊ฐ ํด๋ผ์ด์ธํธ์์ Fetch๋๋ฏ๋ก)์ด ๋ฐฉ์์ด ์ ํฉํ ๊ฒฝ์ฐ๋ ํํฐ ๋ณ๊ฒฝ์ด ๋งค์ฐ ๋น๋ฒํ๊ณ , ์ค์๊ฐ์ผ๋ก ๋ถ๋๋ฝ๊ฒ ๋ณ๊ฒฝ๋๋ ๊ฒฝํ์ด ์ค์ํ ๊ฒฝ์ฐ์ ๋๋ค.์: ๊ด๋ฆฌ์ ํ์ด์ง, ๋์๋ณด๋, ์ธํฐ๋ํฐ๋ธ ๋ฐ์ดํฐ ๋ถ์ ํ์ด์ง ๋ฑ ์ํฉ์ ๊ณ ๋ คํ์ ์ ์ ์ ํ ๊ธฐ์ ์ ์ฌ์ฉํ๋๊ฒ ๊ฐ์ฅ ์ข์ ํด๊ฒฐ์ฑ ์ธ๊ฒ ๊ฐ์ต๋๋ค..! ๋ฆฌ์กํธ ์ฟผ๋ฆฌ ๋์์ ํน์ searchParams ๊ฐ ํค๊ฐ์ ํฌํจ๋์ด ์๋์??๋ง์ฝ ๊ทธ๋ ๋ค๋ฉด ์๋์ ๊ฐ์ ๊ณผ์ ์ ์๊ฐํด๋ณผ ์ ์์๊ฒ ๊ฐ์์. ๊ธฐ๋ณธ์ ์ผ๋ก ๋ฆฌ์กํธ ์ฟผ๋ฆฌ๋ Query Key๊ฐ ๋ณ๊ฒฝ๋ ๋ ์๋์ผ๋ก ๋ค์ fetch๋ฅผ ์ํํฉ๋๋ค.์ฌ์ฉ์๊ฐ ์ง์ URL์ replaceState๋ฅผ ์ด์ฉํด ๋ณ๊ฒฝํด๋, Next.js Router๋ React Router์ ๊ฐ์ ๋ผ์ฐํฐ์์ ์ ๊ณตํ๋ ํ ๋ค์ด URL ์ํ๋ฅผ ๊ณ์ ๊ด์ฐฐํ๊ณ ์์ผ๋ฉฐ, URL ์ํ๊ฐ ๋ณ๊ฒฝ๋๋ฉด ๋ผ์ฐํฐ ์ํ๊ฐ ๋ณ๊ฒฝ๋ฉ๋๋ค.์ด๋ก ์ธํด React Query ํ ์ด ์ฌ์ฉํ๋ queryKey(searchParams ๋ฑ)๊ฐ ๋ณ๊ฒฝ๋๋ฉฐ, React Query๊ฐ ๋ณ๊ฒฝ์ ๊ฐ์งํ์ฌ ์๋์ผ๋ก fetch๋ฅผ ๋ค์ ์์ฒญํฉ๋๋ค.React Query๋ ๊ธฐ๋ณธ์ ์ผ๋ก Query Key๊ฐ ๋ฌ๋ผ์ง๋ฉด ์๋ก์ด ์์ฒญ์ ์๋์ผ๋ก ์ํํฉ๋๋ค.๊ฒฐ๋ก ์ ์ผ๋ก React Query๊ฐ ์ฌ์ฉํ๋ ์ํ๊ฐ URL ์ํ์ ์ฐ๊ฒฐ๋์ด ์๋ค๋ฉด, URL๋ง ๋ณ๊ฒฝํด๋ ์๋์ผ๋ก fetch ์์ฒญ์ด ๋ฐ์ํ๋ ๊ฒ์ผ๋ก ์ถ์ธกํ ์ ์์ด์ :)
- 0
- 2
- 43
Q&A
template.tsx ์์ ์๋ฒ fetch ํ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ก ๋๊ฒจ์ฃผ๋ฉด ์ฑํฌ๊ฐ ๋ง๋ ์ด์
์ด๋ฐ ๊ฒฝ์ฐ ๋ฌธ์ ์์ธ์ด ๋ค์ํ ์ ์์ด์์. ํน์ ํด๋ผ์ด์ธํธ ๋ผ์ฐํ ์ด route segment ๋ ๊ทธ๋๋ก์ด๊ณ , searchParams ๊ฐ ๋ฐ๋๋ ํ์์ผ๊น์?(์๋ฅผ ๋ค์ด /gift-item -> /gift-list ์ ์ด๋์ด ์๋, /gift-item?id=1 -> /gift-item?id=2 ์ฒ๋ผ์)๋ง์ฝ ์์ ๊ฐ์ ์ด๋(searchParams ๋ง ๋ฐ๋)์ด๋ผ๋ฉด template.tsx ๋ ๋ฆฌ๋ ๋๋ง์ด ๋ฐ์ํ์ง ์์์ ์ฌ์ญค๋ด ๋๋ค ๐
- 1
- 1
- 39
Q&A
layout ์ปดํฌ๋ํธ ๋ด ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ
๋์ผํ ์๋ฏธ๊ฐ ๋ง์ต๋๋ค.(Page.tsx ์ปดํฌ๋ํธ๋ ๋ง์ฐฌ๊ฐ์ง ์ ๋๋ค.)์ ํํ๊ฒ ์ดํดํ์ ๊ฒ ๊ฐ์์..!๋ค๋ง, ๊ฐ์์์ 'use client' ์ง์์ด๋ฅผ ํ์ฉํด ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฅผ ํตํด ํด๋น ๊ฐ์ ์ ๊ทผํด์ผ ํ๋ค๋ผ๋ ๋ง์ ๋งฅ๋ฝ์ Page.tsx ์ ์ ๊ทผ ๋ฐฉ๋ฒ์ด ์ฐจ์ด์ ์ด ์๋ค๋ ๋ป์ ์๋์ด์.๊ทธ๋ณด๋ค๋ 'layout ์์ ' searchParams ์ ์ ๊ทผํ ์ ์๋ค. ํ์ง๋ง, Page.tsx ์์๋ prop ์ผ๋ก searchParams ๋ฑ์ ๊ฐ์ ์ ๊ทผํ ์ ์์ด์์. ์ด๋ฌํ ์ฐจ์ด์ (๋๋ค ์๋ฒ์ปดํฌ๋ํธ์ง๋ง, Page.tsx ์์๋ searchParams ์ ์ ๊ทผ ๊ฐ๋ฅํ๋ฐ, layout ์์๋ ์ ๊ทผ ๋ถ๊ฐ)์ ๋ํด ๋ง์๋๋ฆฌ๊ณ ์ถ์์ด์. ์ง๋ฌธ์์ ๋ง์์ฃผ์ ๊ฒ์ฒ๋ผ 'use client'๋ฅผ ์ฌ์ฉํด์ ์ ๊ทผํ๋ ๋ฐฉ์์ ๋๋ค ๊ฐ๋ฅํ๊ธฐ์ ์ฐจ์ด๊ฐ ์์ด์์. ์ ์ดํดํ์ ๊ฒ ๊ฐ์์ ๐คํน์ ์ถ๊ฐ๋ก ๊ถ๊ธํ์ ์ ์์ผ์๋ฉด ํธํ๊ฒ ์๋ ค์ฃผ์ ์.
- 0
- 2
- 38
Q&A
๊ฒ์ํ ๋ฆฌ์คํธ ์์ฑํ ๋ use client๋ฅผ ์ด๋์๋ถํฐ ๋ถ์ฌ์ผํ ์ง ๋ชจ๋ฅด๊ฒ ์ด์
๋ต๋ณ์ด ์กฐ๊ธ ๋ฆ์๋ค์..!๋ฆฌ์คํธ ๋ฐ์ดํฐ๋ฅผ ํด๋ผ์ด์ธํธ ์ํ๋ก ์ด๋ป๊ฒ ๊ด๋ฆฌํ ์ง ๊ณ ๋ฏผํ ๋, ์ ๋ ๊ฐ์ ์ง๋ฌธ์ ์์ฃผ ํ๊ฒ ๋์ด์. ํนํ ์ข์์๋ ์กฐํ์์ฒ๋ผ ๊ณ์ ๋ฐ๋๋ ๊ฐ์ด ๋ค์ด๊ฐ๋ค๋ฉด, ๊ตฌ์กฐ ์ค๊ณ์์ ์ ํ์ง๊ฐ ์ ๋งคํ๊ธฐ๋ ํด์.๊ฒฐ๋ก ๋ถํฐ ๋งํ์๋ฉด, ๋ฆฌ์คํธ ์ ์ฒด๋ฅผ ํต์ผ๋ก ๊ด๋ฆฌํ๋ ๋ฐฉ์๋ณด๋ค๋, ๊ฐ ๋ ์ฝ๋๋ฅผ ์ ์ฅํ๊ณ ๊ฐ๋ณ ์ํ๋ก ๊ตฌ๋ ํ๋ ๋ฐฉ์์ด ๊ฐ์ฅ ํ์ค์ ์ด๊ณ ์ผ๋ฐ์ ์ธ ์ ํ์ธ ๊ฒ ๊ฐ์์.๊ทธ ์ด์ ๋ ๋ค์๊ณผ ๊ฐ์์.๋จผ์ , ๋ฆฌ์คํธ ๋จ์๋ก zustand์ ํต์งธ๋ก ์ ์ฅํ๋ ๋ฐฉ์์ ๊ตฌํ์ด ๋จ์ํ๋ค๋ ์ฅ์ ์ด ์์ด์. ์ด๊ธฐ ๋ฐ์ดํฐ ์ ๋ขฐ์ฑ๋ ๋๊ณ , ์๋ฒ์์ ํ๋ฒ์ ๊ฐ์ ธ์ค๊ธฐ ๋๋ฌธ์ ๊น๋ํ์ฃ . ํ์ง๋ง ์ด ๋ฐฉ์์ ๋ง์์ฃผ์ ๊ฒ์ฒ๋ผ ํ ๋ ์ฝ๋์ ์ข์์ ์๋ง ๋ฐ๋์ด๋ ์ ์ฒด ๋ฆฌ์คํธ๊ฐ ๋ค์ ๋ ๋๋ง๋๊ธฐ ๋๋ฌธ์ ์ฑ๋ฅ์์ ์ํด๋ฅผ ๋ด ๋๋ค. ๋์ ์ํธ์์ฉ์ด ๋ง์์๋ก ์ด ๋น์ฉ์ ์ปค์ ธ์.๋ฐ๋ฉด, ๊ฐ ๋ ์ฝ๋๋ฅผ Map ํํ๋ก ๋ถ๋ฆฌํด ์ ์ฅํ๋ฉด ๋ ์ฝ๋ ๋จ์๋ก๋ง ๋ ๋๋ง์ด ๋ฐ์ํด์. ์ข์์๊ฐ ๋๋ฆฌ๊ฑฐ๋ ์กฐํ์๊ฐ ๋์ด๋๋๋ผ๋ ํด๋น ๋ ์ฝ๋๋ง ๋ณ๊ฒฝ๋๊ณ , ๋๋จธ์ง๋ ๊ทธ๋๋ก ์ ์ง๋์ด์. SSR๋ก ๋ฆฌ์คํธ ์ ์ฒด๋ฅผ ๋ด๋ ค์ค ๋ค ํด๋ผ์ด์ธํธ์์๋ ํ์ํ ๋ ์ฝ๋๋ง ๋ค์ fetchํ๊ฑฐ๋ ์ํ๋ฅผ ๊ฐฑ์ ํ๋ฉด ๋๊ธฐ ๋๋ฌธ์, ์ด๊ธฐ ์๋์ ๋์ ์ ๋ฐ์ดํธ ์ฌ์ด์ ๊ท ํ๋ ์ก์ ์ ์์ด์.('use client' ๊ฐ ๋๋ ๊ฒ๊ณผ SSR ์ฌ๋ถ๋ ๋ณ๊ฐ์ฌ์์. ๊ฐ์์ ๋ ๋๋ง ํํธ๋ฅผ ๋ณด์๋ฉด ์กฐ๊ธ ๋ ํ์คํด์ง์ค ๊ฒ ๊ฐ์์ ๐ )์กฐ๊ธ ๋ฒ๊ฑฐ๋กญ๊ธด ํ์ง๋ง ๊ฒฐ๊ตญ ์ด ๋ฐฉ์์ด ์ ์ง๋ณด์์ฑ๊ณผ ์ฑ๋ฅ, ์ ์ฐ์ฑ์ ๋์์ ํ๋ณดํ ์ ์๋ ๊ตฌ์กฐ์ธ๊ฒ ๊ฐ์์. ์ค๋ฌด์์ React ์ฑ์ ์ค๊ณํ ๋๋ ์ด ๋ฐฉ์์ ์ฃผ๋ก ํ๋ ๊ฒ ๊ฐ์์์.์ด๊ธฐ ๋ฐ์ดํฐ๋ ์๋ฒ์์ ๋ฆฌ์คํธ ํํ๋ก ๋ด๋ ค๋ฐ๋, ํด๋ผ์ด์ธํธ ์ํ์์๋ Map ํํ๋ก ๋ณํํด ์ ์ฅํ๊ณ , ๊ฐ๊ฐ์ ๋ ์ฝ๋๋ฅผ zustand๋ก ๊ตฌ๋ ํ๋ ๊ตฌ์กฐ๋ฅผ ์ถ์ฒํด์. ๊ทธ๋๋ง ์ ์ ํ ํํ์ ์ธ๊ฒ ๊ฐ์์์.
- 0
- 1
- 56
Q&A
'์ Next.js ๊ฐ ํ์ํ ๊น?(๊ธฐ์ ์ ์ธ ๋ฑ์ฅ ๋ฐฐ๊ฒฝ)' ์์ ์ธ๊ธํ๋ ์์๋ค์ด ๋ฌด์์ผ๊น์?
์๋ ํ์ธ์ ์งํ๋ ์ง๋ฌธ ์ฃผ์ ์ ๊ฐ์ฌํด์ ์๋์ ๊ฐ์ด ๊ฐ ์์ ์๋ด๋๋ฆฝ๋๋ค 1๋ฒ ๋น๋๊ธฐ์ ๋ํ ์์https://youtu.be/OITMfwqmUNY?si=W_CcPkZ8PENPMHFd 2๋ฒ ssr ์ ๋ํ ์์https://youtu.be/D71ByEIBWEs?si=kdda_ciDD-RXaixx
- 0
- 2
- 102
Q&A
Parallel Route๋ฅผ ์ฌ์ฉํ ๋ชจ๋ฌ์ ๋ํด ์ง๋ฌธ์ด ์์ด์.
์ ํํ๊ฒ ๋ณด์ จ์ด์ default.js๋ฅผ ์ ํ์ฉํ๋ฉด, ๊ทธ์ํจ๊ป ๊ฒฝ๋ก ์ค๊ณ๋ฅผ ํจ๊ป ๋ฐ๊พผ๋ค๋ฉด ๊ฐ๋ฅํด์..!default.js๋ ์ฌ๋กฏ์ด ๋น์ด ์์ ๋ ๋ณด์ฌ ์ค ๊ธฐ๋ณธ ํ๋ฉด๋ง ๋ด๋นํด์์.๋ฅ ๋งํน๊ณผ ๊ณต์ ๊ฐ๋ฅํ URL์ ์ป์ผ๋ ค๋ฉด,๋ชจ๋ฌ์ @modal ๊ฐ์ ๋ณ๋ ฌ ์ฌ๋กฏ์ผ๋ก ๋ถ๋ฆฌํ ๋ค๊ทธ ์์ (.) intercepted route๋ฅผ ๋์ด์ผ ํฉ๋๋ค. ์ด๋ ๊ฒ URL ์์ฒด์ ๋ฐฐ๊ฒฝ ๊ฒฝ๋ก๋ฅผ ํฌํจ์์ผ์ผ ์๋ก๊ณ ์นจ์ด๋ ์ง์ ์ ๊ทผ์์๋ ๋ฆฌ์คํธ + ๋ชจ๋ฌ์ด ํจ๊ป ๋ณต์๋์ด์์. ๋ค์ ๋งํด default.js๋ง์ผ๋ก๋ ํด๊ฒฐ๋์ง ์๊ณ , ๊ฒฝ๋ก ์ค๊ณ๋ฅผ ํจ๊ป ๋ฐ๊ฟ์ผ ํด์.
- 0
- 2
- 75
Q&A
์ ํ๋ธ ์์๊ณผ์ ์ฐจ์ด์ ๋ฌธ์
์ ํ๋ธ์์ ํจ๊ป ๊ณต๋ถํด์ฃผ์ จ๊ตฐ์ :)์๋ 4๊ฐ๊ฐ ์ธํ๋ฐ ๊ฐ์์๋ง ์๋ ์์์ ๋๋ค.router.push() ์ข ๋ฃ ์์ ์ ์ก๋ ๋ฐฉ๋ฒ?์ route.ts ์ page.tsx ๋ ๋ค๋ฅธ ํด๋์ ์ ์ธํด์ผ ํ ๊น? ์ props ๋ก ํจ์๋ฅผ ์ ๋ฌ(Server -> Client Component)ํ ์ ์์๊น?ISR ์ธ์ ์ฌ์ฉํด์ผ ํ ๊น?๋ํ 4์ ์ค์ Composition patterns ์ ๋ํด ์ถ๊ฐ๋ก ์ ๋ฐ์ดํธํ ์์ ์ด์ด์.ํน์ Next.js ์์์ ๊ฐ์๊ฐ ํ์ํ ์ฃผ์ ๋ฅผ ๋ง์ํด์ฃผ์๋ฉด, ์ถ๊ฐ๋ก ๊ฐ์๋ฅผ ์ ์ํ์ฌ ์ ๋ฐ์ดํธ ํด๋ณผ๊ฒ์. ๐
- 0
- 1
- 160