sucoding
@sucoding
Students
5,066
Reviews
296
Course Rating
4.9
์์ฝ๋ฉ์ ์จ๋ผ์ธ๊ณผ ์คํ๋ผ์ธ์ ๋ณํํ๋ฉด์
์ฝ๋ฉ์ ๊ฐ๋ฅด์น๋ ํ๋์ ํ๊ณ ์์ต๋๋ค.
๋ค๋
๊ฐ์ ์คํ๋ผ์ธ ๊ฐ์ ๊ฒฝํ์ ๋ฐํ์ผ๋ก,
๋ ๋ง์ ์ฌ๋๋ค์ด ์ฝ๋ฉ์ ์ฝ๊ณ ์ฌ๋ฏธ์๊ฒ ๋ฐฐ์ธ ์ ์๋๋ก
๋งค์ผ ๊ณ ๋ฏผํ๊ณ , ๋์์์ด ๋
ธ๋ ฅํ๊ณ ์์ต๋๋ค.
ํ์ฌ๊น์ง ๋ค์๊ณผ ๊ฐ์ 4๊ถ์ ์ฑ
์ ์ถํํ๋ฉฐ
ํ๋ฐํธ์๋ ๊ฐ์ ๋ถ์ผ๋ฅผ ์ ๋ํ๊ณ ์์ต๋๋ค:
๋ํ, ์ ํ๋ธ ์ฑ๋์ ํตํด ๋ค์ํ ๋ฌด๋ฃ ๊ฐ์๋ ์ ๊ณตํ๊ณ ์์ต๋๋ค.
๐ ์ง๊ธ ๋ฐ๋ก ๋ฐฉ๋ฌธํด ๋ณด์ธ์
[์ ํ๋ธ ์ฑ๋ ๋งํฌ]
๋ค์ํ ํ ์ธ ์์ ๋ํ ๊ณต์ ํํ์ด์ง์์ ๋น ๋ฅด๊ฒ ํ์ธํ์ค ์ ์์ต๋๋ค.
๐ ์ง๊ธ ๋ฐ๋ก ๋ฐฉ๋ฌธํด ๋ณด์ธ์
[๊ณต์ ํํ์ด์ง ๋งํฌ]
Courses
Reviews
- Mastering Next.js 16+ with TypeScript: From Basics to Modern Architecture
- Mastering Next.js 16+ with TypeScript: From Basics to Modern Architecture
- Learning React.js with TypeScript: From Basics to the Latest Technologies Perfectly
- Learning the essentials of HTML5
- Learning React.js with TypeScript: From Basics to the Latest Technologies Perfectly
Posts
Q&A
์ฌํ๊ฐค๋ฌ๋ฆฌ ๋ง๋ค๊ธฐ์์
์๋ ํ์ธ์!์ธํ๋ฐ AI ์ธํด ๋ต๋ณ์ด ์ ํํ๋ค์.์ง๋ฌธํด์ฃผ์ ๋ด์ฉ์ ์ธํ๋ฐ AI ๋ต๋ณ ์ฐธ๊ณ ํด๋ณด์๋ฉด ๋์์ด ๋ ๋ฏํฉ๋๋ค.์ถ๊ฐ๋ก ๊ถ๊ธํ ๊ฒ ์์ผ์๋ฉด ๋ค์ ๋ฌผ์ด๋ด์ฃผ์ธ์!๊ฐ์ฌํฉ๋๋ค.
- 0
- 2
- 18
Q&A
10-6 ์ค์ต ํ ์ ์์ต๋๋ค..
์๋ ํ์ธ์![์น์ 1.์ค๋นํ๊ธฐ > 2. ์์ค ์ฝ๋ ๋ค์ด๋ก๋ ๋ฐ ํ์ฉ๋ฒ] ๊ฐ์์ ์ต์ ์ฝ๋ ๋ค์ ์ ๋ก๋ํด๋จ์ต๋๋ค.์์ค ์ฝ๋๋ฅผ ๋ค์ ๋ค์ด๋ก๋ ๋ฐ์ผ์๋ฉด ๋ฉ๋๋ค!๋ถํธ์ ๋๋ ค์ ์ฃ์กํฉ๋๋ค!
- 0
- 1
- 41
Q&A
๊ทธ๋ฆผ ์์ ๋ ๋ฐ๋ก ์ ๊ณต์ด ์๋๋์?
์๋ ํ์ธ์.๋ง์ํด์ฃผ์ ๋ถ๋ถ์ ์ฐธ๊ณ ํ๊ฒ ์ต๋๋ค. ๐๊ทธ๋ฆผ ์๋ฃ๋ ์ ๊ณต๋ ์์ ์ฝ๋์ SECTION03/03-03/.excalidraw ํ์ผ์ ํฌํจ๋์ด ์์ต๋๋ค.VS Code์์ excalidraw ํ์ฅ ํ๋ก๊ทธ๋จ์ ์ค์นํ์ ํ, ํด๋น ํ์ผ์ ๋๋ธํด๋ฆญํด ์ด์ด๋ณด์๋ฉด ๋ด์ฉ์ ํ์ธํ์ค ์ ์์ต๋๋ค.(์ฌ์ง)๊ฐ์ฌํฉ๋๋ค.
- 0
- 1
- 48
Q&A
useOptimistic ์ค์ -1 useState
์๋ ํ์ธ์.ํด๊ฒฐํ์ จ๋ค๋ ๋คํ์ ๋๋ค. ๐
- 0
- 2
- 40
Q&A
cacheLife์ ๋ํ ์ง๋ฌธ์ ๋๋ค
์๋ ํ์ธ์.๋ง์ํด์ฃผ์ ๊ฒ์ฒ๋ผ 3์ 3์ผ์ ์คํ์ด ๋ณ๊ฒฝ๋์ด,ํ์ฌ default ํ๋ฆฌ์ ์ expire ๊ฐ์ never๋ก ์ค์ ๋์ด ์์ต๋๋ค.๋ฐ๋ผ์ ์ดํดํ์ ๋ฐ์ ๊ฐ์ด, ํด๋น ๊ฐ์ ๋ง๋ฃ๋์ง ์์ผ๋ฉฐ revalidate์ ์ํด์๋ง ์ฃผ๊ธฐ์ ์ผ๋ก ๊ฐฑ์ ๋๋ค๊ณ ๋ณด์๋ฉด ๋ฉ๋๋ค.
- 0
- 1
- 43
Q&A
margin, padding ์ฌ์ฉ ์๊ธฐ
์๋ ํ์ธ์.์ฌํ ๋๋ฉ ํ์ด์ง๋ฅผ ๊ตฌํํ๋ ๊ณผ์ ์์ ๋๋ผ์ ๊ฒ์ฒ๋ผ margin๊ณผ padding์ ๊ฒ๋ณด๊ธฐ ๊ฒฐ๊ณผ๊ฐ ๋น์ทํด ๋ณด์ผ ๋๊ฐ ๋ง์ง๋ง, ์ค์ ์ญํ ๊ณผ ์ฌ์ฉ ๋ชฉ์ ์ ๋ถ๋ช ํ ๋ค๋ฆ ๋๋ค. ์ด ๋์ ์ฐจ์ด๋ฅผ ์ดํดํ๋ฉด ์ธ์ ์ด๋ค ์์ฑ์ ์จ์ผ ํ ์ง ์์ฐ์ค๋ฝ๊ฒ ํ๋จํ ์ ์์ต๋๋ค.์ฐ์ h1๊ณผ h2 ์ฌ์ด ๊ฐ๊ฒฉ์ ๋ง๋ค ๋ margin-bottom: 40px๊ณผ padding-bottom: 40px์ด ๋น์ทํ๊ฒ ๋ณด์ด๋ ์ด์ ๋, ๋ ๊ฒฝ์ฐ ๋ชจ๋ ๊ฒฐ๊ณผ์ ์ผ๋ก ์๋ ์์(h2)๋ฅผ ์๋๋ก ๋ฐ์ด๋ด๊ธฐ ๋๋ฌธ์ ๋๋ค. ํ์ง๋ง ์๋ฏธ์ ์ผ๋ก๋ ์ฐจ์ด๊ฐ ์์ต๋๋ค. margin์ ์์์ ๋ฐ๊นฅ ์ฌ๋ฐฑ์ ์กฐ์ ํ์ฌ ๋ค๋ฅธ ์์์์ ๊ฑฐ๋ฆฌ๋ฅผ ๋ง๋๋ ์์ฑ์ด๊ธฐ ๋๋ฌธ์, ์ ๋ชฉ๊ณผ ์ ๋ชฉ ์ฌ์ด์ฒ๋ผ ์์ ๊ฐ ๊ฐ๊ฒฉ์ ๋ง๋ค ๋๋ margin์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ฌ๋ฐ๋ฅธ ๋ฐฉ์์ ๋๋ค. ๋ฐ๋ฉด padding์ ์์ ๋ด๋ถ์ ์ฌ๋ฐฑ์ ๋๋ฆฌ๋ ๊ฒ์ผ๋ก, ์ฝํ ์ธ ์ ๊ฒฝ๊ณ ์ฌ์ด์ ๊ณต๊ฐ์ ํ๋ณดํ ๋ ์ฌ์ฉํ๋ ์์ฑ์ ๋๋ค.๋ค์์ผ๋ก margin-top: 380px์ด ๊ธฐ๋์ ๋ค๋ฅด๊ฒ ๋์ํ๊ณ padding-top์ ์ ์์ ์ผ๋ก ๋ณด์๋ ์ด์ ๋, CSS์ margin collapse(๋ง์ง ๋ณํฉ) ํ์ ๋๋ฌธ์ ๋๋ค. ์ด๋ ๋ถ๋ชจ ์์์ ์์ ์์์ ์์ชฝ ๋๋ ์๋์ชฝ margin์ด ๊ฒน์น ๋ ํ๋๋ก ํฉ์ณ์ง๋ ๋์์ผ๋ก, ํนํ ๋ถ๋ชจ์ padding์ด๋ border๊ฐ ์์ ๊ฒฝ์ฐ ์์์ margin-top์ด ๋ถ๋ชจ ๋ฐ๊นฅ์ผ๋ก ํ์ด๋๊ฐ ๋ฒ๋ฆด ์ ์์ต๋๋ค. ์ด ๋๋ฌธ์ ์ค์ ๋ก๋ ์์๊ฐ ๋ด๋ ค๊ฐ์ง ์์ ๊ฒ์ฒ๋ผ ๋ณด์ด๋ ์ํฉ์ด ๋ฐ์ํฉ๋๋ค. ๋ฐ๋ฉด padding์ ํญ์ ์์ ๋ด๋ถ์์ ์ฒ๋ฆฌ๋๊ธฐ ๋๋ฌธ์ ์ด๋ฌํ ์ํฅ์ ๋ฐ์ง ์๊ณ ์๋ํ ๋๋ก ๋์ํฉ๋๋ค.๊ฒฐ๋ก ์ ์ผ๋ก ๊ธฐ์ค์ ์ ๋ฆฌํ๋ฉด, ์์์ ์์ ์ฌ์ด์ ๊ฐ๊ฒฉ์ ์กฐ์ ํ ๋๋ margin์ ์ฌ์ฉํ๊ณ , ์์ ๋ด๋ถ์ ๊ณต๊ฐ์ ์กฐ์ ํ๊ฑฐ๋ ์ฝํ ์ธ ์ ๊ฒฝ๊ณ ์ฌ์ด ์ฌ์ ๋ฅผ ์ค ๋๋ padding์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ ์ ํฉ๋๋ค. ๋ค๋ง margin-top์ด๋ margin-bottom์ด ์์๊ณผ ๋ค๋ฅด๊ฒ ๋์ํ ๊ฒฝ์ฐ์๋ ๋ฒ๊ทธ๋ผ๊ธฐ๋ณด๋ค margin collapse ํ์์ผ ๊ฐ๋ฅ์ฑ์ด ํฌ๋ฏ๋ก, ๋ถ๋ชจ ์์์ padding์ ์ฃผ๊ฑฐ๋ display: flex์ ๊ฐ์ ๋ ์ด์์ ๋ฐฉ์์ ์ฌ์ฉํ๋ ๋ฑ ๊ตฌ์กฐ์ ์ธ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ข์ต๋๋ค.์ด ๊ธฐ์ค์ ์ตํ ๋์๋ฉด ๋จ์ํ โ์ด๋ ์ชฝ์ด ๋ ์ ๋จนํ๋๊ฐโ๊ฐ ์๋๋ผ, โ์๋ฏธ์ ๋ง๋ ์์ฑโ์ ์ ํํ๋ ๋ฐฉํฅ์ผ๋ก ์ฝ๋๋ฅผ ์์ฑํ ์ ์๊ฒ ๋ฉ๋๋ค.
- 0
- 2
- 32
Q&A
(์ ๋ณด) ์ฟ ํค๋ฅผ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ ํ๊ฒฝ์์ ์ง์ ์ฝ์ ํ์ ๋ ๋์ค์ง ์๋ ํ์
์๋ ํ์ธ์ ๐์ฝ๋์ ์ธ ์ฒ๋ฆฌ๋ฅผ ํตํด์ ์ง์ ์ฌ์ผ์ ๋๊ฒฐ๊ณผ๋ ๊ฐ์ต๋๋ค.์๋์๋ ๋ฐฉ๋ฒ์ผ๋ก ์งํํ์๋ฉด ๋๊ฒ ์ต๋๋ค.๊ฐ์ฌํฉ๋๋ค!
- 0
- 2
- 46
Q&A
discord ์ด๋์ฅ ๊ฐฑ์ ์ด ํ์ํ๊ฑฐ๊ฐ์ต๋๋ค.
์๋ ํ์ธ์. ์ ๊ฐ ์ต์ด ๊ณต์ ๋๋ฆฐ ๋งํฌ๊ฐ 7์ผ ์ ํ์ด ์๋ค๋ ๊ฒ์ ๋ช ์ผ์ ์ ์๊ฒ ๋์ด์๋ชจ๋ ๊ฐ์์ ์๋ก์ด ๋งํฌ๋ฅผ ๋ค์ ์ฌ๋ ค ๋ ์ํ์ ๋๋ค.https://discord.gg/2ByaMfUumy์ ๋งํฌ๋ก๋ ์ ์์ด ๋ถ๊ฐ๋ฅํ์ค๊น์?ํ์ธ ๋ถํ๋๋ฆฌ๊ฒ ์ต๋๋ค.๊ฐ์ฌํฉ๋๋ค!
- 0
- 1
- 46
Q&A
๋์ค์ฝ๋ ์ฑ๋ ์ด๋ ๋งํฌ
์๋ ํ์ธ์!๋์ค์ฝ๋ ์ด์์ ์ฒ์์ด๋ผ์ ์ด๋ ๋งํฌ๊ฐ 7์ผ ์ ํจ๊ธฐ๊ฐ์ด ์๋ ๊ฒ์ ๋ชฐ๋๋ค์ ใ ๋ค์ ์์ฑํด์ ๊ณต์ ๋๋ฆฝ๋๋ค.https://discord.gg/2ByaMfUumy๊ฐ์ฌํฉ๋๋ค!
- 0
- 1
- 58
Q&A
revalidatePath ์ง๋ฌธ ์์ต๋๋ค.
์๋ ํ์ธ์.์ด ๋ด์ฉ์ ์ดํดํ๋ ค๋ฉด ๋จผ์ ๋ช ๊ฐ์ง ๋ฐฐ๊ฒฝ ์ง์์ด ํ์ํฉ๋๋ค.์ฐ์ revalidatePath()๋ ๋ฐ์ดํฐ๋ฅผ ์ฆ์ ๋ฌดํจํํ๋ ํจ์๊ฐ ์๋๋๋ค. ํด๋น ๊ฒฝ๋ก๋ ๋ค์ ๋ฐฉ๋ฌธ ์์ ์ ์ฌ๊ฒ์ฆ๋๋๋ก ์ค์ ํ๋ ํจ์์ ๋๋ค.๋ค๋ง, ์๋ฒ ์ก์ (Server Action) ์์์ revalidatePath()๋ฅผ ํธ์ถํ๋ฉด, ์๋ฒ ์ก์ ์ด ๋ด๋ถ์ ์ผ๋ก router.refresh()์ ์ ์ฌํ ๋์์ ์ํํ๊ธฐ ๋๋ฌธ์ ๊ฐ์ ํ์ด์ง์ ๋จธ๋ฌผ๋ฌ ์์ด๋ ๋ฐ์ดํฐ๊ฐ ์ฆ์ ๋ณ๊ฒฝ๋ ๊ฒ์ฒ๋ผ ๋ณด์ผ ์ ์์ต๋๋ค. ์ด ์ ์ ๋จผ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.revalidatePath ํจ์๋ ๋ ๊ฐ์ ๋งค๊ฐ๋ณ์๋ฅผ ๋ฐ์ต๋๋ค.์ฒซ ๋ฒ์งธ๋ ๊ฒฝ๋ก(path)์ด๊ณ , ๋ ๋ฒ์งธ๋ ๋ฌดํจํ ํ์ (type)์ ๋๋ค.๋ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๊ฐ "layout"์ธ ๊ฒฝ์ฐ, ์ฒซ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ก ์ ๋ฌํ ๊ฒฝ๋ก์์ ์ฌ์ฉ ์ค์ธ layout.tsx๋ฅผ ์ฌ์ฉํ๋ ๋ชจ๋ ๊ฒฝ๋ก๊ฐ ํจ๊ป ๋ฌดํจํ๋ฉ๋๋ค. ๋ฐ๋ผ์ ํด๋น ๋ ์ด์์์ ๊ณต์ ํ๋ ํ์ด์ง๋ค์ ๋ฐ์ดํฐ๊ฐ ์ผ๊ด์ ์ผ๋ก ๊ฐฑ์ ๋ฉ๋๋ค.๋ฐ๋ฉด, ๋ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๊ฐ "page"์ธ ๊ฒฝ์ฐ์๋ ์ฒซ ๋ฒ์งธ ๋งค๊ฐ๋ณ์์ ํด๋นํ๋ ๊ฒฝ๋ก์ page.tsx์ ๊ทธ ํ์ด์ง๊ฐ ์ฌ์ฉํ๋ layout.tsx๊ฐ ๋ฌดํจํ ๋์์ด ๋ฉ๋๋ค.์๋ฅผ ๋ค์ด, /about ๊ฒฝ๋ก์์ revalidatePath("/about", "page")๋ฅผ ํธ์ถํ๋ฉด /about/page.tsx์ ํด๋น ํ์ด์ง๊ฐ ์ฌ์ฉํ๋ /about/layout.tsx๊ฐ ๋ฌดํจํ๋ฉ๋๋ค. ์๋ฒ ์ก์ ์์ ํธ์ถํ ๊ฒฝ์ฐ์๋ ์ฆ์ ๋ฐ์๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๊ฒ ๋ฉ๋๋ค.ํ์ง๋ง /about/detail ๊ฒฝ๋ก์์ revalidatePath("/about", "page")๋ฅผ ํธ์ถํ๋ฉด ์ํฉ์ด ๋ฌ๋ผ์ง๋๋ค. ํ์ฌ ์์นํ ๊ฒฝ๋ก์ ์ฒซ ๋ฒ์งธ ์ธ์๋ก ์ ๋ฌํ ๊ฒฝ๋ก๊ฐ ๋ค๋ฅด๊ธฐ ๋๋ฌธ์, ์ฆ์ ๋ฌดํจํ๊ฐ ์ผ์ด๋์ง ์๊ณ ๋ค์์ /about์ ๋ฐฉ๋ฌธํ ๋ ์ฌ๊ฒ์ฆ์ด ์ํ๋ฉ๋๋ค. ๋ฐ๋ผ์ /about/detail์์๋ ๋ณํ๊ฐ ๋ณด์ด์ง ์์ง๋ง, ์ดํ /about์ผ๋ก ์ด๋ํ๋ฉด /about/page.tsx์ ๋ฐ์ดํฐ๊ฐ ์๋ก ๊ฐฑ์ ๋ฉ๋๋ค.์ฌ๊ธฐ์ ํ ๊ฐ์ง ๋ ์ดํดํด์ผ ํ ๋ถ๋ถ์ ๋ผ์ฐํฐ ์บ์(router cache)์ ๋๋ค./about/page.tsx์ /about/detail/page.tsx๋ ๋ชจ๋ ๊ณตํต์ผ๋ก /about/layout.tsx๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด ๋ ์ด์์ ํ์ผ์ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ผ์ฐํฐ ์บ์์ ์ํด ์ฌ์ฌ์ฉ๋ฉ๋๋ค. ์ฆ, ํ ๋ฒ ๋ ๋๋ง๋๋ฉด ํน๋ณํ ๊ฒฝ์ฐ(์: router.refresh() ํธ์ถ)๊ฐ ์๋๋ฉด ๋ค์ ๋ ๋๋ง๋์ง ์์ต๋๋ค.๋ฐ๋ผ์ /about ๊ฒฝ๋ก์์ ๋ฌดํจํ๋ฅผ ์ํํ๋ฉด ์๋ฒ ์ก์ ์ด router.refresh()์ ๊ฐ์ ํจ๊ณผ๋ฅผ ๋ด๋ฏ๋ก about/layout.tsx๋ ํจ๊ป ์ฌ๋ ๋๋ง๋ฉ๋๋ค.๊ทธ๋ฌ๋ /about/detail์์ /about ๊ฒฝ๋ก๋ฅผ ๋ฌดํจํํ ๊ฒฝ์ฐ์๋ ์ฆ์ ์๋ฌด ์ผ๋ ์ผ์ด๋์ง ์๋ค๊ฐ, ์ดํ /about์ผ๋ก ์ด๋ํ๋ฉด ๊ทธ๋ ์ฌ๊ฒ์ฆ์ด ์ด๋ฃจ์ด์ง๋๋ค. ๋ค๋ง ์ด๋๋ layout.tsx๋ ๋ผ์ฐํฐ ์บ์์ ์ํด ์ฌ์ฌ์ฉ๋๊ธฐ ๋๋ฌธ์ ๊ฐ์ด ๋ฐ๋ก ๋ณ๊ฒฝ๋์ง ์์ ์ ์์ต๋๋ค.ํ์ง๋ง ๋ธ๋ผ์ฐ์ ๋ฅผ ์๋ก๊ณ ์นจํ๋ฉด ๋ผ์ฐํฐ ์บ์๊ฐ ์ด๊ธฐํ๋๋ฏ๋ก, ๊ทธ ์์ ์๋ about/layout.tsx ์ญ์ ํจ๊ป ๋ฌดํจํ๋์ด ๋ฐ์ดํฐ๊ฐ ๊ฐฑ์ ๋๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.์ด์ฒ๋ผ revalidatePath์ ๋์์ ์๋ฒ ์ก์ ์ฌ๋ถ, ํ์ฌ ๊ฒฝ๋ก, ๋ฌดํจํ ํ์ , ๊ทธ๋ฆฌ๊ณ ๋ผ์ฐํฐ ์บ์์ ๋์ ๋ฐฉ์์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ๋ณด์ผ ์ ์์ต๋๋ค.๋ ๊ถ๊ธํ ์ ์ด ์๋ค๋ฉด ์ธ์ ๋ ์ง ์ง๋ฌธํด์ฃผ์ธ์.
- 0
- 2
- 53





