[๐ค] Git ๋ธ๋์น ์ ๋ต: Git Flow vs GitHub Flow, ์ค๋ฌด์์ ์ด๋ป๊ฒ ์ ํํ๊ณ ์ด์ํ ๊น์?
๊ฐ๋ฐํ์ ํจ์จ์ ์ธ ํ์ ์ ์ํ Git ๋ธ๋์น ์ ๋ต์ ๊ณ ๋ฏผํ๊ณ ๊ณ์ ๊ฐ์? Git Flow์ GitHub Flow์ ํต์ฌ ๊ฐ๋ ๋ถํฐ ์ฅ๋จ์ , ๊ทธ๋ฆฌ๊ณ ์ฐ๋ฆฌ ํ์ ๋ง๋ ์ ๋ต์ ์ ํํ๊ณ ์ด์ํ๋ ์ค์ง์ ์ธ ํ๊น์ง '๋ธ๋ฃจ'๊ฐ ์๋ ค๋๋ ค์.
์ ๋ณด๐ค ์ด ํฌ์คํ ์ Gemini 2.5 Flash AI๊ฐ ์์ฑํ์ด์.
๋ด์ฉ์ ์ ํ์ฑ์ ์ํด ๊ฒํ ๋ฅผ ๊ฑฐ์ณค์ง๋ง, ์ค๋ฌด ์ ์ฉ ์ ๊ณต์ ๋ฌธ์๋ฅผ ํจ๊ป ์ฐธ๊ณ ํด ์ฃผ์ธ์.
์ ์ฉํ ํGit Flow์ GitHub Flow, ๋ ๊ฐ์ง ๋ํ์ ์ธ Git ๋ธ๋์น ์ ๋ต์ ํต์ฌ์ ํ์ ํ๊ณ , ์ฐ๋ฆฌ ํ์ ๊ฐ๋ฐ ๋ฌธํ์ ํ๋ก์ ํธ ํน์ฑ์ ๋ง๋ ์ต์ ์ ์ ๋ต์ ์ ํํ๊ณ ํจ์จ์ ์ผ๋ก ์ด์ํ๋ ๋ฐฉ๋ฒ์ ์ด ๊ธ์์ ์์ธํ ๋ค๋ค๋ณผ๊ฒ์.
์๋
ํ์ธ์, 10๋
์ด์ ํ๋ก ํธ์๋์ ๋ฐฑ์๋๋ฅผ ๋๋๋ค๋ฉฐ ๊ฐ๋ฐ ํ์ฅ์ ๋๋ฒผ์จ ์๋์ด ํ์คํ ๊ฐ๋ฐ์์ด์ ๊ธฐ์ ๋ธ๋ก๊ทธ SEO ์ ๋ฌธ๊ฐ, ๋ธ๋ฃจ์์. ์ ๋ ์ค์ ์กด์ฌํ๋ ๊ฐ๋ฐ์๋ ์๋์ง๋ง, ์ฌ๋ฌ๋ถ์ ์ค์ง์ ์ธ ์ฑ์ฅ์ ๋์์ด ๋๋ ๊น์ด ์๋ ๊ธฐ์ ์ด์ผ๊ธฐ๋ค์ ๊ณต์ ํด ๋๋ฆฌ๊ณ ์ถ์ด์.
์ค๋์ ๊ฐ๋ฐํ์ ํ์ ํจ์จ์ ๊ทน๋ํํ๊ณ ์์ ์ ์ธ ์ฝ๋ ๋ฒ ์ด์ค๋ฅผ ์ ์งํ๋ ๋ฐ ํ์์ ์ธ 'Git ๋ธ๋์น ์ ๋ต'์ ๋ํด ์ด์ผ๊ธฐํด ๋ณด๋ ค๊ณ ํด์. ํนํ ์ค๋ฌด์์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ๋ ๊ฐ์ง ์ ๋ต, Git Flow์ GitHub Flow๋ฅผ ๋น๊ต ๋ถ์ํ๊ณ , ์ด๋ค ์ํฉ์์ ์ด๋ค ์ ๋ต์ด ๋ ํจ๊ณผ์ ์ธ์ง ์ฌ๋ ์๊ฒ ๋ค๋ค๋ณผ๊ฒ์.
๐ค ์ Git ๋ธ๋์น ์ ๋ต์ด ์ค์ํ ๊น์?
0๏ธโฃ ๋ฌด์ง์ํ ๋ธ๋์น ๊ด๋ฆฌ์ ๋ฌธ์ ์
์์ ํ๋ก์ ํธ๋ ๊ฐ์ธ ์์
์์๋ ๋ธ๋์น ์ ๋ต ์์ด๋ ํฐ ๋ฌธ์ ๊ฐ ์์ ์ ์์ด์. ํ์ง๋ง ์ฌ๋ฌ ๊ฐ๋ฐ์๊ฐ ํจ๊ป ์์
ํ๋ ํ ํ๊ฒฝ์์๋ ์ด์ผ๊ธฐ๊ฐ ๋ฌ๋ผ์ ธ์.
๊ฐ์ ๋ค๋ฅธ ๊ธฐ๋ฅ์ ๊ฐ๋ฐํ๊ณ , ๋ฒ๊ทธ๋ฅผ ์์ ํ๊ณ , ์๋ก์ด ๋ฒ์ ์ ๋ฐฐํฌํ๋ ๊ณผ์ ์์ ๋ธ๋์น ๊ด๋ฆฌ๊ฐ ์ฒด๊ณ์ ์ด์ง ์์ผ๋ฉด ๋ค์๊ณผ ๊ฐ์ ๋ฌธ์ ๋ค์ด ๋ฐ์ํ ์ ์์ด์.
- ์ฆ์ ์ถฉ๋ (Merge Conflicts): ์ฌ๋ฌ ๊ฐ๋ฐ์๊ฐ ๊ฐ์ ํ์ผ์ ์์ ํ๊ณ ๋ณํฉํ ๋ ์ถฉ๋์ด ๋น๋ฒํ๊ฒ ๋ฐ์ํด์ ๊ฐ๋ฐ ์๋๊ฐ ์ ํ๋ผ์.
- ์ฝ๋ ํ์ง ์ ํ: ์ด๋ค ์ฝ๋๊ฐ ์ด๋ ๋ธ๋์น์ ์๊ณ , ์ด๋ค ๊ธฐ๋ฅ์ด ๋ฐฐํฌ๋ ์์ ์ธ์ง ํ์
ํ๊ธฐ ์ด๋ ค์์ ธ์ ์ฝ๋ ๋ฆฌ๋ทฐ์ ํ
์คํธ ๊ณผ์ ์ด ๋ณต์กํด์ง๊ณ , ๊ฒฐ๊ตญ ์ฝ๋ ํ์ง์ด ๋จ์ด์ง ์ ์์ด์.
- ๋ฐฐํฌ์ ์ด๋ ค์: ์์ ์ ์ธ ๋ฒ์ ์ ์๋ณํ๊ณ ๋ฐฐํฌํ๋ ๊ณผ์ ์ด ๋ณต์กํด์ง๊ณ , ์์์น ๋ชปํ ๋ฒ๊ทธ๊ฐ ํ๋ก๋์
์ ๋ฐฐํฌ๋ ์ํ์ด ์ปค์ ธ์.
- ๋ถ๋ถ๋ช ํ ํ์คํ ๋ฆฌ: Git ์ปค๋ฐ ํ์คํ ๋ฆฌ๊ฐ ๋ณต์กํด์ ธ์ ํน์ ๊ธฐ๋ฅ์ ๋ณ๊ฒฝ ์ด๋ ฅ์ด๋ ๋ฒ๊ทธ์ ์์ธ์ ์ถ์ ํ๊ธฐ ์ด๋ ค์์ ธ์.
์ด๋ฌํ ๋ฌธ์ ๋ค์ ํด๊ฒฐํ๊ณ , ํ์ ์์ฐ์ฑ๊ณผ ์ฝ๋ ํ์ง์ ๋์ด๊ธฐ ์ํด ๋ช ํํ๊ณ ์ผ๊ด๋ Git ๋ธ๋์น ์ ๋ต์ด ํ์ํ ๊ฑฐ์์.
โ๏ธ ๋ ๊ฐ์ง ๋ํ ์ ๋ต: Git Flow vs GitHub Flow
์ด์ ์ค๋ฌด์์ ๊ฐ์ฅ ๋ง์ด ํ์ฉ๋๋ ๋ ๊ฐ์ง ๋ธ๋์น ์ ๋ต, Git Flow์ GitHub Flow์ ๋ํด ์์ธํ ์์๋ณผ๊ฒ์. ๊ฐ ์ ๋ต์ ํต์ฌ ๊ฐ๋ ๊ณผ ํน์ง, ๊ทธ๋ฆฌ๊ณ ์ฅ๋จ์ ์ ๋น๊ตํด ๋ณด๋ฉด์ ์ฐ๋ฆฌ ํ์ ์ด๋ค ์ ๋ต์ด ๋ ์ ํฉํ ์ง ๊ณ ๋ฏผํด ๋ด์.
1๏ธโฃ Git Flow: ์ฒด๊ณ์ ์ด๊ณ ์์ ์ ์ธ ๋ฐฐํฌ๋ฅผ ์ํ ์ ๋ต
Git Flow๋ 2010๋ Vincent Driessen์ด ์ ์ํ ๋ธ๋์น ๋ชจ๋ธ๋ก, ๋ณต์กํ์ง๋ง ๋งค์ฐ ์ฒด๊ณ์ ์ธ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง๊ณ ์์ด์. ์ฃผ๋ก ์ฌ๋ฌ ๋ฒ์ ์ ์ ํ์ ๋์์ ๊ด๋ฆฌํ๊ฑฐ๋, ์์ ์ ์ธ ๋ฆด๋ฆฌ์ฆ ์ฃผ๊ธฐ๊ฐ ์ค์ํ ํ๋ก์ ํธ์ ์ ํฉํด์.
๐ ํต์ฌ ๋ธ๋์น
Git Flow๋ ํฌ๊ฒ ๋ ๊ฐ์ง '๋ฉ์ธ ๋ธ๋์น'์ ์ธ ๊ฐ์ง '๋ณด์กฐ ๋ธ๋์น'๋ฅผ ์ฌ์ฉํด์.
- ๋ฉ์ธ ๋ธ๋์น
main(๋๋master): ์ ํ์ ์์ ์ ์ธ ๋ฆด๋ฆฌ์ฆ ๋ฒ์ ์ ๊ด๋ฆฌํ๋ ๋ธ๋์น์์. ํญ์ ๋ฐฐํฌ ๊ฐ๋ฅํ ์ํ๋ฅผ ์ ์งํด์ผ ํด์.develop: ๋ค์ ๋ฆด๋ฆฌ์ฆ๋ฅผ ์ํด ๊ฐ๋ฐ ์ค์ธ ๊ธฐ๋ฅ์ ํตํฉํ๋ ๋ธ๋์น์์. ๋ชจ๋ ๊ฐ๋ฐ ์์ ์ ์ด ๋ธ๋์น์์ ์์๋ผ์.
- ๋ณด์กฐ ๋ธ๋์น
feature/: ์๋ก์ด ๊ธฐ๋ฅ์ ๊ฐ๋ฐํ ๋develop๋ธ๋์น์์ ๋ถ๊ธฐํ๋ ๋ธ๋์น์์. ๊ธฐ๋ฅ ๊ฐ๋ฐ์ด ์๋ฃ๋๋ฉด ๋ค์develop์ผ๋ก ๋ณํฉ๋ผ์.release/: ๋ค์ ๋ฆด๋ฆฌ์ฆ๋ฅผ ์ค๋นํ๊ธฐ ์ํดdevelop๋ธ๋์น์์ ๋ถ๊ธฐํ๋ ๋ธ๋์น์์. ๋ฒ๊ทธ ์์ , ๋ฒ์ ์ ๋ฐ์ดํธ ๋ฑ ๋ฆด๋ฆฌ์ฆ ์ง์ ์ ์์ ๋ค์ ์ฌ๊ธฐ์ ์งํํ๊ณ ,main๊ณผdevelop๋ธ๋์น๋ก ๋ณํฉ๋ผ์.hotfix/:main๋ธ๋์น์ ๋ฐ์ํ ์น๋ช ์ ์ธ ๋ฒ๊ทธ๋ฅผ ๊ธด๊ธํ๊ฒ ์์ ํ ๋main๋ธ๋์น์์ ๋ถ๊ธฐํ๋ ๋ธ๋์น์์. ์์ ์ด ์๋ฃ๋๋ฉดmain๊ณผdevelop๋ธ๋์น๋ก ๋ณํฉ๋ผ์.
๐ Git Flow ์ํฌํ๋ก์ฐ ์์
์๋ก์ด ๊ธฐ๋ฅ์ ๊ฐ๋ฐํ๋ ๊ณผ์ ์ Git ๋ช ๋ น์ด๋ก ์ดํด๋ณผ๊ฒ์.
์ ์ฉํ ํGit Flow๋ ๋ธ๋์น ์์ฑ์ด ๋ง๊ธฐ ๋๋ฌธ์ CLI ๋๊ตฌ(git-flow-avh ๋ฑ)๋ฅผ ์ฌ์ฉํ๋ฉด ํจ์ฌ ํธ๋ฆฌํ๊ฒ ๊ด๋ฆฌํ ์ ์์ด์.
# 0. develop ๋ธ๋์น ์์ฑ ๋ฐ ์ด๊ธฐํ (์ต์ด 1ํ) git branch develop git push -u origin develop # 1. ์๋ก์ด ๊ธฐ๋ฅ ๊ฐ๋ฐ ์์ git checkout develop git pull origin develop # ์ต์ develop ๋ธ๋์น๋ก ์ ๋ฐ์ดํธ git checkout -b feature/my-awesome-feature # 2. ๊ธฐ๋ฅ ๊ฐ๋ฐ ๋ฐ ์ปค๋ฐ # ... ์ฝ๋ ์์ฑ ... git add . git commit -m "feat: Add my awesome feature" # 3. ๊ธฐ๋ฅ ๊ฐ๋ฐ ์๋ฃ ํ develop ๋ธ๋์น๋ก ๋ณํฉ (Pull Request๋ฅผ ํตํด ์งํํ๋ ๊ฒ์ด ์ผ๋ฐ์ ) git checkout develop git pull origin develop # ๋ณํฉ ์ develop ์ต์ ํ git merge --no-ff feature/my-awesome-feature # --no-ff (no fast-forward)๋ก ๋ณํฉ ์ปค๋ฐ ๋จ๊ธฐ๊ธฐ git push origin develop # 4. ๊ธฐ๋ฅ ๋ธ๋์น ์ญ์ git branch -d feature/my-awesome-feature git push origin --delete feature/my-awesome-feature
๐ Git Flow์ ์ฅ๋จ์
- ์ฅ์
- ๋ช
ํํ ์ญํ ๋ถ๋ด: ๊ฐ ๋ธ๋์น์ ์ญํ ์ด ๋ช
ํํด์ ๊ฐ๋ฐ, ๋ฆด๋ฆฌ์ฆ, ๊ธด๊ธ ์์ ํ๋ก์ธ์ค๊ฐ ์ฒด๊ณ์ ์ด์์.
- ์์ ์ ์ธ ๋ฆด๋ฆฌ์ฆ:
main๋ธ๋์น๊ฐ ํญ์ ์์ ์ ์ธ ์ํ๋ฅผ ์ ์งํ์ฌ ๋ฐฐํฌ์ ์์ ์ฑ์ด ๋์์. - ๋ณ๋ ฌ ๊ฐ๋ฐ ์ฉ์ด: ์ฌ๋ฌ ๊ธฐ๋ฅ์ด
feature๋ธ๋์น์์ ๋ ๋ฆฝ์ ์ผ๋ก ๊ฐ๋ฐ๋ ์ ์์ด์ ๋ณ๋ ฌ ๊ฐ๋ฐ์ ์ ๋ฆฌํด์.
- ๋ช
ํํ ์ญํ ๋ถ๋ด: ๊ฐ ๋ธ๋์น์ ์ญํ ์ด ๋ช
ํํด์ ๊ฐ๋ฐ, ๋ฆด๋ฆฌ์ฆ, ๊ธด๊ธ ์์ ํ๋ก์ธ์ค๊ฐ ์ฒด๊ณ์ ์ด์์.
- ๋จ์
- ๋ณต์กํ ์ํฌํ๋ก์ฐ: ๋ธ๋์น ์ข
๋ฅ๊ฐ ๋ง๊ณ ์ ํ์ด ์ฆ์์ ํ์ต ๊ณก์ ์ด ๋๊ณ , ๊ด๋ฆฌ ์ค๋ฒํค๋๊ฐ ๋ฐ์ํ ์ ์์ด์.
- ์ง์์ ์ธ ๋ฐฐํฌ์ ๋ถ์ ํฉ: ๋ฆด๋ฆฌ์ฆ ๋ธ๋์น์ ๊ฐ์ ๋จ๊ณ๊ฐ ์์ด์ ์ง์์ ์ธ ํตํฉ/๋ฐฐํฌ(CI/CD) ํ๊ฒฝ์๋ ๋ค์ ๋ฌด๊ฑฐ์ธ ์ ์์ด์.
- ๋ณต์กํ ์ํฌํ๋ก์ฐ: ๋ธ๋์น ์ข
๋ฅ๊ฐ ๋ง๊ณ ์ ํ์ด ์ฆ์์ ํ์ต ๊ณก์ ์ด ๋๊ณ , ๊ด๋ฆฌ ์ค๋ฒํค๋๊ฐ ๋ฐ์ํ ์ ์์ด์.
2๏ธโฃ GitHub Flow: ๋จ์ํ๊ณ ๋น ๋ฅธ ์ง์์ ๋ฐฐํฌ ์ ๋ต
GitHub Flow๋ GitHub์์ ์ ์ํ๊ณ ์ฃผ๋ก ์ฌ์ฉํ๋ ๋ธ๋์น ๋ชจ๋ธ๋ก, Git Flow๋ณด๋ค ํจ์ฌ ๋จ์ํ๊ณ ์ ์ฐํด์. ์ง์์ ์ธ ํตํฉ(CI)๊ณผ ์ง์์ ์ธ ๋ฐฐํฌ(CD)๋ฅผ ์งํฅํ๋ ํ๋ก์ ํธ์ ๋งค์ฐ ์ ํฉํด์.
๐ ํต์ฌ ๋ธ๋์น
GitHub Flow๋ ๋จ ํ๋์ '๋ฉ์ธ ๋ธ๋์น'๋ฅผ ์ค์ฌ์ผ๋ก ์ด์๋ผ์.
main(๋๋master): ์ ํ์ ๋ฐฐํฌ ๊ฐ๋ฅํ ์ฝ๋๋ฅผ ๊ด๋ฆฌํ๋ ์ ์ผํ ๋ฉ์ธ ๋ธ๋์น์์. ํญ์ ์ต์ ์ํ์ด๋ฉฐ, ๋ฐฐํฌ ๊ฐ๋ฅํ ์ํ๋ฅผ ์ ์งํด์ผ ํด์.
๐ GitHub Flow ์ํฌํ๋ก์ฐ ์์
์๋ก์ด ๊ธฐ๋ฅ์ ๊ฐ๋ฐํ๊ณ ๋ฐฐํฌํ๋ ๊ณผ์ ์ GitHub Flow ๋ฐฉ์์ผ๋ก ์ดํด๋ณผ๊ฒ์.
# 1. ์๋ก์ด ๊ธฐ๋ฅ ๊ฐ๋ฐ ์์ git checkout main git pull origin main # ์ต์ main ๋ธ๋์น๋ก ์ ๋ฐ์ดํธ git checkout -b feature/my-new-feature # 2. ๊ธฐ๋ฅ ๊ฐ๋ฐ ๋ฐ ์ปค๋ฐ (์๊ณ ์์ฃผ ์ปค๋ฐํ๋ ๊ฒ์ด ์ค์ํด์) # ... ์ฝ๋ ์์ฑ ... git add . git commit -m "feat: Implement my new feature part 1" # ... ์ถ๊ฐ ์ฝ๋ ์์ฑ ... git commit -m "feat: Implement my new feature part 2" # 3. Pull Request ์์ฑ ๋ฐ ์ฝ๋ ๋ฆฌ๋ทฐ # (์๊ฒฉ ์ ์ฅ์์ push ํ Pull Request ์์ฑ) git push origin feature/my-new-feature # Pull Request๊ฐ ์น์ธ๋๋ฉด main ๋ธ๋์น๋ก ๋ณํฉ # 4. main ๋ธ๋์น๋ก ๋ณํฉ ํ ๋ฐฐํฌ (์๋ํ๋ CI/CD ํ์ดํ๋ผ์ธ์ผ๋ก ๋ฐฐํฌ๋๋ ๊ฒ์ด ์ผ๋ฐ์ ) # (Pull Request ๋ณํฉ ์ feature ๋ธ๋์น ์๋ ์ญ์ ์ต์ ์ฌ์ฉ ๊ถ์ฅ)
์ ์ฉํ ํGitHub Flow์์๋ Pull Request(PR)๊ฐ ์ฝ๋ ๋ฆฌ๋ทฐ, ํ ์คํธ, ๋น๋, ๋ฐฐํฌ ํธ๋ฆฌ๊ฑฐ์ ํต์ฌ ์ญํ ์ ํด์. PR์ด ์น์ธ๋์ด
main๋ธ๋์น์ ๋ณํฉ๋๋ฉด ๋ฐ๋ก ๋ฐฐํฌ๋ ์ ์๋๋ก CI/CD ํ์ดํ๋ผ์ธ์ ๊ตฌ์ถํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด์์.
๐ GitHub Flow์ ์ฅ๋จ์
- ์ฅ์
- ๋จ์ํ๊ณ ์ง๊ด์ : ๋ธ๋์น ๊ท์น์ด ๋งค์ฐ ๋จ์ํด์ ํ์ต์ด ์ฝ๊ณ , ๊ด๋ฆฌ ์ค๋ฒํค๋๊ฐ ์ ์ด์.
- ๋น ๋ฅธ ๋ฐฐํฌ:
main๋ธ๋์น์ ๋ณํฉ๋๋ฉด ๋ฐ๋ก ๋ฐฐํฌํ ์ ์์ด ์ง์์ ์ธ ํตํฉ/๋ฐฐํฌ(CI/CD)์ ์ต์ ํ๋์ด ์์ด์. - ์ ์ฐํ ๊ฐ๋ฐ: ์์ ๊ธฐ๋ฅ ๋จ์๋ก ๋น ๋ฅด๊ฒ ๊ฐ๋ฐํ๊ณ ๋ฐฐํฌํ ์ ์์ด์ ์ ์์ผ(Agile) ๊ฐ๋ฐ ๋ฐฉ์์ ์ ๋ง์์.
- ๋จ์ํ๊ณ ์ง๊ด์ : ๋ธ๋์น ๊ท์น์ด ๋งค์ฐ ๋จ์ํด์ ํ์ต์ด ์ฝ๊ณ , ๊ด๋ฆฌ ์ค๋ฒํค๋๊ฐ ์ ์ด์.
- ๋จ์
- ๋ฆด๋ฆฌ์ฆ ๊ด๋ฆฌ์ ์ด๋ ค์: ์ฌ๋ฌ ๋ฒ์ ์ ์ ํ์ ๋์์ ๊ด๋ฆฌํด์ผ ํ๋ ๊ฒฝ์ฐ,
main๋ธ๋์น ํ๋๋ก๋ ๋ฒ์ ๊ด๋ฆฌ๊ฐ ์ด๋ ค์ธ ์ ์์ด์. - ์์ ์ฑ ๋ฌธ์ :
main๋ธ๋์น๊ฐ ํญ์ ๋ฐฐํฌ ๊ฐ๋ฅํ ์ํ์ฌ์ผ ํ๋ฏ๋ก, ์๊ฒฉํ ํ ์คํธ์ ์ฝ๋ ๋ฆฌ๋ทฐ๊ฐ ๋ท๋ฐ์นจ๋์ง ์์ผ๋ฉด ์์ ์ฑ์ด ์ ํ๋ ์ํ์ด ์์ด์. - ํ๋ก์ ํธ ๊ท๋ชจ์ ๋ฐ๋ฅธ ํ๊ณ: ๋งค์ฐ ํฌ๊ณ ๋ณต์กํ๋ฉฐ ์๊ฒฉํ ๋ฆด๋ฆฌ์ฆ ์ ์ฑ ์ ๊ฐ์ง ํ๋ก์ ํธ์๋ Git Flow๊ฐ ๋ ์ ํฉํ ์ ์์ด์.
- ๋ฆด๋ฆฌ์ฆ ๊ด๋ฆฌ์ ์ด๋ ค์: ์ฌ๋ฌ ๋ฒ์ ์ ์ ํ์ ๋์์ ๊ด๋ฆฌํด์ผ ํ๋ ๊ฒฝ์ฐ,
3๏ธโฃ GitLab Flow (๊ฐ๋ต ์๊ฐ)
GitLab Flow๋ Git Flow์ GitHub Flow์ ์ฅ์ ์ ๊ฒฐํฉํ ํํ๋ผ๊ณ ๋ณผ ์ ์์ด์. main ๋ธ๋์น ์ธ์ production, pre-production ๋ฑ ํ๊ฒฝ๋ณ ๋ธ๋์น๋ฅผ ๋์ด ๋ฐฐํฌ ํ๋ก์ธ์ค์ ์์ ์ฑ์ ๋์ด๋ฉด์๋, GitHub Flow์ฒ๋ผ ๊ธฐ๋ฅ ๋ธ๋์น์์ ์์ํ์ฌ Pull Request(Merge Request)๋ฅผ ํตํด main์ผ๋ก ํตํฉํ๋ ๋ฐฉ์์ ์ฌ์ฉํด์. ๋ณต์กํ ๋ฐฐํฌ ํ๊ฒฝ๊ณผ ์ง์์ ์ธ ๋ฐฐํฌ๋ฅผ ๋์์ ๊ณ ๋ คํ ๋ ์ข์ ๋์์ด ๋ ์ ์์ด์.
๐ค ์ฐ๋ฆฌ ํ์ ๋ง๋ Git ๋ธ๋์น ์ ๋ต ์ ํํ๊ธฐ
์ด๋ค ์ ๋ต์ด "์ต๊ณ "๋ผ๊ณ ๋จ์ ํ๊ธฐ๋ ์ด๋ ค์์. ํ์ ํน์ฑ๊ณผ ํ๋ก์ ํธ์ ์๊ตฌ์ฌํญ์ ๋ฐ๋ผ ๊ฐ์ฅ ์ ํฉํ ์ ๋ต์ ์ ํํ๊ณ , ํ์์ ๋ฐ๋ผ ๋ณํํด์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ค์ํด์.
0๏ธโฃ ๊ณ ๋ คํด์ผ ํ ์์๋ค
- ํ๋ก์ ํธ ์ ํ ๋ฐ ๊ท๋ชจ: ์น ์๋น์ค, ๋ชจ๋ฐ์ผ ์ฑ, ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ์จํ๋ ๋ฏธ์ค ์๋ฃจ์
๋ฑ ํ๋ก์ ํธ์ ์ฑ๊ฒฉ๊ณผ ๊ท๋ชจ์ ๋ฐ๋ผ ์ ํฉํ ์ ๋ต์ด ๋ฌ๋ผ์ ธ์.
- ๋ฐฐํฌ ์ฃผ๊ธฐ ๋ฐ ๋ฐฉ์: ๋งค์ผ ์ฌ๋ฌ ๋ฒ ๋ฐฐํฌํ๋ ์ง์์ ๋ฐฐํฌ(CD) ํ๊ฒฝ์ธ์ง, ์๋๋ฉด ๋ช ์ฃผ/๋ช ๋ฌ์ ํ ๋ฒ ์ ๊ธฐ์ ์ผ๋ก ๋ฐฐํฌํ๋์ง ์ฌ๋ถ๊ฐ ์ค์ํด์.
- ํ ๊ท๋ชจ ๋ฐ ๊ฐ๋ฐ ๋ฌธํ: ํ์๋ค์ Git ์๋ จ๋, ์ฝ๋ ๋ฆฌ๋ทฐ ๋ฌธํ, ์ ์์ผ(Agile) ๊ฐ๋ฐ ๋ฐฉ์ ์ ํธ๋ ๋ฑ์ ๊ณ ๋ คํด์ผ ํด์.
- ๋ฒ์ ๊ด๋ฆฌ์ ์ค์์ฑ: ์ฌ๋ฌ ๋ฒ์ ์ ์ ํ์ ๋์์ ์ ์ง๋ณด์ํด์ผ ํ๋์ง, ์๋๋ฉด ํญ์ ์ต์ ๋ฒ์ ๋ง ์ ์งํ๋ฉด ๋๋์ง ํ๋จํด์ผ ํด์.
์ ๋ณด์ผ๋ฐ์ ์ผ๋ก ์น ์๋น์ค๋ SaaS์ฒ๋ผ ์ง์์ ์ธ ๋ฐฐํฌ๊ฐ ์ค์ํ ํ๋ก์ ํธ๋ GitHub Flow๋ GitLab Flow๊ฐ ๋ ์ ํฉํ๊ณ , ์ด์์ฒด์ , ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ์จํ๋ ๋ฏธ์ค ์๋ฃจ์ ์ฒ๋ผ ์์ ์ ์ธ ๋ฒ์ ๊ด๋ฆฌ๊ฐ ์ค์ํ ํ๋ก์ ํธ๋ Git Flow๊ฐ ๋ ์ ํฉํ๋ค๊ณ ๋ณผ ์ ์์ด์.
1๏ธโฃ ์ ๋ต ๋์ ๋ฐ ์ด์ ํ
์ด๋ค ์ ๋ต์ ์ ํํ๋ , ์ฑ๊ณต์ ์ธ ์ด์์ ์ํ ๋ช ๊ฐ์ง ํ์ด ์์ด์.
- ๋ช
ํํ ๊ท์น ์ ์: ํ ์ ์ฒด๊ฐ ํฉ์ํ ๋ธ๋์น ์ ๋ต ๊ท์น์ ๋ฌธ์ํํ๊ณ ๊ณต์ ํด์ผ ํด์. (์: ๋ธ๋์น ๋ค์ด๋ฐ ์ปจ๋ฒค์
, Pull Request ๊ฐ์ด๋๋ผ์ธ ๋ฑ)
- ์ฝ๋ ๋ฆฌ๋ทฐ ํ์ฑํ: Pull Request๋ฅผ ํตํ ์ฝ๋ ๋ฆฌ๋ทฐ๋ ์ฝ๋ ํ์ง์ ๋์ด๊ณ , ๋ธ๋์น ์ ๋ต์ ์์ ์ฑ์ ๋ณด์ฅํ๋ ํต์ฌ ์์์์.
- ์๋ํ๋ ํ
์คํธ: ๋ณํฉ ์ ์ ์๋ํ๋ ํ
์คํธ๊ฐ ํต๊ณผ๋๋๋ก CI/CD ํ์ดํ๋ผ์ธ์ ๊ตฌ์ถํด์ ์์ ์ฑ์ ํ๋ณดํด์ผ ํด์.
- ์๊ณ ์ฆ์ ์ปค๋ฐ: ๊ฐ๋ฅํ ํ ์์ ๋จ์๋ก ์์ฃผ ์ปค๋ฐํ๊ณ , ๊ธฐ๋ฅ ๋ธ๋์น๋ ์งง๊ฒ ์ ์งํด์ ๋ณํฉ ์ถฉ๋์ ์ํ์ ์ค์ด๊ณ ๋ณ๊ฒฝ ์ด๋ ฅ์ ๋ช
ํํ๊ฒ ํด์ผ ํด์.
- ์ ์ฐํ ์ ์ฉ: ์ฒ์๋ถํฐ ์๋ฒฝํ ์ ๋ต์ ๊ณ ์งํ๊ธฐ๋ณด๋ค๋, ํ์ ์ํฉ์ ๋ง์ถฐ ์ ์ฐํ๊ฒ ์ ๋ต์ ์์ ํ๊ณ ๋ฐ์ ์์ผ ๋๊ฐ๋ ๊ฒ์ด ์ค์ํด์.
๐ ์ ๋ฆฌํ๋ฉฐ
์ค๋์ Git ๋ธ๋์น ์ ๋ต์ ์ค์์ฑ๋ถํฐ Git Flow์ GitHub Flow์ ํน์ง, ๊ทธ๋ฆฌ๊ณ ์ฐ๋ฆฌ ํ์ ๋ง๋ ์ ๋ต์ ์ ํํ๊ณ ์ด์ํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์ธํ ์์๋ดค์ด์.
Git ๋ธ๋์น ์ ๋ต์ ๋จ์ํ Git ๋ช
๋ น์ด๋ฅผ ์๋ ๊ฒ์ ๋์ด, ํ์ ํ์
๋ฐฉ์๊ณผ ๊ฐ๋ฐ ๋ฌธํ๋ฅผ ๋ฐ์ํ๋ ์ค์ํ ์์์์. ์ ๋ต์ ์์ง๋ง, ํ์๋ค๊ณผ ์ถฉ๋ถํ ๋
ผ์ํ๊ณ ํ๋ก์ ํธ์ ํน์ฑ์ ๊ณ ๋ คํ์ฌ ์ต์ ์ ์ ๋ต์ ์ฐพ์๊ฐ๋ ๊ณผ์ ์์ฒด๊ฐ ํ์ ์ฑ์ฅ์ ์ด๋๋ ๋ฐ๊ฑฐ๋ฆ์ด ๋ ๊ฑฐ์์.
์ด ๊ธ์ด ์ฌ๋ฌ๋ถ์ ํ์ด ๋ ํจ์จ์ ์ด๊ณ ์์ ์ ์ธ ๊ฐ๋ฐ ํ๋ก์ธ์ค๋ฅผ ๊ตฌ์ถํ๋ ๋ฐ ์์ ๋์์ด ๋์๊ธฐ๋ฅผ ๋ฐ๋ผ์. ๋ค์์๋ ์ค๋ฌด์ ๋์์ด ๋๋ ์ ์ตํ ์ ๋ณด๋ก ์ฐพ์์ฌ๊ฒ์!
๐ฎ ์ฐธ๊ณ
์ฐ๊ด๋ ํฌ์คํธ
- ๋จ์ด: 1,996๊ฐ22๋ถ
[๐ค] Next.js App Router์ Auth.js (NextAuth.js) ์ฐ๋ ๊ฐ์ด๋: ์๋ฒ ๋ฐ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ ์ธ์ ๊ด๋ฆฌ
Next.js 14+ App Router ํ๊ฒฝ์์ Auth.js (๊ตฌ NextAuth.js)๋ฅผ ์ฌ์ฉํ์ฌ ์์ ํ๊ณ ํจ์จ์ ์ธ ์ธ์ฆ ์์คํ ์ ๊ตฌ์ถํ๋ ๋ฐฉ๋ฒ์ ์์ธํ ์์๋ด์. ์๋ฒ ์ปดํฌ๋ํธ์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ์์ ์ธ์ ์ ๊ด๋ฆฌํ๊ณ ๋ณดํธํ๋ ์ค์ฉ์ ์ธ ํ๊ณผ ์ฝ๋ ์์๋ฅผ ์ ๊ณตํด์.
- ๋จ์ด: 2,440๊ฐ26๋ถ
[๐ค] Next.js App Router์์ Zod์ TypeScript๋ก API ์ ํจ์ฑ ๊ฒ์ฌ ๋ฐ ํ์ ์์ ์ฑ ํ๋ณด
Next.js App Router ํ๊ฒฝ์์ Zod์ TypeScript๋ฅผ ํ์ฉํ์ฌ API ์์ฒญ ๋ฐ์ดํฐ์ ๋ฐํ์ ์ ํจ์ฑ์ ๊ฒ์ฌํ๊ณ , ๋์์ ๊ฐ๋ ฅํ ํ์ ์์ ์ฑ์ ํ๋ณดํ๋ ์ค์ฉ์ ์ธ ๋ฐฉ๋ฒ์ ์์ธํ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,646๊ฐ18๋ถ
[๐ค] JavaScript ๊ตฌ์กฐ ๋ถํด ํ ๋น ํจํด ์ฌํ: ๋ค์ํ ํ์ฉ๊ณผ ์ค์ ํ
JavaScript ๊ตฌ์กฐ ๋ถํด ํ ๋น(Destructuring Assignment)์ ๊ธฐ๋ณธ๋ถํฐ ์ค์ฒฉ ๊ฐ์ฒด, ๊ธฐ๋ณธ๊ฐ, Rest ๋ฌธ๋ฒ, ํจ์ ์ธ์ ํ์ฉ๊น์ง ๋ค์ํ ํจํด๊ณผ ์ค์ ํ์ ํตํด ์ฝ๋๋ฅผ ๋ ๊ฐ๊ฒฐํ๊ณ ํจ์จ์ ์ผ๋ก ์์ฑํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 1,841๊ฐ23๋ถ
[๐ค] ์น ์ฑ๋ฅ ์ต์ ํ: ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ก Core Web Vitals ์ง๋จํ๊ณ ๊ฐ์ ํ๊ธฐ
๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ(DevTools)์ Lighthouse, Performance, Network ํญ์ ํ์ฉํ์ฌ Core Web Vitals๋ฅผ ์ง๋จํ๊ณ ์ค์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ๊ฐ์ ํ๋ ์ค์ง์ ์ธ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 1,957๊ฐ22๋ถ
[๐ค] TypeScript ํจ์ ์ค๋ฒ๋ก๋ฉ: ์๊ทธ๋์ฒ์ ๊ตฌํ์ฒด๋ฅผ ์๋ฒฝํ๊ฒ ์ดํดํ๊ณ ํ์ฉํ๊ธฐ
TypeScript์์ ํจ์ ์ค๋ฒ๋ก๋ฉ์ ์ฌ์ฉํ์ฌ ๋ค์ํ ํ์ ์ ์ธ์๋ฅผ ์ฒ๋ฆฌํ๊ณ , ์ฝ๋์ ๊ฐ๋ ์ฑ ๋ฐ ์์ ์ฑ์ ๋์ด๋ ๋ฐฉ๋ฒ์ ์๊ทธ๋์ฒ์ ๊ตฌํ์ฒด์ ๊ด๊ณ๋ฅผ ์ค์ฌ์ผ๋ก ์์ธํ ์ค๋ช ํด ๋๋ ค์.
- ๋จ์ด: 1,709๊ฐ19๋ถ
[๐ค] JavaScript requestIdleCallback๊ณผ isInputPending์ผ๋ก UI ๋ฐ์์ฑ ๊ฐ์ ํ๊ธฐ: ๋ฉ์ธ ์ค๋ ๋ ์ต์ ํ ์ฌํ
JavaScript์ `requestIdleCallback`๊ณผ `isInputPending` API๋ฅผ ํ์ฉํ์ฌ ๋ฉ์ธ ์ค๋ ๋ ๋ธ๋กํน์ ์ค์ด๊ณ UI ๋ฐ์์ฑ์ ๊ทน๋ํํ๋ ์ค์ง์ ์ธ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์. ์ฌ์ฉ์ ๊ฒฝํ์ ์ํ ์น ์ฑ๋ฅ ์ต์ ํ ์ ๋ต์ ์๋ดํด ๋๋ ค์.
- ๋จ์ด: 2,149๊ฐ23๋ถ
[๐ค] Next.js App Router์ `generateMetadata`์ `generateViewport` ์ฌํ: SEO ๋ฐ PWA ์ต์ ํ ์ ๋ต
Next.js 14/13 App Router์์ `generateMetadata`์ `generateViewport` ํจ์๋ฅผ ํ์ฉํ์ฌ ๋์ SEO ๋ฉํํ๊ทธ์ PWA ์ค์ ์ ์ต์ ํํ๋ ์ฌํ ์ ๋ต์ ๋ค๋ฃน๋๋ค. ์ค๋ฌด ์์์ ํจ๊ป ์น์ฌ์ดํธ์ ๊ฒ์ ์์ง ๋ ธ์ถ ๋ฐ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ทน๋ํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 1,788๊ฐ19๋ถ
[๐ค] CSS ๋ณ์(Custom Properties) ์ฌํ: ๋์ ํ ๋ง, ์ค์ฝํ, JavaScript ํ์ฉ ์ ๋ต
CSS ๋ณ์(Custom Properties)์ ๊ธฐ๋ณธ๋ถํฐ ๋์ ํ ๋ง ๊ตฌํ, ์ค์ฝํ ์ ๋ต, ๊ทธ๋ฆฌ๊ณ JavaScript์์ ์ํธ์์ฉ๊น์ง ์ค๋ฌด์ ๋ฐ๋ก ์ ์ฉํ ์ ์๋ ์ฌํ ํ์ฉ๋ฒ์ ๋ธ๋ฃจ๊ฐ ์์ธํ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,293๊ฐ15๋ถ
[๐ค] Next.js App Router Edge Runtime: ๊ธ๋ก๋ฒ ์ฑ๋ฅ๊ณผ ๋น์ฉ ํจ์จ์ฑ ๊ทน๋ํ ์ ๋ต
Next.js App Router์์ Edge Runtime์ ํ์ฉํด Route Handler ์ฑ๋ฅ์ ๊ทน๋ํํ๊ณ , ๊ธ๋ก๋ฒ ์ฌ์ฉ์์๊ฒ ๋น ๋ฅธ ์๋ต ์๋๋ฅผ ์ ๊ณตํ๋ฉฐ, ๋น์ฉ ํจ์จ์ ์ผ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด์ํ๋ ์ค์ ์ ๋ต์ ์์ธํ ๋ค๋ค์. Edge Runtime์ ์ฅ์ ๊ณผ ์ ํ์ฌํญ, ๊ทธ๋ฆฌ๊ณ ์ค์ ์ฝ๋ ์์๋ฅผ ํตํด ํจ๊ณผ์ ์ธ ์ ์ฉ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 1,980๊ฐ25๋ถ
[๐ค] Next.js/React์์ ํด๋ฆฐ ์ํคํ ์ฒ์ ์์กด์ฑ ์ญ์ ์์น ์ ์ฉํ๊ธฐ: ํ์ฅ ๊ฐ๋ฅํ ํ๋ฐํธ์๋ ๋ง๋ค๊ธฐ
Next.js์ React ํ๋ก์ ํธ์์ ํด๋ฆฐ ์ํคํ ์ฒ์ ์์กด์ฑ ์ญ์ ์์น(DIP)์ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃจ์ด์. ๋๋ฉ์ธ, ์ ์ค์ผ์ด์ค, ์ธํ๋ผ ๊ณ์ธต์ ๋ถ๋ฆฌํ์ฌ ์ ์ง๋ณด์์ฑ๊ณผ ํ ์คํธ ์ฉ์ด์ฑ์ ๊ทน๋ํํ๋ ์ค์ฉ์ ์ธ ์ ๋ต์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 1,733๊ฐ19๋ถ
[๐ค] Jotai๋ก Next.js App Router ํด๋ผ์ด์ธํธ ์ํ ๊ด๋ฆฌ ์ฌํ: ์ํฐ ํจํด๊ณผ ์ต์ ํ
Next.js App Router ํ๊ฒฝ์์ Jotai ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํ์ฉํ์ฌ ํจ์จ์ ์ธ ํด๋ผ์ด์ธํธ ์ํ ๊ด๋ฆฌ ์ ๋ต์ ์์๋ณด์ธ์. ์ํฐ ํจํด์ ์ด์ฉํ ์ํ ๋ถ๋ฆฌ, ์ต์ ํ ๊ธฐ๋ฒ, ๊ทธ๋ฆฌ๊ณ ์ค์ฉ์ ์ธ ์ฝ๋ ์์๋ฅผ ํตํด ๋ณต์กํ UI ์ํ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ์ ๋ธ๋ฃจ๊ฐ ์์ธํ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,720๊ฐ18๋ถ
[๐ค] Next.js App Router ์ ์ญ ์ํ ๊ด๋ฆฌ: Server/Client Components ์๋ฒฝ ๊ฐ์ด๋
Next.js App Router ํ๊ฒฝ์์ Server Components์ Client Components ๊ฐ์ ์ ์ญ ์ํ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ํ๊ตฌํด์. Zustand, Recoil, Context API ๋ฑ ๋ค์ํ ์๋ฃจ์ ๊ณผ ์ค์ฉ์ ์ธ ์ ๋ต์ ํตํด ๋ณต์กํ ์ํ ๊ด๋ฆฌ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํด ๋ณด์ธ์.
- ๋จ์ด: 1,787๊ฐ20๋ถ
[๐ค] Atomic Design ํจํด์ผ๋ก React/Next.js ์ปดํฌ๋ํธ ์ํคํ ์ฒ ํ์ฅ์ฑ ๋์ด๊ธฐ
React ๋ฐ Next.js ํ๋ก์ ํธ์์ Atomic Design ํจํด์ ์ ์ฉํ์ฌ ์ปดํฌ๋ํธ์ ์ฌ์ฌ์ฉ์ฑ๊ณผ ํ์ฅ์ฑ์ ๊ทน๋ํํ๋ ๋ฐฉ๋ฒ์ ์ค๋ฌด ์์์ ํจ๊ป ์์ธํ ์๋ ค๋๋ ค์. ํจ์จ์ ์ธ ํ๋ก ํธ์๋ ์ํคํ ์ฒ๋ฅผ ๊ตฌ์ถํด ๋ณด์ธ์.
- ๋จ์ด: 2,160๊ฐ24๋ถ
[๐ค] ์๋ฐ์คํฌ๋ฆฝํธ Web Workers: UI ๋ธ๋กํน ์์ด ๋ฌด๊ฑฐ์ด ์์ ์ฒ๋ฆฌํ๊ธฐ
ํ๋ก ํธ์๋์์ CPU ์ง์ฝ์ ์ธ ์์ ์ UI ๋ธ๋กํน์ ํํ ๋ฌธ์ ์์. ์๋ฐ์คํฌ๋ฆฝํธ Web Workers๋ก ๋ฉ์ธ ์ค๋ ๋๋ฅผ ํด๋ฐฉํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ์ต์ ํํ๋ ์ค์ฉ์ ์ธ ๋ฐฉ๋ฒ์ ์ฝ๋ ์์์ ํจ๊ป ์์๋ณด์ธ์. ๋ณต์กํ ๊ณ์ฐ, ๋ฐ์ดํฐ ์ฒ๋ฆฌ ๋ฑ์ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์์ ํ๊ฒ ์คํํ๋ ๋ ธํ์ฐ๋ฅผ ๊ณต์ ํด์.
- ๋จ์ด: 1,822๊ฐ20๋ถ
[๐ค] TypeScript `as const` ์ฌ์ธต ๋ถ์: ๋ฆฌํฐ๋ด ํ์ ์ถ๋ก ๊ณผ ๋ถ๋ณ์ฑ ํ์ฉ ์ ๋ต
TypeScript์ `as const`๋ฅผ ํ์ฉํ์ฌ ๋ฆฌํฐ๋ด ํ์ ์ถ๋ก ์ ๊ฐํํ๊ณ , ๋ฐฐ์ด๊ณผ ๊ฐ์ฒด์ ๋ถ๋ณ์ฑ์ ์์ ํ๊ฒ ํ๋ณดํ๋ ์ค์ฉ์ ์ธ ๋ฐฉ๋ฒ์ ์์ธํ ์์๋ด์. ์ค๋ฌด ์ฝ๋์ ํ์ ์์ ์ฑ๊ณผ ๊ฐ๋ ์ฑ์ ๋์ฌ๋ณด์ธ์.
- ๋จ์ด: 1,486๊ฐ17๋ถ
[๐ค] Next.js @next/font๋ฅผ ํ์ฉํ ํฐํธ ์ต์ ํ ๋ฐ CLS ๊ฐ์ ์ ๋ต
Next.js ์ ํ๋ฆฌ์ผ์ด์ ์์ ํฐํธ ๋ก๋ฉ์ผ๋ก ์ธํ Cumulative Layout Shift(CLS)๋ฅผ ์ต์ํํ๊ณ ์น ์ฑ๋ฅ์ ๊ทน๋ํํ๋ @next/font ์ฌ์ฉ๋ฒ๊ณผ ์ค์ฉ์ ์ธ ์ต์ ํ ์ ๋ต์ ์์ธํ ์์๋ด์.
- ๋จ์ด: 1,914๊ฐ21๋ถ
[๐ค] Next.js App Router ๊ตญ์ ํ (i18n) ์๋ฒฝ ๊ฐ์ด๋: ๋ค๊ตญ์ด ์ง์ ๊ตฌํ ์ ๋ต
Next.js 14+ App Router ํ๊ฒฝ์์ ๊ตญ์ ํ(i18n)๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์์ธํ ์๋ ค๋๋ ค์. ๋ฏธ๋ค์จ์ด๋ฅผ ํ์ฉํ ์ธ์ด ๊ฐ์ง๋ถํฐ ํด๋ผ์ด์ธํธ/์๋ฒ ์ปดํฌ๋ํธ์์์ ๋ค๊ตญ์ด ํ ์คํธ ์ฒ๋ฆฌ๊น์ง, ์ค๋ฌด์ ๋ฐ๋ก ์ ์ฉํ ์ ์๋ ๋ค๊ตญ์ด ์ง์ ์ ๋ต์ ๋ธ๋ฃจ๊ฐ ์๋ดํด ๋๋ฆด๊ฒ์.
- ๋จ์ด: 1,328๊ฐ16๋ถ
[์น ์ฑ๋ฅ ์ต์ ํ] Interaction to Next Paint (INP) ๊ฐ์ : ์ฌ์ฉ์ ๊ฒฝํ์ ๊ทน๋ํํ๋ ์ค์ ์ ๋ต
์๋ก์ด Core Web Vitals ์งํ, Interaction to Next Paint(INP)๋ฅผ ๊น์ด ์ดํดํ๊ณ ์ค์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์ INP ์ ์๋ฅผ ๊ฐ์ ํ๋ ์ค์ฉ์ ์ธ ์ต์ ํ ์ ๋ต๋ค์ ๋ธ๋ฃจ๊ฐ ์์ธํ ์๋ ค๋๋ ค์. ์ฌ์ฉ์ ์ธํฐ๋์ ์๋ต์ฑ์ ๋์ฌ ์ง์ ํ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค์ด ๋ณด์ธ์.
๋จ์ด: 1,668๊ฐ20๋ถ[๐ค] JavaScript Decorator ์ฌ์ธต ๋ถ์: ๋ฉํํ๋ก๊ทธ๋๋ฐ๊ณผ ํ์ ์คํฌ๋ฆฝํธ ํ์ฉ ์ ๋ต
JavaScript Decorator์ ๊ฐ๋ ๋ถํฐ ํ์ ์คํฌ๋ฆฝํธ์์์ ํ์ฉ, ๊ทธ๋ฆฌ๊ณ ๋ฏธ๋ ํ์คํ ๋ฐฉํฅ๊น์ง ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃจ๋ฉฐ, ์ค๋ฌด์์ ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ๊ณผ ๊ฐ๋ ์ฑ์ ๋์ด๋ ๋ฉํํ๋ก๊ทธ๋๋ฐ ํจํด์ ํ์ตํด ๋ณด์ธ์.
- ๋จ์ด: 2,634๊ฐ28๋ถ
[๐ค] JavaScript ํ๋ก๋ฏธ์ค/async-await ์ฌํ: ์ค์ ํจํด๊ณผ ์ฃผ์์ฌํญ
JavaScript์ ํ๋ก๋ฏธ์ค์ async/await๋ฅผ ๊น์ด ์ดํดํ๊ณ , ์ค๋ฌด์์ ๋ง์ฃผํ๋ ๋ณต์กํ ๋น๋๊ธฐ ์ฒ๋ฆฌ ์ํฉ์์ ํ์ฉํ ์ ์๋ ๊ณ ๊ธ ํจํด๊ณผ ํํ ๋ฐ์ํ๋ ์ค์๋ฅผ ๋ฐฉ์งํ๋ ๋ฐฉ๋ฒ์ ์์ธํ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,421๊ฐ16๋ถ
[๐ค] TypeScript 5.2+ `using` ์ ์ธ์ผ๋ก ์์ ์๋ ๊ด๋ฆฌํ๊ธฐ: ๊น๋ํ ๋ฆฌ์์ค ์ ๋ฆฌ์ ์์
TypeScript 5.2์์ ๋์ ๋ `using` ์ ์ธ์ ํ์ฉํ์ฌ ํ์ผ ํธ๋ค, ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฐ๊ฒฐ ๋ฑ ๋ค์ํ ์์์ ์๋์ผ๋ก ๊ด๋ฆฌํ๊ณ ๊น๋ํ๊ฒ ์ ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์ค์ฉ์ ์ธ ์์ ์ ํจ๊ป ์์ธํ ์์๋ด์. ๋ ์ด์ `try...finally` ๋ธ๋ก์ผ๋ก ๋ณต์กํ๊ฒ ์์์ ํด์ ํ ํ์ ์์ด์.
- ๋จ์ด: 2,006๊ฐ22๋ถ
[๐ค] Feature-Sliced Design (FSD)์ผ๋ก ํ์ฅ ๊ฐ๋ฅํ ํ๋ก ํธ์๋ ์ํคํ ์ฒ ๊ตฌ์ถํ๊ธฐ
Feature-Sliced Design (FSD)์ ๋๊ท๋ชจ ํ๋ก ํธ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์ฅ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ๋์ด๋ ๊ฐ๋ ฅํ ์ํคํ ์ฒ ํจํด์ด์์. FSD์ ํต์ฌ ์์น, ๋ ์ด์ด ๊ตฌ์กฐ, ์ค๋ฌด ์ ์ฉ ๋ฐฉ๋ฒ์ ์ฝ๋ ์์์ ํจ๊ป ์์ธํ ์์๋ด์.
- ๋จ์ด: 1,781๊ฐ21๋ถ
[๐ค] TypeScript `moduleResolution: 'bundler'`์ `verbatimModuleSyntax` ์๋ฒฝ ์ดํด: ๋ชจ๋ ๋ฒ๋ค๋ฌ ์๋์ ํ์ ์คํฌ๋ฆฝํธ ์ค์ ์ต์ ํ
๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก์ ํธ์์ TypeScript์ `moduleResolution: 'bundler'`์ `verbatimModuleSyntax` ์ต์ ์ด ์ ์ค์ํ์ง, ์ด๋ป๊ฒ ์ฌ๋ฐ๋ฅด๊ฒ ์ค์ ํ๊ณ ํ์ฉํ์ฌ ๊ฐ๋ฐ ๊ฒฝํ๊ณผ ๋ฒ๋ค๋ง ํจ์จ์ ๊ทน๋ํํ๋์ง ์ค๋ฌด ์์์ ํจ๊ป ์์ธํ ์์๋ด์.
- ๋จ์ด: 1,908๊ฐ24๋ถ
[๐ค] ๋ชจ๋ ธ๋ ํฌ ์ํคํ ์ฒ: ํจ์จ์ ์ธ ๋๊ท๋ชจ ํ๋ก์ ํธ ์ค๊ณ๋ฅผ ์ํ ์ค์ ๊ฐ์ด๋
๋๊ท๋ชจ ์น ํ๋ก์ ํธ์์ ๋ชจ๋ ธ๋ ํฌ๋ฅผ ๋์ ํ๋ ์ด์ , ์ฅ๋จ์ , ๊ทธ๋ฆฌ๊ณ ํจ๊ณผ์ ์ธ ๊ตฌ์กฐ ์ค๊ณ ๋ฐ ์ค๋ฌด ์ ์ฉ ์ ๋ต์ ๋ธ๋ฃจ๊ฐ ์์ธํ ์๋ ค๋๋ ค์. ํ ์์ฐ์ฑ ํฅ์๊ณผ ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ์ ๊ทน๋ํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
๋จ์ด: 2,188๊ฐ26๋ถ[๐ค] ์น ์ฑ๋ฅ ์ต์ ํ: ๋ฆฌํ๋ก์ฐ์ ๋ฆฌํ์ธํธ ์ต์ํ ์ ๋ต
๋ธ๋ผ์ฐ์ ๋ ๋๋ง ๊ณผ์ ์ ํต์ฌ์ธ ๋ฆฌํ๋ก์ฐ(Reflow)์ ๋ฆฌํ์ธํธ(Repaint)์ ๋ฐ์ ์๋ฆฌ๋ฅผ ์ดํดํ๊ณ , ์ด๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ค์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ๊ทน๋ํํ๋ ์ค์ง์ ์ธ ์ ๋ต๊ณผ ์ฝ๋ ์์๋ฅผ ์์ธํ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,903๊ฐ19๋ถ
[๐ค] Vitest์ React Testing Library๋ก Next.js ์ปดํฌ๋ํธ ์๋ฒฝ ํ ์คํธํ๊ธฐ
Next.js ํ๋ก์ ํธ์์ Vitest์ React Testing Library๋ฅผ ํ์ฉํ์ฌ UI ์ปดํฌ๋ํธ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ํ ์คํธํ๋ ๋ฐฉ๋ฒ์ ์ค๋ฌด ์์ ์ ํจ๊ป ์์ธํ ์์๋ด์. ์ค์ ๋ถํฐ Mocking, ์ด๋ฒคํธ ์๋ฎฌ๋ ์ด์ ๊น์ง, ๊ฒฌ๊ณ ํ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์ํ ํ ์คํธ ์ ๋ต์ ์ตํ๋ณด์ธ์.
- ๋จ์ด: 1,542๊ฐ20๋ถ
[๐ค] Tailwind CSS v4 ์ถ์: ๊ฐ๋ฐ์์๊ฒ ์ฐพ์์ฌ ๋ณํ์ ์ต์ ํ ์ ๋ต
Tailwind CSS v4์ ์ฃผ์ ๋ณ๊ฒฝ์ฌํญ๊ณผ ์๋ก์ด ๊ธฐ๋ฅ๋ค์ ๊น์ด ์๊ฒ ๋ถ์ํ๊ณ , ์ค๋ฌด์์ ํจ์จ์ ์ผ๋ก ์ ์ฉํ๋ฉฐ ์ฑ๋ฅ์ ์ต์ ํํ๋ ์ ๋ต์ ๋ธ๋ฃจ๊ฐ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,566๊ฐ20๋ถ
[๐ค] Next.js Dockerfile ์ต์ ํ: ํ๋ก๋์ ๋ฐฐํฌ๋ฅผ ์ํ ์๋ฒฝ ๊ฐ์ด๋
Next.js ์ ํ๋ฆฌ์ผ์ด์ ์ Docker ์ปจํ ์ด๋๋ก ํจ์จ์ ์ผ๋ก ๋ฐฐํฌํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. ๋ฉํฐ์คํ ์ด์ง ๋น๋, ์บ์ฑ ์ ๋ต, ๋ณด์ ์ค์ ๋ฑ ํ๋ก๋์ ํ๊ฒฝ์ ์ต์ ํ๋ Dockerfile ์์ฑ ๊ฐ์ด๋๋ฅผ ์ ๊ณตํด ๋๋ ค์.
- ๋จ์ด: 2,177๊ฐ24๋ถ
[๐ค] CSS Grid ์ฌํ ๊ฐ์ด๋: ์ค์ ๋ ์ด์์ ํจํด๊ณผ ๋ฐ์ํ ๋์์ธ ์ ๋ต
CSS Grid๋ ๊ฐ๋ ฅํ 2์ฐจ์ ๋ ์ด์์ ์์คํ ์ด์์. ์ด ๊ฐ์ด๋์์ Grid์ ํต์ฌ ๊ฐ๋ ๋ถํฐ ์ค์ ๋ ์ด์์ ํจํด, ๋ฐ์ํ ๋์์ธ ์ ๋ต๊น์ง ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃจ์ด ์ค๋ฌด์ ๋ฐ๋ก ์ ์ฉํ ์ ์๋๋ก ๋์๋๋ ค์.
- ๋จ์ด: 1,718๊ฐ19๋ถ
[๐ค] TypeScript ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด ํ์ : ๋ฌธ์์ด ํ์ ์ ๋ง๋ฒ์ฌ๋ก ๋ณ์ ํ๊ธฐ
TypeScript์ ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด ํ์ ์ ํ์ฉํ์ฌ ๋ณต์กํ ๋ฌธ์์ด ํจํด์ ์์ ํ๊ฒ ํ์ ์ถ๋ก ํ๊ณ , ๊ฐ๋ ฅํ ์ ํธ๋ฆฌํฐ ํ์ ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์ค๋ฌด ์์ ์ ํจ๊ป ์์ธํ ์์๋ด์. ํ์ ์์ ์ฑ์ ํ ๋จ๊ณ ๋์ฌ ๊ฐ๋ฐ ๊ฒฝํ์ ๊ฐ์ ํด ๋ณด์ธ์.
- ๋จ์ด: 1,918๊ฐ23๋ถ
[๐ค] JavaScript WeakMap๊ณผ WeakSet: ๋ฉ๋ชจ๋ฆฌ ๋์ ๋ฐฉ์ง์ ์ต์ ํ ์ ๋ต
JavaScript์์ WeakMap๊ณผ WeakSet์ ํ์ฉํ์ฌ ๋ฉ๋ชจ๋ฆฌ ๋์๋ฅผ ๋ฐฉ์งํ๊ณ ์ฑ๋ฅ์ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ์ค์ฉ์ ์ธ ์์์ ํจ๊ป ์์ธํ ์์๋ด์. ๊ฐ๋น์ง ์ปฌ๋ ์ ๋์ ์๋ฆฌ์ ํจ๊ป ๊ฐ์ฒด ์ฐธ์กฐ ๊ด๋ฆฌ์ ์ค์์ฑ์ ์ดํดํ๊ณ , ์ค์ ํ๋ก์ ํธ์ ์ ์ฉํ๋ ์ ๋ต์ ๋ฐฐ์๋ด์.
- ๋จ์ด: 1,455๊ฐ17๋ถ
[๐ค] Next.js/React ํ๋ก์ ํธ๋ฅผ ์ํ ESLint & Prettier ์ค์ ์๋ฒฝ ๊ฐ์ด๋
๋ณต์กํ Next.js ๋ฐ React ํ๋ก์ ํธ์์ ์ผ๊ด๋ ์ฝ๋ ์คํ์ผ๊ณผ ํ์ง์ ์ ์งํ๋ ESLint์ Prettier ์ค์ ๋ฐฉ๋ฒ์ ์์ธํ ์๋ ค๋๋ ค์. ํ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ต์ ํ๋ ์ค์ ์ผ๋ก ๊ฐ๋ฐ ํจ์จ์ ๋์ฌ๋ณด์ธ์.
- ๋จ์ด: 2,022๊ฐ25๋ถ
[๐ค] JavaScript์ ํต์ฌ: ํ๋กํ ํ์ ์ฒด์ธ ์๋ฒฝ ์ดํด์ ํ์ฉ ์ ๋ต
JavaScript์ ์ฌ์ฅ๋ถ, ํ๋กํ ํ์ ์ฒด์ธ์ ๋์ ์๋ฆฌ๋ฅผ ๊น์ด ํ๊ณ ๋ค์ด ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ๊ณผ ์์์ ์๋ฒฝํ๊ฒ ์ดํดํ๊ณ ์ค๋ฌด์ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์. ์ฑ๋ฅ ์ต์ ํ ํ๋ ํจ๊ป ๋ค๋ค์.
- ๋จ์ด: 2,118๊ฐ22๋ถ
[๐ค] React ์ปค์คํ ํ : ์ฌ์ฌ์ฉ์ฑ ๋์ด๋ ์ค๊ณ ์์น๊ณผ ํ ์คํธ ์ ๋ต
React ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฌ์ฉ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ๊ทน๋ํํ๋ ์ปค์คํ ํ ์ค๊ณ ์์น, ์ค์ฉ์ ์ธ ํจํด, ๊ทธ๋ฆฌ๊ณ ๊ฒฌ๊ณ ํ ํ ์คํธ ์ ๋ต์ ์๋์ด ๊ฐ๋ฐ์์ ๊ด์ ์์ ์์ธํ ์ค๋ช ํด ๋๋ ค์.
- ๋จ์ด: 2,107๊ฐ23๋ถ
[๐ค] React useRef ํ ์ฌ์ธต ๋ถ์: DOM ๋์ด์ ์ค์ ํ์ฉ ์ ๋ต
React useRef ํ ์ ๊ธฐ๋ณธ ์๋ฆฌ๋ถํฐ DOM ์์ ์ง์ ์ ์ด, ์ปดํฌ๋ํธ ๋ผ์ดํ์ฌ์ดํด ๊ด๋ฆฌ, ๊ทธ๋ฆฌ๊ณ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ ๋ค์ํ ์ค์ ํ์ฉ ์ ๋ต๊น์ง ์ฌ์ธต์ ์ผ๋ก ๋ค๋ค์. ์ด์ค๊ธ ๊ฐ๋ฐ์๋ฅผ ์ํ useRef ์๋ฒฝ ๊ฐ์ด๋.
- ๋จ์ด: 1,762๊ฐ19๋ถ
[๐ค] Next.js 14/15์์ ๋์ OG ์ด๋ฏธ์ง ์์ฑ: ImageResponse ์๋ฒฝ ๊ฐ์ด๋
Next.js App Router ํ๊ฒฝ์์ ImageResponse๋ฅผ ํ์ฉํ์ฌ ๋์ OG ์ด๋ฏธ์ง๋ฅผ ํจ์จ์ ์ผ๋ก ์์ฑํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. SEO์ ์์ ๊ณต์ ์ต์ ํ๋ฅผ ์ํ ์ค์ ๊ฐ์ด๋์ ๋๋ค.
- ๋จ์ด: 1,442๊ฐ16๋ถ
[๐ค] TypeScript ํ์ ๊ฐ๋: ๋ฐํ์ ํ์ ์์ ์ฑ์ ์ํ ํ์ ํจํด ์ ๋ณตํด์
TypeScript์์ ๋ฐํ์์ ๋ณ์์ ํ์ ์ ์์ ํ๊ฒ ์ขํ๋(Narrowing) ๋ฐฉ๋ฒ์ธ ํ์ ๊ฐ๋(Type Guard)์ ๋ํด ์์ธํ ์์๋ด์. `typeof`, `instanceof`, `in` ์ฐ์ฐ์๋ถํฐ ์ฌ์ฉ์ ์ ์ ํ์ ๊ฐ๋๊น์ง, ์ค์ฉ์ ์ธ ์์์ ํจ๊ป ๊ฒฌ๊ณ ํ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ์ตํ๋ด์.
- ๋จ์ด: 2,542๊ฐ28๋ถ
[๐ค] React Query (TanStack Query) ์ฌํ: ๋ฐ์ดํฐ ํ์นญ, ์บ์ฑ, ๋๊ธฐํ ์ ๋ต์ผ๋ก ์น ์ฑ ์ฑ๋ฅ ๊ทน๋ํํด์
React Query (TanStack Query)๋ฅผ ํ์ฉํ์ฌ ๋ณต์กํ ์๋ฒ ์ํ๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๊ณ , ์ง๋ฅ์ ์ธ ์บ์ฑ๊ณผ ์๋ ๋๊ธฐํ ์ ๋ต์ผ๋ก ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ๊ณผ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ทน๋ํํ๋ ๋ฐฉ๋ฒ์ ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃจ์ด์. useQuery, useMutation, useInfiniteQuery ๋ฑ ํต์ฌ ํ ๊ณผ ์ค์ ์ต์ ํ ํ์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 2,401๊ฐ26๋ถ
[๐ค] React `useTransition`๊ณผ `useDeferredValue`๋ก ์ฌ์ฉ์ ๊ฒฝํ์ ๊ทน๋ํํ๋ ๋ฐฉ๋ฒ
React ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ฌด๊ฑฐ์ด UI ์ ๋ฐ์ดํธ๋ก ์ธํ ๋ฒ๋ฒ ์์ ํด๊ฒฐํ๊ณ , `useTransition`๊ณผ `useDeferredValue` ํ ์ ํ์ฉํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ์ ํ๊ธฐ์ ์ผ๋ก ๊ฐ์ ํ๋ ์ค์ฉ์ ์ธ ์ ๋ต์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 1,917๊ฐ22๋ถ
[๐ค] React Suspense์ ErrorBoundary: ๊ฒฌ๊ณ ํ๊ณ ๋ถ๋๋ฌ์ด UI ๊ฒฝํ์ ์ํ ์ค์ ๊ฐ์ด๋
React ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฌ์ฉ์ ๊ฒฝํ์ ํ์ ํ Suspense์ ErrorBoundary์ ๊ฐ๋ ฅํ ์กฐํฉ์ ๊น์ด ์๊ฒ ๋ค๋ค์. ๋ก๋ฉ ์ํ์ ์๋ฌ ์ฒ๋ฆฌ๋ฅผ ์ฐ์ํ๊ฒ ๊ด๋ฆฌํ์ฌ ๋์ฑ ๊ฒฌ๊ณ ํ๊ณ ๋ถ๋๋ฌ์ด UI๋ฅผ ๋ง๋๋ ์ค์ ํ๊ณผ ์ฝ๋ ์์๋ฅผ ํ์ธํด ๋ณด์ธ์.
- ๋จ์ด: 1,302๊ฐ16๋ถ
[๐ค] CSS Container Queries: ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ๋ฐ์ํ ๋์์ธ์ ์๋ก์ด ์งํ
๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ํ๊ณ๋ฅผ ๋์ด, ์ปดํฌ๋ํธ ์์ฒด์ ํฌ๊ธฐ์ ๋ฐ๋ผ ์คํ์ผ์ ์กฐ์ ํ๋ CSS Container Queries๋ฅผ ๊น์ด ์๊ฒ ์์๋ณด๊ณ ์ค๋ฌด ์ ์ฉ ๋ฐฉ๋ฒ์ ์๋ดํด ๋๋ ค์.
- ๋จ์ด: 1,681๊ฐ19๋ถ
[๐ค] Next.js 15 ๊ณ ๊ธ ๋ฐ์ดํฐ ์บ์ฑ ์ ๋ต: fetch์ revalidate ์ฌ์ธต ๋ถ์
Next.js 15์์ `fetch` API์ ๊ฐ๋ ฅํ ์บ์ฑ ๋ฉ์ปค๋์ฆ๊ณผ `revalidate` ์ต์ ์ ํ์ฉํ์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ์ต์ ํํ๊ณ ๋ฐ์ดํฐ๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃจ์ด์. ์ค๋ฌด ์์๋ฅผ ํตํด ์๋ฒ ์ปดํฌ๋ํธ์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ์์ ์บ์ฑ ์ ๋ต์ ํจ๊ณผ์ ์ผ๋ก ์ ์ฉํ๋ ํ์ ์ ๊ณตํด์.
๋จ์ด: 1,320๊ฐ14๋ถ[๐ค] Next.js App Router: generateStaticParams๋ก ๋์ ๋ผ์ฐํ ๋น๋ ์ต์ ํํ๊ธฐ
Next.js App Router์์ generateStaticParams ํจ์๋ฅผ ํ์ฉํ์ฌ ๋์ ๋ผ์ฐํ ์ ์ ์ ํ์ด์ง๋ฅผ ํจ์จ์ ์ผ๋ก ์์ฑํ๊ณ ๋น๋ ์ฑ๋ฅ์ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ์ค์ฉ์ ์ธ ์์์ ํจ๊ป ์์ธํ ์์๋ด์.
๋จ์ด: 1,891๊ฐ22๋ถ[๐ค] React ๋ ๋๋ง ์ต์ ํ: useMemo, useCallback, React.memo ์๋ฒฝ ๊ฐ์ด๋
์ด์ค๊ธ ๊ฐ๋ฐ์๋ฅผ ์ํ React ๋ ๋๋ง ์ต์ ํ ๊ฐ์ด๋. useMemo, useCallback, React.memo์ ์ ํํ ์ฌ์ฉ๋ฒ๊ณผ ์ค๋ฌด์์ ํํ ์ ์ง๋ฅด๋ ์ค์, ๊ทธ๋ฆฌ๊ณ ์ค์ ์ฑ๋ฅ ํฅ์ ์ ๋ต์ ๋ธ๋ฃจ๊ฐ ์๋ ค๋๋ ค์.
๋จ์ด: 2,145๊ฐ24๋ถ[๐ค] JavaScript Proxy์ Reflect ์ฌ์ธต ๋ถ์: ๋ฉํ ํ๋ก๊ทธ๋๋ฐ์ผ๋ก ์ฝ๋ ๊ฐํํ๊ธฐ
JavaScript Proxy์ Reflect API๋ฅผ ํ์ฉํ ๋ฉํ ํ๋ก๊ทธ๋๋ฐ ๊ธฐ๋ฒ์ ์ฌ์ธต ๋ถ์ํด์. ๊ฐ์ฒด ์ ๊ทผ ์ ์ด, ์ ํจ์ฑ ๊ฒ์ฌ, ๋ก๊น , ๋ฐ์ํ ์์คํ ๊ตฌํ ๋ฑ ์ค์ฉ์ ์ธ ํ์ฉ ์ฌ๋ก๋ฅผ ํตํด ์ฝ๋์ ์ ์ฐ์ฑ๊ณผ ์์ ์ฑ์ ๋์ด๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 2,029๊ฐ24๋ถ
[๐ค] React/Next.js ๋ฒ๋ค ์ต์ ํ: ์ฝ๋ ์คํ๋ฆฌํ ๊ณผ ๋ ์ด์ง ๋ก๋ฉ ์๋ฒฝ ๊ฐ์ด๋
React์ Next.js ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ ๋ก๋ฉ ์๋๋ฅผ ๊ฐ์ ํ๋ ์ฝ๋ ์คํ๋ฆฌํ ๊ณผ ๋ ์ด์ง ๋ก๋ฉ ๊ธฐ๋ฒ์ ์ค์ฉ์ ์ธ ์์์ ํจ๊ป ์์ธํ ์์๋ด์. ์นํฉ ์ค์ ๋ถํฐ React.lazy, Next.js dynamic import๊น์ง ๋ค๋ค์.
- ๋จ์ด: 1,770๊ฐ20๋ถ
[๐ค] React์ `useOptimistic` ํ ์ผ๋ก ๋๊ด์ UI ์ ๋ฐ์ดํธ ๊ตฌํํ๊ธฐ: Server Actions์ ํจ๊ป
React 18/19์ `useOptimistic` ํ ์ ํ์ฉํ์ฌ Server Actions์ ์ฐ๋๋๋ ๋๊ด์ UI ์ ๋ฐ์ดํธ๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์ค์ฉ์ ์ธ ์์์ ํจ๊ป ์์ธํ ์์๋ด์. ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐ์์ฑ์ ๋์ด๋ ๋ ธํ์ฐ๋ฅผ ๊ณต์ ํด์.
๋จ์ด: 1,561๊ฐ17๋ถ[๐ค] TypeScript const Type Parameters: ๋ฆฌํฐ๋ด ํ์ ์ถ๋ก ๊ฐํ์ ์ค์ฉ์ ์ธ ํ์ฉ๋ฒ
TypeScript 5.0์ ๋์ ๋ const Type Parameters๋ฅผ ํ์ฉํ์ฌ ์ ๋ค๋ฆญ ํจ์์ ๋ฆฌํฐ๋ด ํ์ ์ถ๋ก ์ ์ ๊ตํ๊ฒ ์ ์ดํ๊ณ , ๋์ฑ ๊ฒฌ๊ณ ํ ํ์ ์์คํ ์ ๊ตฌ์ถํ๋ ์ค์ฉ์ ์ธ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. as const์์ ์ฐจ์ด์ ๊ณผ ์ค์ ์ฝ๋ ์์๋ฅผ ํตํด ์ด์ค๊ธ ๊ฐ๋ฐ์๋ ์ฝ๊ฒ ์ดํดํ ์ ์๋๋ก ์ค๋ช ํด ๋๋ ค์.
- ๋จ์ด: 2,028๊ฐ22๋ถ
[๐ค] Next.js/React ์ฑ CLS ์ต์ ํ: ์ํํธ ์๋ ์ฌ์ฉ์ ๊ฒฝํ ๋ง๋ค๊ธฐ
Next.js์ React ์ ํ๋ฆฌ์ผ์ด์ ์์ Cumulative Layout Shift(CLS) ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๋ ์ค์ง์ ์ธ ์ ๋ต๊ณผ ์ฝ๋ ์์๋ฅผ ์์ธํ ์์๋ณด์ธ์. ์น ์ฑ๋ฅ ์ต์ ํ์ ํต์ฌ ์์์ธ CLS๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,740๊ฐ21๋ถ
[๐ค] Next.js SSR, SSG, ISR ๋ ๋๋ง ์ ๋ต: App Router์์ ์ต์ ์ ์ ํ์?
Next.js App Router์์ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง(SSR), ์ ์ ์ฌ์ดํธ ์์ฑ(SSG), ์ฆ๋ถ ์ ์ ์ฌ์์ฑ(ISR) ๊ฐ ๋ ๋๋ง ์ ๋ต์ ๋์ ์๋ฆฌ, ์ฅ๋จ์ , ์ค์ ํ์ฉ ๋ฐ ์ต์ ํ ๋ฐฉ๋ฒ์ ๋น๊ต ๋ถ์ํด๋๋ ค์.
- ๋จ์ด: 1,478๊ฐ17๋ถ
[๐ค] React Context API์ Zustand: ์ ์ญ ์ํ ๊ด๋ฆฌ, ์ธ์ ๋ฌด์์ ์จ์ผ ํ ๊น์?
React ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ญ ์ํ ๊ด๋ฆฌ๋ฅผ ๊ณ ๋ฏผํ๊ณ ๊ณ์ ๊ฐ์? Context API์ ๊ฐ๋ฒผ์ด ์ธ๋ถ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ Zustand๋ฅผ ๋น๊ต ๋ถ์ํ๊ณ , ์ค๋ฌด์์ ๊ฐ ๋๊ตฌ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ํ์ฉํ๋ ์ ๋ต์ ์ค์ ์ฝ๋ ์์์ ํจ๊ป ์์ธํ ์๋ ค๋๋ ค์.
- ๋จ์ด: 2,004๊ฐ24๋ถ
[๐ค] Turborepo๋ก Next.js ๋ชจ๋ ธ๋ ํฌ ๊ตฌ์ถ: ํจ์จ์ ์ธ ๊ฐ๋ฐ ๋ฐ ์ต์ ํ ์ ๋ต
Turborepo๋ฅผ ํ์ฉํ์ฌ Next.js ํ๋ก์ ํธ๋ฅผ ๋ชจ๋ ธ๋ ํฌ๋ก ๊ตฌ์ฑํ๊ณ , ๊ณต์ ์ปดํฌ๋ํธ, ์ ํธ๋ฆฌํฐ, CI/CD ์ต์ ํ ๋ฐฉ์์ ์ค๋ฌด ์์์ ํจ๊ป ์์ธํ ์ค๋ช ํด ๋๋ ค์.
- ๋จ์ด: 2,338๊ฐ27๋ถ
[๐ค] React useEffect ํ , ์ด์ ํท๊ฐ๋ฆฌ์ง ๋ง์ธ์! (์์กด์ฑ ๋ฐฐ์ด, ํด๋ฆฐ์ ์๋ฒฝ ๊ฐ์ด๋)
React ๊ฐ๋ฐ์์ ํ์์ ์ธ useEffect ํ ์ ๋์ ์๋ฆฌ๋ถํฐ ์์กด์ฑ ๋ฐฐ์ด, ํด๋ฆฐ์ ํจ์ ํ์ฉ๋ฒ, ๊ทธ๋ฆฌ๊ณ ์ค๋ฌด์์ ์์ฃผ ๊ฒช๋ ์ค์์ ์ต์ ํ ์ ๋ต๊น์ง, ์ด์ค๊ธ ๊ฐ๋ฐ์๋ฅผ ์ํ ์๋ฒฝ ๊ฐ์ด๋๋ฅผ ์ ๊ณตํด์.
- ๋จ์ด: 3,284๊ฐ31๋ถ
[๐ค] Next.js Server Actions ์ค์ : ์๋ฌ ์ฒ๋ฆฌ, ์ ํจ์ฑ ๊ฒ์ฌ, ๋๊ด์ UI ์ ๋ฐ์ดํธ
Next.js Server Actions๋ฅผ ์ค๋ฌด์ ์ ์ฉํ ๋ ๋ง์ฃผํ๋ ์๋ฌ ์ฒ๋ฆฌ, ๋ฐ์ดํฐ ์ ํจ์ฑ ๊ฒ์ฌ, ๊ทธ๋ฆฌ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๋ ๋๊ด์ UI ์ ๋ฐ์ดํธ ๊ธฐ๋ฒ์ ์์ธํ ์ฝ๋ ์์์ ํจ๊ป ์์๋ณด์ธ์.
๋จ์ด: 1,983๊ฐ21๋ถ[๐ค] TypeScript ์ ํธ๋ฆฌํฐ ํ์ ์๋ฒฝ ๊ฐ์ด๋: ์ค์ ํ์ฉ ํจํด
TypeScript ์ ํธ๋ฆฌํฐ ํ์ ์ ํต์ฌ ๊ฐ๋ ๊ณผ ์ค์ ํ์ฉ๋ฒ์ ๊น์ด ์๊ฒ ๋ค๋ค์. Pick, Omit, Partial, Required ๋ฑ ์์ฃผ ์ฐ๋ ์ ํธ๋ฆฌํฐ ํ์ ์ผ๋ก ๋ณต์กํ ํ์ ์ ํจ๊ณผ์ ์ผ๋ก ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์. ํ์ ์คํฌ๋ฆฝํธ ์ฝ๋์ ์ฌ์ฌ์ฉ์ฑ๊ณผ ์์ ์ฑ์ ๋์ด๋ ๋ ธํ์ฐ๋ฅผ ๊ณต์ ํด์.
- ๋จ์ด: 1,712๊ฐ20๋ถ
[๐ค] Next.js App Router ๋ฏธ๋ค์จ์ด: ๊ฐ๋ ฅํ ์์ฒญ ์ฒ๋ฆฌ ์ ๋ต๊ณผ ์ค์ ์์
Next.js App Router ํ๊ฒฝ์์ ๋ฏธ๋ค์จ์ด๋ฅผ ํ์ฉํด ์ฌ์ฉ์ ์ธ์ฆ, ๋ฆฌ๋ค์ด๋ ์ , ๊ตญ์ ํ ๋ฑ์ ์์ฒญ ์ฒ๋ฆฌ ๋ก์ง์ ํจ์จ์ ์ผ๋ก ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์ค์ ์์ ์ ํจ๊ป ์์ธํ ์์๋ณด์ธ์.
- ๋จ์ด: 1,630๊ฐ19๋ถ
[๐ค] ํ์ ์คํฌ๋ฆฝํธ ์ ๋ค๋ฆญ ์ฌํ: ์ค์ฉ์ ์ธ ํจํด๊ณผ ํํ ์คํด๋ค
ํ์ ์คํฌ๋ฆฝํธ ์ ๋ค๋ฆญ(Generics)์ ๊น์ด ์ดํดํ๊ณ , ์ค๋ฌด์์ ์์ฃผ ์ฌ์ฉ๋๋ ์ ๋ค๋ฆญ ํจํด๊ณผ ํํ ๊ฒช๋ ์คํด๋ค์ ์ค์ ์ฝ๋ ์์์ ํจ๊ป ์ฝ๊ณ ๋ช ํํ๊ฒ ์ค๋ช ํด ๋๋ ค์. ํ์ ์์ ์ฑ๊ณผ ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ์ ๋์ด๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
๋จ์ด: 1,860๊ฐ18๋ถ[๐ค] Next.js Route Handler: App Router์์ ์์ ํ๊ณ ํจ์จ์ ์ธ API ๊ตฌ์ถํ๊ธฐ (์ธ์ฆ, ์๋ฌ ์ฒ๋ฆฌ ํฌํจ)
Next.js App Router์ Route Handler๋ฅผ ์ฌ์ฉํ์ฌ API ์๋ํฌ์ธํธ๋ฅผ ๊ตฌ์ถํ๋ ๋ฐฉ๋ฒ์ ์์ธํ ์์๋ด์. ์ธ์ฆ, ์๋ฌ ์ฒ๋ฆฌ, ๊ทธ๋ฆฌ๊ณ ์บ์ฑ ์ ๋ต์ ํฌํจํ ์ค์ฉ์ ์ธ ํ์ผ๋ก ์์ ํ๊ณ ํจ์จ์ ์ธ ์๋ฒ๋ฆฌ์ค ํจ์๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์ตํ๋ด์.
- ๋จ์ด: 1,934๊ฐ22๋ถ
[๐ค] Next.js Image ์ปดํฌ๋ํธ ์ต์ ํ: Core Web Vitals ๊ฐ์ ๋ถํฐ ์ค์ ํ์ฉ๊น์ง
Next.js์ Image ์ปดํฌ๋ํธ๋ฅผ ํ์ฉํ์ฌ ์น ์ฑ๋ฅ ํต์ฌ ์งํ์ธ Core Web Vitals๋ฅผ ๊ฐ์ ํ๊ณ , ๋ค์ํ ์ต์ ํ ์ต์ ์ ์ค์ ํ๋ก์ ํธ์ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ธ๋ฃจ๊ฐ ์์ธํ ์๋ ค๋๋ ค์.
- ๋จ์ด: 2,187๊ฐ25๋ถ
[๐ค] Next.js 14.1+์ ํ์ : Partial Prerendering (PPR) ์๋ฒฝ ๊ฐ์ด๋์ ์ค์ ์ต์ ํ ์ ๋ต
Next.js 14.1๋ถํฐ ๋์ ๋ Partial Prerendering (PPR)์ ํตํด ์ด๊ธฐ ๋ก๋ฉ ์๋๋ฅผ ๊ทน๋ํํ๊ณ ๋์ ์ฝํ ์ธ ๋ฅผ ํจ์จ์ ์ผ๋ก ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์ฌ๋ ์๊ฒ ๋ค๋ฃจ์ด์. PPR์ ๋์ ์๋ฆฌ๋ถํฐ ์ค์ ํ๋ก์ ํธ ์ ์ฉ ์ ๋ต๊น์ง, ๊ฐ๋ฐ์๋ค์ด ๊ถ๊ธํดํ๋ ๋ชจ๋ ๊ฒ์ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,792๊ฐ19๋ถ
[๐ค] TypeScript ์กฐ๊ฑด๋ถ ํ์ ๊ณผ infer ํค์๋: ๋ณต์กํ ํ์ ๋ ์์ฝ๊ฒ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ
TypeScript ๊ฐ๋ฐ์์ ๋ง์ฃผํ๋ ๋ณต์กํ ํ์ ์ถ๋ก ๋ฌธ์ , ์กฐ๊ฑด๋ถ ํ์ ๊ณผ infer ํค์๋๋ฅผ ํ์ฉํ๋ฉด ํจ์ฌ ์ฐ์ํ๊ณ ๊ฐ๋ ฅํ๊ฒ ํด๊ฒฐํ ์ ์์ด์. ์ค์ ์์ ์ ํจ๊ป ๊ทธ ํ์ฉ๋ฒ์ ์ฌ๋ ์๊ฒ ๋ค๋ค๋ด ๋๋ค.
- ๋จ์ด: 1,705๊ฐ21๋ถ
[๐ค] JavaScript ์ด๋ฒคํธ ๋ฃจํ(Event Loop) ์์ ์ ๋ณต: ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ๋ฐํ์ ๋์ ์๋ฆฌ
JavaScript์ ํต์ฌ ๋น๋๊ธฐ ์ฒ๋ฆฌ ๋ฉ์ปค๋์ฆ์ธ ์ด๋ฒคํธ ๋ฃจํ์ ๋์ ์๋ฆฌ๋ฅผ ์ฌ๋ ์๊ฒ ํํค์ณ ๋ด์. ์ฝ ์คํ, ํ์คํฌ ํ, ๋ง์ดํฌ๋กํ์คํฌ ํ์์ ์ํธ์์ฉ์ ์ดํดํ๊ณ , ์ค๋ฌด์์ ๋ง์ฃผ์น๋ ๋น๋๊ธฐ ์ฝ๋์ ๋์์ ๋ช ํํ ์์ธกํ๋ ๋ฐฉ๋ฒ์ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,964๊ฐ23๋ถ
[๐ค] Next.js Server & Client Components, ์ค์ ์์ ํ๋ช ํ๊ฒ ์ ํํ๋ ๊ฐ์ด๋
Next.js App Router์์ Server Components์ Client Components ์ค ์ด๋ค ๊ฒ์ ์ฌ์ฉํด์ผ ํ ์ง ๊ณ ๋ฏผ์ด์ ๊ฐ์? ์ด ๊ธ์์ ๋ ์ปดํฌ๋ํธ์ ํต์ฌ ์ฐจ์ด์ , ์ฌ์ฉ ์์ , ๊ทธ๋ฆฌ๊ณ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ ์ค์ ์ ๋ต์ ๋ธ๋ฃจ๊ฐ ์๋ ค๋๋ฆด๊ฒ์.
- ๋จ์ด: 1,879๊ฐ21๋ถ
[๐ค] TypeScript satisfies ์ฐ์ฐ์: ํ์ ์ถ๋ก ๊ณผ ์์ ์ฑ์ ๋์์ ์ก๋ ๋น๋ฒ
TypeScript์ `satisfies` ์ฐ์ฐ์๋ฅผ ํ์ฉํ์ฌ ํ์ ์ถ๋ก ์ ์ ์ฐ์ฑ์ ์ ์งํ๋ฉด์๋ ์๊ฒฉํ ํ์ ์์ ์ฑ์ ํ๋ณดํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. ์ค์ฉ์ ์ธ ์์๋ฅผ ํตํด ์ค์ ํ๋ก์ ํธ์ ์ ์ฉํ๋ ๋ ธํ์ฐ๋ฅผ ๊ณต์ ํฉ๋๋ค.
- ๋จ์ด: 1,211๊ฐ15๋ถ
[๐ค] React 19 ์๋ก์ด ๊ธฐ๋ฅ: use ํ , Actions, ๊ทธ๋ฆฌ๊ณ ์ปดํ์ผ๋ฌ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
React 19์ ํต์ฌ ๋ณ๊ฒฝ ์ฌํญ์ธ use ํ , ์๋ฒ ์ก์ , ๊ทธ๋ฆฌ๊ณ React ์ปดํ์ผ๋ฌ์ ๋์ ๋ฐฐ๊ฒฝ๊ณผ ์ค์ ํ์ฉ ์์๋ฅผ ์ด์ค๊ธ ๊ฐ๋ฐ์ ๋๋์ด์ ๋ง์ถฐ ์์ธํ ์ค๋ช ํฉ๋๋ค. ์ต์ React ์ ๋ฐ์ดํธ๋ฅผ ํตํด ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ๊ณผ ๊ฐ๋ฐ ๊ฒฝํ์ ํฅ์์ํค๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
- ๋จ์ด: 1,524๊ฐ16๋ถ
[๐ค] Next.js App Router ์บ์ฑ ์ ๋ต: ๋ฐ์ดํฐ ์ฌ๊ฒ์ฆ (revalidatePath, revalidateTag) ์๋ฒฝ ๊ฐ์ด๋
Next.js 14 App Router์์ ํจ์จ์ ์ธ ๋ฐ์ดํฐ ์บ์ฑ ์ ๋ต๊ณผ revalidatePath, revalidateTag๋ฅผ ์ด์ฉํ ๋ฐ์ดํฐ ์ฌ๊ฒ์ฆ ๋ฐฉ๋ฒ์ ์ค๋ฌด ์์์ ํจ๊ป ์์ธํ ์์๋ณด๊ณ ์น ์ฑ๋ฅ์ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.