Boaz
@boaz
Students
275
Reviews
20
Course Rating
4.7
์๋
ํ์ธ์. Boaz ์
๋๋ค.
์ด 4๋ฒ์ ์ด์ง์ ๊ฑฐ์น๋ฉฐ ๋ค์ํ ์คํํธ์
์ ๊ฒฝํ ํ๊ณ , ๋ผ์ธ์์ ์ผํ๋ค ์ผ๋ง์ ํด์ฌํ 8๋
์ฐจ ํ๋ก ํธ์๋ ์์ง๋์ด์
๋๋ค.
๋ค์ํ ํ๋ก์ ํธ์์ Next.js ๋ฅผ ํ์ฉํ๋ฉฐ, ์ ๋ ๋ง์ ์ํ์ฐฉ์ค๋ฅผ ๊ฒช์์ด์.
ํนํ ์ค๋ฌด์ ์ ์ฉํ๋ฉฐ ๋ ์ข์ ๊ตฌ์กฐ๋ฅผ ๊ณ ๋ฏผํ ๋, โ์ ์ด๋ ๊ฒ ๊ตฌ์ฑํด์ผ ํ์ง?โ, โ์ด ๊ธฐ๋ฅ์ ์จ๋ ๋๋ ์ํฉ์ธ๊ฐ?โ ๊ฐ์ ์ง๋ฌธ๋ค์ด ์์์ก๊ณ , ๊ทธ๋๋ถํฐ ๋จ์ํ ์ฌ์ฉ๋ฒ๋ณด๋ค '๋ฑ์ฅ ๋ฐฐ๊ฒฝ๊ณผ ๋์ ์๋ฆฌ์ ์ดํด'๊ฐ๋ ์ค์ํ๋ค๋ ๊ฑธ ๋๊ผ์ด์.
์ด ๊ฐ์๋ ๋จ์ํ Next.js๋ฅผ โ์ธ ์ ์๊ฒโ ๋ง๋๋ ๊ฒ์ด ๋ชฉ์ ์ ์๋์ด์.
โ์ ์ด๋ ๊ฒ ์ค๊ณ ๋์๋๊ฐ?โ, โ์ค๋ฌด์์๋ ์ด๋ค ๊ธฐ์ค์ผ๋ก ์ ํํด์ผ ํ๋๊ฐ?โ๋ฅผ ํจ๊ป ๊ณ ๋ฏผํ๊ณ ์ถ์ ๋ถ๋ค์ ์ํด ๋ง๋ค์์ด์.
๋จ์ํ ์ธ ์ค ์๋๋ฐ ๊ทธ์น๊ณ ์ถ์ง ์์๋ ๊ณผ๊ฑฐ์ ์ ์ ๊ฐ์ ์ฌ๋ฌ๋ถ์๊ฒ, ์ด ๊ฐ์๊ฐ ์ ๋ฆฌ๋ ๊ด์ ๊ณผ ๊ธฐ์ค์ ์ ์ํด์ฃผ๋ ๋์นจ๋ฐ์ด ๋์์ผ๋ฉด ํฉ๋๋ค ๐
Courses
Reviews
- Diving into Next.js: From a "Developer Who Can Use It" to a "Developer Who Understands It"
csh0012319063
ยท
Diving into Next.js: From a "Developer Who Can Use It" to a "Developer Who Understands It"Diving into Next.js: From a "Developer Who Can Use It" to a "Developer Who Understands It"seocc06041699
ยท
Diving into Next.js: From a "Developer Who Can Use It" to a "Developer Who Understands It"Diving into Next.js: From a "Developer Who Can Use It" to a "Developer Who Understands It"tkyoun12409907
ยท
Diving into Next.js: From a "Developer Who Can Use It" to a "Developer Who Understands It"Diving into Next.js: From a "Developer Who Can Use It" to a "Developer Who Understands It"jihunkim6251444
ยท
Diving into Next.js: From a "Developer Who Can Use It" to a "Developer Who Understands It"Diving into Next.js: From a "Developer Who Can Use It" to a "Developer Who Understands It"
Posts
Q&A
template ๋์ ํ๋ฆ์ ๋ํด์ ์ง๋ฌธ ์์ต๋๋ค.
ํํ ์์ฒด๋ก๋ re-mount๊ฐ ๋ ์ ํํฉ๋๋ค.๋ง์ํ์ ๊ฒ์ฒ๋ผ ์ํ๊ฐ ์ด๊ธฐํ๋๋ ๊ฑด re-render๊ฐ ์๋๋ผ,๊ธฐ์กด fiber๋ฅผ ๋ฒ๋ฆฌ๊ณ ์ปดํฌ๋ํธ๋ฅผ ๋ค์ mountํ๊ธฐ ๋๋ฌธ์ด์ด์.๋ค๋ง ๊ฐ์์์๋โ๋ค๋น๊ฒ์ด์ ์ด ๋ฐ์ํ๋ฉด template๊ฐ ๋ค์ ๊ทธ๋ ค์ง๋คโ๋์ ์ฒด ํ๋ฆ์ ๋น ๋ฅด๊ฒ ์ดํด์ํค๊ธฐ ์ํดre-render๋ผ๋ ํํ์ ์ฌ์ฉํ์ต๋๋ค.๊ตฌ์กฐ๋ฅผ ๋จ์ํ๊ฒ ์ ๋ฌํ๊ธฐ ์ํ ํํ์ด์๋ค๊ณ ๋ณผ์ ์์๊ฒ ๊ฐ์์.๋ ์ ํํ ํํ ๋ค์ํ๋ฒ ์ง์ด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. ๐ค
- 1
- 1
- 60
Q&A
Link ์ปดํฌ๋ํธ๋ ๊ทธ๋ฌ๋ฉด ์ฌ๋งํ๋ฉด ๋ฌด์กฐ๊ฑด ์ฐ๋ํธ์ด ์ข์๊ฐ์?
์ข์ ์ง๋ฌธ๊ฐ์ฌํฉ๋๋ค. Next.js๋ฅผ ๊ทธ๋ฅ โ์ฐ๋ ๋จ๊ณโ๋ฅผ ๋์ด์์ค์ ๋ก ๋น์ฉ์ ์์ํ๊ธฐ ์์ํ์ ๊ฒ ๊ฐ์์์.๊ฒฐ๋ก ๋ถํฐ ๋งํ๋ฉด,Link๋ ์ฌ๋งํ๋ฉด ์ฐ๋ ๊ฒ ๋ง์ง๋ง, prefetch๊น์ง ๋ฌด์กฐ๊ฑด ์ผ๋ ๊ฑด ์๋๋๋ค.Link์ ํต์ฌ ๊ฐ์น๋ ํด๋ผ์ด์ธํธ ๋ค๋น๊ฒ์ด์ ์ด์์.ํ์ด์ง๋ฅผ ์๋ก๊ณ ์นจํ์ง ์๊ณ ์์ฐ์ค๋ฝ๊ฒ ์ด๋ํ๊ฒ ๋ง๋๋ ๊ฒ.๊ทธ๋์ โํ์ด์ง ์ด๋โ์ด๋ผ๋ฉด ๋ณด๋ค ๊ฐ ๊ธฐ๋ณธ๊ฐ์ ๊ฐ๊น์ต๋๋ค.๋ค๋ง prefetch๋ ์กฐ๊ธ ๋ค๋ฆ ๋๋ค.App Router ๊ธฐ์ค์ผ๋ก๋ ๋จ์ํ HTML์ด ์๋๋ผ๊ทธ ํ์ด์ง์์ ํ์ํ ์๋ฒ ์ปดํฌ๋ํธ ๊ฒฐ๊ณผ์ fetch๊น์ง ํจ๊ป ๋ฏธ๋ฆฌ ๊ฐ์ ธ์ต๋๋ค.๊ทธ๋์๋๋ฉ ํ์ด์ง์์ ๋ฐ์ดํฐ๊ฐ ๋ง์ ๋ด๋ถ ํ์ด์ง๋ฅผ ๋ฌด์ฌ์ฝ prefetch ํ๋ฉด,์์ง ํด๋ฆญํ ์ง๋ ๋ชจ๋ฅด๋ ํ์ด์ง๋ฅผ ์ํด์๋ฒ์ ๋คํธ์ํฌ๊ฐ ๋จผ์ ์ผ์ ํ๊ฒ ๋๋ ๊ตฌ์กฐ๊ฐ ๋ฉ๋๋ค.์ด ๊ฒฝ์ฐ์ ๋ง์์ฃผ์ ๊ฒ์ฒ๋ผ ๋ถ๋ช ํ ๋ ์ด ๋ ์ ์์ด์.๊ทธ๋์ ์ ๋ ์๋์ฒ๋ผ ์ถ์ฒ๋๋ ค์.์ด๋ ์์ฒด๊ฐ ๋ชฉ์ ์ด๋ฉด โ Link ์ฌ์ฉํด๋ฆญ ํ๋ฅ ์ด ๋๊ณ ๊ฐ๋ฒผ์ด ํ์ด์ง๋ฉด โ prefetch ์ ์ง๋๋ฉ โ ๋ฌด๊ฑฐ์ด ํ์ด์ง๋ฉด โ prefetch={false} ์์ํ๊ธฐ ์ด๋ ๊ฒ ์ฐ๋ฉด๋ค๋น๊ฒ์ด์ ์ ๋ถ๋๋ฝ๊ฒ ๊ฐ์ ธ๊ฐ๋ฉด์,๋ฐ์ดํฐ ๋น์ฉ์ ์ฌ์ฉ์๊ฐ ์ ํํ ์ดํ์๋ง ์ง๋ถํ๊ฒ ๋์ด์์.ํ ์ค๋ก ์์ฝํ๋ฉด,Link๋ ๊ธฐ๋ณธ๊ฐ์ด๊ณ , prefetch๋ "ํ์์ ๋ฐ๋ผ" ์ ๋๋ค.์ด๊ฑธ ์ง๋ฌธ์ผ๋ก ๋์ก๋ค๋ ๊ฒ ์์ฒด๊ฐ์ด๋ฏธ Next.js๋ฅผ โ์ด๋ป๊ฒ ์ฐ๋๋โ๋ณด๋คโ์ธ์ ๋น์ฉ์ ์ฐ๋๋โ๋ก ๋ณด๊ณ ์๋ค๋ ๋ป์ด๋ผ, ์ข์ ์ง๋ฌธ์ธ ๊ฒ ๊ฐ์์ :)
- 0
- 2
- 69
Q&A
middleware.ts๊ฐ proxy.ts๋ก ๋ณ๊ฒฝ๋๊ณ ์คํ ์์ ๋ ๋ฐ๋์๋ค๋ค์
๋จผ์ ์ค์ํ ๋ณ๊ฒฝ์ ์ด๋ ๊ฒ ๋ง์ํด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค๊ด๋ จํด์ ๊ฐ์๋ ์ ๋ฐ์ดํธ ํด๋ณด๊ฒ ์ต๋๋ค..! ๐โโ
- 1
- 2
- 155
Q&A
PPR์ ๋ณด๊ณ ์ค๋ผ๊ณ ํ์๋๋ฐ
PPR ์ ํ์ฌ ๊ฐ์์์ ์ ๊ณตํ๋ ์น์ 3์ 29. Partial Pre Rendering ์ด ํด๊ฒฐํ๋ ๋ฌธ์ ์ด PPR ์ ๋ํ ์์์ ๋๋ค..! ์ด๊ฑธ ๋ณด์๋ฉด ๋์ด์ ๐ (์น์ ์์ฃผ๋ก ์ฌํธ์ฑํ๋ค๋ณด๋ ์์๋ฅผ ํท๊ฐ๋ฆฌ๊ฒ ๋ฐฐ์นํ์ ์ํด ๋ถํ๋๋ฆฝ๋๋ค.)๋ํ, VDOM ์ ๊ดํ ์ค๋ช ์ ์๋ง๋ https://www.youtube.com/watch?v=2EbCEluOO9Y ์ด ์์์ธ๊ฒ ๊ฐ์์..!(์ด๊ฑด next.js ๋ผ๊ธฐ๋ณด๋จ react ์ ์ํด์์ด์.. ๋ฐ๋ก ๊ฐ์ ๋ชฉ๋ก์ ํฌํจํ์ง๋ ์์์ด์. ๊ทธ๋ฌ๋ ๋ฐ๋์ ์ ํ๋ธ ์ฑ๋์์ ๋ณด์ค์ ์์๊ฒ ๊ฐ์์.. ๋ถํธ์ ๋๋ ค ์ฃ์กํด์ ๐)
- 1
- 2
- 71
Q&A
๊ฐ์์ ์ธ๊ธ๋ ์์ ์ง๋ฌธ
์๋ ํ์ธ์!๋ง์ํ์ ์๋ฌ ๊ด๋ จ ์์์ ์๋ ์ ๋๋ค ๐https://youtu.be/Afo2f-mO5n8?si=KPYcqWpsvVvbSH39ํจ๊ป ๊ณต๋ถํด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค :)
- 0
- 2
- 63
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
- 69
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
- 150
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
- 86
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
- 77
Q&A
layout ์ปดํฌ๋ํธ ๋ด ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ
๋์ผํ ์๋ฏธ๊ฐ ๋ง์ต๋๋ค.(Page.tsx ์ปดํฌ๋ํธ๋ ๋ง์ฐฌ๊ฐ์ง ์ ๋๋ค.)์ ํํ๊ฒ ์ดํดํ์ ๊ฒ ๊ฐ์์..!๋ค๋ง, ๊ฐ์์์ 'use client' ์ง์์ด๋ฅผ ํ์ฉํด ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฅผ ํตํด ํด๋น ๊ฐ์ ์ ๊ทผํด์ผ ํ๋ค๋ผ๋ ๋ง์ ๋งฅ๋ฝ์ Page.tsx ์ ์ ๊ทผ ๋ฐฉ๋ฒ์ด ์ฐจ์ด์ ์ด ์๋ค๋ ๋ป์ ์๋์ด์.๊ทธ๋ณด๋ค๋ 'layout ์์ ' searchParams ์ ์ ๊ทผํ ์ ์๋ค. ํ์ง๋ง, Page.tsx ์์๋ prop ์ผ๋ก searchParams ๋ฑ์ ๊ฐ์ ์ ๊ทผํ ์ ์์ด์์. ์ด๋ฌํ ์ฐจ์ด์ (๋๋ค ์๋ฒ์ปดํฌ๋ํธ์ง๋ง, Page.tsx ์์๋ searchParams ์ ์ ๊ทผ ๊ฐ๋ฅํ๋ฐ, layout ์์๋ ์ ๊ทผ ๋ถ๊ฐ)์ ๋ํด ๋ง์๋๋ฆฌ๊ณ ์ถ์์ด์. ์ง๋ฌธ์์ ๋ง์์ฃผ์ ๊ฒ์ฒ๋ผ 'use client'๋ฅผ ์ฌ์ฉํด์ ์ ๊ทผํ๋ ๋ฐฉ์์ ๋๋ค ๊ฐ๋ฅํ๊ธฐ์ ์ฐจ์ด๊ฐ ์์ด์์. ์ ์ดํดํ์ ๊ฒ ๊ฐ์์ ๐คํน์ ์ถ๊ฐ๋ก ๊ถ๊ธํ์ ์ ์์ผ์๋ฉด ํธํ๊ฒ ์๋ ค์ฃผ์ ์.
- 0
- 2
- 77




