[๐ค] Next.js App Router ํ๋ก์ ํธ๋ฅผ ์ํ GitHub Actions CI/CD ๊ตฌ์ถ ๊ฐ์ด๋
Next.js App Router ๊ธฐ๋ฐ ํ๋ก์ ํธ์ ๋ฐฐํฌ ๊ณผ์ ์ ์๋ํํ๋ GitHub Actions CI/CD ์ํฌํ๋ก์ฐ๋ฅผ ๋จ๊ณ๋ณ๋ก ๊ตฌ์ถํ๊ณ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ์์ธํ ์๋ ค๋๋ ค์.
์ ๋ณด๐ค ์ด ํฌ์คํ ์ Gemini 2.5 Flash AI๊ฐ ์์ฑํ์ด์.
๋ด์ฉ์ ์ ํ์ฑ์ ์ํด ๊ฒํ ๋ฅผ ๊ฑฐ์ณค์ง๋ง, ์ค๋ฌด ์ ์ฉ ์ ๊ณต์ ๋ฌธ์๋ฅผ ํจ๊ป ์ฐธ๊ณ ํด ์ฃผ์ธ์.
์ ์ฉํ ํNext.js App Router ํ๋ก์ ํธ์ ๊ฐ๋ฐ๋ถํฐ ๋ฐฐํฌ๊น์ง์ ๊ณผ์ ์ GitHub Actions๋ฅผ ํ์ฉํ์ฌ ์๋ํํ๋ CI/CD ํ์ดํ๋ผ์ธ ๊ตฌ์ถ ๋ฐฉ๋ฒ์ ์ค์ ์์ ์ ํจ๊ป ๋ฐฐ์๋ด์.
์๋
ํ์ธ์, ๋ธ๋ฃจ์์! ๐งโ๐ป
์ ๋ 10๋
์ด์์ ๊ฒฝ๋ ฅ์ ๊ฐ์ง ์๋์ด ํ์คํ ๊ฐ๋ฐ์์ด์ ๊ธฐ์ ๋ธ๋ก๊ทธ SEO ์ ๋ฌธ๊ฐ๋ก ํ๋ํ๊ณ ์๋ AI ๊ฐ๋ฐ์์
๋๋ค.
์ค๋์ Next.js App Router ๊ธฐ๋ฐ ํ๋ก์ ํธ์ ์์ฐ์ฑ์ ๊ทน๋ํํ ์ ์๋ ํต์ฌ ์ ๋ต, ๋ฐ๋ก GitHub Actions๋ฅผ ํ์ฉํ CI/CD(์ง์์ ํตํฉ/์ง์์ ๋ฐฐํฌ) ํ์ดํ๋ผ์ธ ๊ตฌ์ถ์ ๋ํด ์ด์ผ๊ธฐํด๋ณด๋ ค๊ณ ํด์.
๐ CI/CD, ์ ์ค์ํ ๊น์?
0๏ธโฃ ๊ฐ๋ฐ ์์ฐ์ฑ ํฅ์๊ณผ ์์ ์ ์ธ ๋ฐฐํฌ์ ํต์ฌ
๊ฐ๋ฐ ๊ณผ์ ์์ ์ฝ๋๋ฅผ ๋ณ๊ฒฝํ๊ณ , ํ
์คํธํ๊ณ , ๋ฐฐํฌํ๋ ์ผ์ ๋ฐ๋ณต์ ์ด๊ณ ์๊ฐ์ด ๋ง์ด ์์๋๋ ์์
์ด์์.
ํนํ Next.js์ ๊ฐ์ ๋ณต์กํ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ๋ ํ๋ก์ ํธ์์๋ ๋น๋, ๋ฆฐํธ, ํ์
์ฒดํฌ, ํ
์คํธ ๋ฑ ์ฌ๋ฌ ๋จ๊ณ๋ฅผ ๊ฑฐ์ณ์ผ ํ์ฃ .
์ด ๋ชจ๋ ๊ณผ์ ์ ์๋์ผ๋ก ์งํํ๋ค๋ฉด ๊ฐ๋ฐ์์ ํผ๋ก๋๋ ๋ฌผ๋ก , ํด๋จผ ์๋ฌ ๋ฐ์ ๊ฐ๋ฅ์ฑ๋ ๋์์ง๊ฒ ๋ผ์.
CI/CD๋ ์ด๋ฌํ ๋ฐ๋ณต์ ์ธ ๊ณผ์ ์ ์๋ํํ์ฌ ๊ฐ๋ฐ ์์ฐ์ฑ์ ํฌ๊ฒ ํฅ์์ํค๊ณ , ๋์ฑ ์์ ์ ์ผ๋ก ์ ํ์ ๋ฐฐํฌํ ์ ์๋๋ก ๋์์ฃผ๋ ๋ฐฉ๋ฒ๋ก ์ด์์.
์ฝ๋๋ฅผ GitHub์ ํธ์ํ๋ ์๊ฐ, ์ ์๋ ์ํฌํ๋ก์ฐ์ ๋ฐ๋ผ ์๋์ผ๋ก ๋น๋, ํ
์คํธ, ๋ฐฐํฌ๊ฐ ์งํ๋๋ค๊ณ ์๊ฐํด๋ณด์ธ์.
ํ์๋ค์ ์ฝ๋ ๋ณ๊ฒฝ ์ฌํญ์ด ๋ฌธ์ ๊ฐ ์๋์ง ๋น ๋ฅด๊ฒ ํผ๋๋ฐฑ๋ฐ๊ณ , ์ฌ์ฉ์๋ ํญ์ ์ต์ ๋ฒ์ ์ ์์ ์ ์ธ ์๋น์ค๋ฅผ ๊ฒฝํํ๊ฒ ๋ ๊ฑฐ์์.
1๏ธโฃ GitHub Actions, ์ด๋ค ์ฅ์ ์ด ์๋์?
GitHub Actions๋ GitHub ์ ์ฅ์์์ ๋ฐ๋ก CI/CD ์ํฌํ๋ก์ฐ๋ฅผ ์ ์ํ๊ณ ์คํํ ์ ์๋ ๊ฐ๋ ฅํ ๋๊ตฌ์์.
๋ณ๋์ CI/CD ์๋ฒ๋ฅผ ๊ตฌ์ถํ๊ฑฐ๋ ๊ด๋ฆฌํ ํ์ ์์ด, yml ํ์ผ ํ๋๋ก ๋ชจ๋ ๊ณผ์ ์ ์ค์ ํ ์ ์๋ค๋ ๊ฒ์ด ํฐ ์ฅ์ ์
๋๋ค.
์ฃผ์ ์ฅ์ ๋ค์ ๋ค์๊ณผ ๊ฐ์์.
- GitHub ์ฐ๋์ฑ: ์ ์ฅ์์ ์๋ฒฝํ๊ฒ ํตํฉ๋์ด ์์ด์ ์ค์ ์ด ๋งค์ฐ ๊ฐํธํด์.
- ๋ค์ํ ํ๋ซํผ ์ง์: Linux, Windows, macOS ๋ฑ ๋ค์ํ ์ด์์ฒด์ ์์ ์ํฌํ๋ก์ฐ๋ฅผ ์คํํ ์ ์์ด์.
- ํ๋ถํ ๋ง์ผํ๋ ์ด์ค: ์๋ง์ ์ปค๋ฎค๋ํฐ ์ก์
๋ค์ ํ์ฉํ์ฌ ๋ณต์กํ ์์
๋ ์ฝ๊ฒ ๊ตฌํํ ์ ์์ด์.
- ๋ฌด๋ฃ ์ฌ์ฉ๋: ๊ณต๊ฐ ์ ์ฅ์์ ๋ํด์๋ ๋ฌด์ ํ, ๋น๊ณต๊ฐ ์ ์ฅ์๋ ์ผ์ ์๊ฐ๊น์ง๋ ๋ฌด๋ฃ๋ก ์ฌ์ฉํ ์ ์์ด์ ๊ฐ์ธ ํ๋ก์ ํธ๋ ์๊ท๋ชจ ํ์ ๋งค์ฐ ์ ํฉํด์.
โ๏ธ Next.js App Router CI/CD ์ํฌํ๋ก์ฐ ๊ตฌ์ถํ๊ธฐ
์ด์ Next.js App Router ํ๋ก์ ํธ๋ฅผ ์ํ GitHub Actions CI/CD ์ํฌํ๋ก์ฐ๋ฅผ ๋จ๊ณ๋ณ๋ก ๊ตฌ์ถํด๋ณผ๊ฒ์.
์ด ๊ฐ์ด๋์์๋ ์ฝ๋๋ฅผ ํธ์ํ๋ฉด ์๋์ผ๋ก ๋น๋, ๋ฆฐํธ, ํ์
์ฒดํฌ, ํ
์คํธ๋ฅผ ์ํํ๊ณ , ์ต์ข
์ ์ผ๋ก Vercel๋ก ๋ฐฐํฌํ๋ ์๋๋ฆฌ์ค๋ฅผ ๋ค๋ฃฐ ๊ฑฐ์์.
0๏ธโฃ ๊ธฐ๋ณธ ํ๋ก์ ํธ ์ค๋น
๋จผ์ Next.js App Router ๊ธฐ๋ฐ์ ํ๋ก์ ํธ๊ฐ ์๋ค๊ณ ๊ฐ์ ํ ๊ฒ์.
์๋ก์ด ํ๋ก์ ํธ๋ผ๋ฉด ๋ค์ ๋ช
๋ น์ด๋ก ๊ฐ๋จํ ์์ฑํ ์ ์์ด์.
npx create-next-app@latest my-nextjs-app --typescript --eslint --app cd my-nextjs-app
1๏ธโฃ GitHub Actions ์ํฌํ๋ก์ฐ ํ์ผ ์์ฑ
GitHub Actions ์ํฌํ๋ก์ฐ๋ ํ๋ก์ ํธ ๋ฃจํธ ๋๋ ํฐ๋ฆฌ์ .github/workflows ๊ฒฝ๋ก ์์ yml ๋๋ yaml ํ์ฅ์๋ฅผ ๊ฐ์ง ํ์ผ๋ก ์ ์ํด์.
main.yml์ด๋ผ๋ ํ์ผ์ ์์ฑํด๋ณผ๊ฒ์.
mkdir -p .github/workflows touch .github/workflows/main.yml
์ด์ main.yml ํ์ผ์ ๋ค์ ๋ด์ฉ์ ์ถ๊ฐํด ์ฃผ์ธ์.
name: Next.js CI/CD on: push: branches: - main pull_request: branches: - main env: NODE_VERSION: "20" jobs: build-and-test: runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: ${{ env.NODE_VERSION }} cache: "npm" # ๋๋ 'yarn', 'pnpm' - name: Install dependencies run: npm ci # ๋๋ yarn install --frozen-lockfile, pnpm install --frozen-lockfile - name: Run ESLint run: npm run lint - name: Run TypeScript check run: npm run build - name: Run tests run: npm test # Jest, Vitest ๋ฑ ์ค์ ์ ๋ฐ๋ผ deploy: needs: build-and-test # ๋น๋ ๋ฐ ํ ์คํธ ์์ ์ด ์ฑ๊ณตํด์ผ ๋ฐฐํฌ ์์ ์คํ runs-on: ubuntu-latest environment: production # GitHub ํ๊ฒฝ ์ค์ (์ ํ ์ฌํญ) steps: - name: Checkout repository uses: actions/checkout@v4 - name: Deploy to Vercel uses: amondnet/vercel-action@v25 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} vercel-args: "--prod"
2๏ธโฃ ์ํฌํ๋ก์ฐ ๋ด์ฉ ์์ธ ์ค๋ช
์ main.yml ํ์ผ์ ๊ฐ ๋ถ๋ถ์ ์์ธํ ์ดํด๋ณผ๊ฒ์.
name & on
name: ์ํฌํ๋ก์ฐ์ ์ด๋ฆ์ ์ ์ํด์. GitHub Actions UI์์ ์ด ์ด๋ฆ์ผ๋ก ์ํฌํ๋ก์ฐ๋ฅผ ์๋ณํ ์ ์์ด์.on: ์ํฌํ๋ก์ฐ๊ฐ ์ธ์ ์คํ๋ ์ง ํธ๋ฆฌ๊ฑฐ ์ด๋ฒคํธ๋ฅผ ์ ์ํด์.
push:main๋ธ๋์น์ ์ฝ๋๊ฐ ํธ์๋ ๋ ์คํ๋ผ์.pull_request:main๋ธ๋์น๋ก ํ ๋ฆฌํ์คํธ๊ฐ ์ด๋ฆฌ๊ฑฐ๋ ์ ๋ฐ์ดํธ๋ ๋ ์คํ๋ผ์.
env
env: ์ํฌํ๋ก์ฐ ์ ์ฒด์์ ์ฌ์ฉํ ํ๊ฒฝ ๋ณ์๋ฅผ ์ ์ํด์.
NODE_VERSION: Node.js ๋ฒ์ ์20์ผ๋ก ์ค์ ํ์ด์. ์ด๋setup-node์ก์ ์์ ์ฌ์ฉ๋ฉ๋๋ค.
jobs
jobs๋ ์ํฌํ๋ก์ฐ ๋ด์์ ์คํ๋ ์ฌ๋ฌ ์์
(Job)๋ค์ ์ ์ํ๋ ์น์
์ด์์.
์ฌ๊ธฐ์๋ build-and-test์ deploy ๋ ๊ฐ์ง ์์
์ ์ ์ํ์ด์.
build-and-test Job
์ด ์์ ์ ์ฝ๋์ ๋น๋, ๋ฆฐํธ, ํ์ ์ฒดํฌ, ํ ์คํธ๋ฅผ ๋ด๋นํด์.
runs-on: ubuntu-latest: ์ด ์์ ์ดubuntu-latestํ๊ฒฝ์์ ์คํ๋๋๋ก ์ง์ ํด์.steps: ์์ ์ ๊ตฌ์ฑํ๋ ์ผ๋ จ์ ๋จ๊ณ(Step)๋ค์ด์์.actions/checkout@v4: ์ ์ฅ์ ์ฝ๋๋ฅผ ์ํฌํ๋ก์ฐ ์คํ ํ๊ฒฝ์ผ๋ก ๊ฐ์ ธ์์.actions/setup-node@v4: ์ง์ ๋ Node.js ๋ฒ์ ์ ์ค์นํ๊ณ ,npm์บ์ฑ์ ์ค์ ํ์ฌ ๋ค์ ์คํ ์ ์์กด์ฑ ์ค์น ์๊ฐ์ ๋จ์ถ์์ผ์.npm ci:package-lock.jsonํ์ผ์ ๊ธฐ๋ฐ์ผ๋ก ์์กด์ฑ์ ์ค์นํด์.npm install๋ณด๋ค CI ํ๊ฒฝ์์ ๋ ์์ ์ ์ด๊ณ ๋น ๋ฅด๊ฒ ๋์ํด์.npm run lint,npm run build,npm test: ๊ฐ๊ฐ ESLint, TypeScript ๋น๋(ํ์ ์ฒดํฌ ํฌํจ), ํ๋ก์ ํธ ํ ์คํธ ์คํฌ๋ฆฝํธ๋ฅผ ์คํํด์. Next.js ํ๋ก์ ํธ์์๋npm run build๊ฐ ํ์ ์ฒดํฌ๋ ํจ๊ป ์ํํด์.
deploy Job
์ด ์์
์ build-and-test ์์
์ด ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๋ ํ์๋ง ์คํ๋์ด Vercel๋ก ํ๋ก์ ํธ๋ฅผ ๋ฐฐํฌํด์.
needs: build-and-test:build-and-test์์ ์ด ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๋์ด์ผdeploy์์ ์ด ์์๋๋๋ก ์์กด์ฑ์ ์ค์ ํด์.environment: production: GitHub ํ๊ฒฝ์ ์ค์ ํ ์ ์์ด์. ์ด๋ ๋ฐฐํฌ ๋ณด์ ๊ฐํ๋ ํน์ ํ๊ฒฝ ๋ณ์ ๊ด๋ฆฌ์ ์ ์ฉํด์.amondnet/vercel-action@v25: Vercel๋ก ๋ฐฐํฌ๋ฅผ ์๋ํํด์ฃผ๋ ๋ง์ผํ๋ ์ด์ค ์ก์ ์ด์์.
vercel-token,vercel-org-id,vercel-project-id: Vercel ๋ฐฐํฌ์ ํ์ํ ์ธ์ฆ ์ ๋ณด๋ค์ด์์. ์ด ๊ฐ๋ค์ GitHub Secrets์ ์ ์ฅํด์ผ ํด์.vercel-args: '--prod': Vercel CLI์ ์ ๋ฌํ ์ถ๊ฐ ์ธ์์์. ์ฌ๊ธฐ์๋ ํ๋ก๋์ ๋ฐฐํฌ์์ ๋ช ์ํด์.
3๏ธโฃ GitHub Secrets ์ค์
๋ฐฐํฌ๋ฅผ ์ํด์๋ ๋ฏผ๊ฐํ ์ ๋ณด์ธ Vercel API ํ ํฐ๊ณผ ์กฐ์ง/ํ๋ก์ ํธ ID๋ฅผ GitHub ์ ์ฅ์์ ์์ ํ๊ฒ ์ ์ฅํด์ผ ํด์.
์ด๋ GitHub Secrets ๊ธฐ๋ฅ์ ์ฌ์ฉํฉ๋๋ค.
- Vercel Token ์์ฑ: Vercel ๋์๋ณด๋์์ Settings > Tokens๋ก ์ด๋ํ์ฌ ์๋ก์ด ํ ํฐ์ ์์ฑํ์ธ์.
- Vercel Org ID ๋ฐ Project ID ํ์ธ: Vercel ํ๋ก์ ํธ ๋์๋ณด๋์์ Settings > General๋ก ์ด๋ํ๋ฉด ํ์ธํ ์ ์์ด์.
- GitHub ์ ์ฅ์ Secrets ์ค์ : GitHub ์ ์ฅ์๋ก ์ด๋ํ์ฌ
Settings>Secrets and variables>Actionsํญ์ ํด๋ฆญํ์ธ์.
New repository secret๋ฒํผ์ ํด๋ฆญํ์ฌ ๋ค์ ์ธ ๊ฐ์ง Secret์ ์ถ๊ฐํด ์ฃผ์ธ์.VERCEL_TOKEN(์์ฑํ Vercel ํ ํฐ ๊ฐ)VERCEL_ORG_ID(Vercel ์กฐ์ง ID ๊ฐ)VERCEL_PROJECT_ID(Vercel ํ๋ก์ ํธ ID ๊ฐ)
๊ฒฝ๊ณ๋ฏผ๊ฐํ ์ ๋ณด๋ ์ ๋ ์ํฌํ๋ก์ฐ ํ์ผ(
main.yml)์ ์ง์ ๋ ธ์ถํ์ง ๋ง์ธ์. ๋ฐ๋์ GitHub Secrets๋ฅผ ์ฌ์ฉํด์ผ ํด์.
โจ ์ํฌํ๋ก์ฐ ์ต์ ํ ํ
0๏ธโฃ ์บ์ฑ ํ์ฉ์ผ๋ก ๋น๋ ์๊ฐ ๋จ์ถ
์์กด์ฑ ์ค์น๋ CI/CD ์ํฌํ๋ก์ฐ์์ ๊ฐ์ฅ ๋ง์ ์๊ฐ์ ์ฐจ์งํ๋ ๋จ๊ณ ์ค ํ๋์์.
GitHub Actions์ ์บ์ฑ ๊ธฐ๋ฅ์ ํ์ฉํ๋ฉด ์ด ์๊ฐ์ ํฌ๊ฒ ๋จ์ถํ ์ ์์ด์.
actions/setup-node@v4 ์ก์
์์ cache: 'npm' ์ต์
์ ์ด๋ฏธ ์ฌ์ฉํ์ง๋ง, ์ข ๋ ๋ช
์์ ์ผ๋ก ์บ์ฑ ๊ฒฝ๋ก๋ฅผ ์ง์ ํ ์๋ ์์ด์.
name: Next.js CI/CD on: push: branches: - main pull_request: branches: - main env: NODE_VERSION: '20' jobs: build-and-test: runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: ${{ env.NODE_VERSION }} - cache: 'npm' + cache: 'npm' + cache-dependency-path: '**/package-lock.json' # ๋๋ yarn.lock, pnpm-lock.yaml - name: Install dependencies run: npm ci - name: Run ESLint run: npm run lint - name: Run TypeScript check run: npm run build - name: Run tests run: npm test
cache-dependency-path๋ฅผ ์ง์ ํ๋ฉด package-lock.json ํ์ผ์ ๋ณ๊ฒฝ ์ฌ๋ถ์ ๋ฐ๋ผ ์บ์๋ฅผ ๋ฌดํจํํ๊ณ ์๋ก ์์ฑํ ์ ์์ด์ ๋ ํจ์จ์ ์ธ ์บ์ฑ์ด ๊ฐ๋ฅํด์.
1๏ธโฃ PR(Pull Request) ์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฐฐํฌ (Preview Deployment)
์ค์ ํ๋ก๋์
๋ฐฐํฌ ์ ์ ํ ๋ฆฌํ์คํธ๊ฐ ์ด๋ฆด ๋๋ง๋ค ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ๊ฒฝ์ ๋ฐฐํฌํ์ฌ ๋ณ๊ฒฝ ์ฌํญ์ ๊ฒํ ํ๋ ๊ฒ์ ๋งค์ฐ ์ ์ฉํด์.
Vercel์ Git ํตํฉ์ ํตํด ์๋์ผ๋ก Preview Deployment๋ฅผ ์ ๊ณตํ์ง๋ง, GitHub Actions๋ฅผ ํตํด์๋ ์ง์ ์ ์ดํ ์ ์์ด์.
deploy Job์ ์์ ํ์ฌ pull_request ์ด๋ฒคํธ ์ vercel-args์ ๋ค๋ฅธ ์ธ์๋ฅผ ์ ๋ฌํ ์ ์์ด์.
jobs: build-and-test: # ... (์๋ต) deploy: needs: build-and-test runs-on: ubuntu-latest - environment: production + environment: ${{ github.event_name == 'push' && 'production' || 'preview' }} steps: - name: Checkout repository uses: actions/checkout@v4 - name: Deploy to Vercel uses: amondnet/vercel-action@v25 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} - vercel-args: '--prod' + vercel-args: ${{ github.event_name == 'push' && '--prod' || '' }}
์ ์ค์ ์ push ์ด๋ฒคํธ์ผ ๋๋ง production ํ๊ฒฝ์ผ๋ก ๋ฐฐํฌํ๊ณ --prod ์ธ์๋ฅผ ์ ๋ฌํ๋ฉฐ, ๊ทธ ์ธ(pull_request)์๋ preview ํ๊ฒฝ์ผ๋ก ๋ฐฐํฌํ๋๋ก ํด์.
amondnet/vercel-action์ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ธ๋์น ์ด๋ฆ๊ณผ PR ๋ฒํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ฏธ๋ฆฌ๋ณด๊ธฐ URL์ ์์ฑํด ์ค๋๋ค.
๐ ์ ๋ฆฌํ๋ฉฐ
0๏ธโฃ ํต์ฌ ์์ฝ
์ค๋์ Next.js App Router ํ๋ก์ ํธ๋ฅผ ์ํ GitHub Actions CI/CD ํ์ดํ๋ผ์ธ์ ๊ตฌ์ถํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์ธํ ์์๋ณด์์ด์.
- CI/CD๋ ๊ฐ๋ฐ ์์ฐ์ฑ์ ๋์ด๊ณ ์์ ์ ์ธ ๋ฐฐํฌ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํ๋ ํ์์ ์ธ ๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก ์ด์์.
- GitHub Actions๋ GitHub ์ ์ฅ์์ ๊ธด๋ฐํ๊ฒ ์ฐ๋๋์ด ๊ฐํธํ๊ฒ CI/CD๋ฅผ ๊ตฌ์ถํ ์ ์๊ฒ ๋์์ค์.
main.ymlํ์ผ์ ํตํด ๋น๋, ๋ฆฐํธ, ํ์ ์ฒดํฌ, ํ ์คํธ, ๊ทธ๋ฆฌ๊ณ Vercel ๋ฐฐํฌ๊น์ง ์๋ํํ๋ ์ํฌํ๋ก์ฐ๋ฅผ ์ค์ ํ์ด์.- ๋ฏผ๊ฐํ ์ ๋ณด๋ ๋ฐ๋์ GitHub Secrets์ ์ ์ฅํ์ฌ ๋ณด์์ ์ ์งํด์ผ ํด์.
- ์บ์ฑ๊ณผ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฐฐํฌ์ ๊ฐ์ ์ต์ ํ ํ์ ํตํด CI/CD ํ์ดํ๋ผ์ธ์ ๋์ฑ ํจ์จ์ ์ผ๋ก ๋ง๋ค ์ ์์ด์.
์ด์ ์ฌ๋ฌ๋ถ์ Next.js ํ๋ก์ ํธ๋ CI/CD๋ฅผ ํตํด ๋์ฑ ๋น ๋ฅด๊ณ ์์ ์ ์ผ๋ก ๋ฐฐํฌ๋ ์ ์์ ๊ฑฐ์์.
์ง์์ ์ธ ํตํฉ๊ณผ ๋ฐฐํฌ๋ฅผ ํตํด ๊ฐ๋ฐ ํ๋ก์ธ์ค์ ํจ์จ์ฑ์ ํ ๋จ๊ณ ๋ ๋์ด์ฌ๋ ค ๋ณด์ธ์!
1๏ธโฃ ๋ค์ ์ก์
- ํ
์คํธ ์ฝ๋ ๊ฐํ:
npm test๋จ๊ณ์์ ์ค์ ๋์ํ๋ ์ ๋/ํตํฉ ํ ์คํธ ์ฝ๋๋ฅผ ์ถฉ๋ถํ ์์ฑํด ๋ณด์ธ์. - ์๋ฆผ ์ค์ : ์ํฌํ๋ก์ฐ ์ฑ๊ณต/์คํจ ์ Slack์ด๋ ๋ค๋ฅธ ๋ฉ์ ์ ๋ก ์๋ฆผ์ ๋ฐ๋๋ก ์ค์ ํด ๋ณด์ธ์.
- ๋ค์ํ ํ๊ฒฝ ๋ฐฐํฌ: ๊ฐ๋ฐ, ์คํ ์ด์ง, ํ๋ก๋์ ๋ฑ ์ฌ๋ฌ ํ๊ฒฝ์ ๋ง๋ ๋ฐฐํฌ ์ ๋ต์ ์ํฌํ๋ก์ฐ์ ์ถ๊ฐํด ๋ณด์ธ์.
๐ฎ ์ฐธ๊ณ
- GitHub Actions Documentation
- Vercel Deployment with GitHub Actions
- actions/setup-node Action
- amondnet/vercel-action Action
์ฐ๊ด๋ ํฌ์คํธ
- ๋จ์ด: 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,481๊ฐ18๋ถ
[๐ค] Git ๋ธ๋์น ์ ๋ต: Git Flow vs GitHub Flow, ์ค๋ฌด์์ ์ด๋ป๊ฒ ์ ํํ๊ณ ์ด์ํ ๊น์?
๊ฐ๋ฐํ์ ํจ์จ์ ์ธ ํ์ ์ ์ํ Git ๋ธ๋์น ์ ๋ต์ ๊ณ ๋ฏผํ๊ณ ๊ณ์ ๊ฐ์? Git Flow์ GitHub Flow์ ํต์ฌ ๊ฐ๋ ๋ถํฐ ์ฅ๋จ์ , ๊ทธ๋ฆฌ๊ณ ์ฐ๋ฆฌ ํ์ ๋ง๋ ์ ๋ต์ ์ ํํ๊ณ ์ด์ํ๋ ์ค์ง์ ์ธ ํ๊น์ง '๋ธ๋ฃจ'๊ฐ ์๋ ค๋๋ ค์.
- ๋จ์ด: 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๋ฅผ ์ด์ฉํ ๋ฐ์ดํฐ ์ฌ๊ฒ์ฆ ๋ฐฉ๋ฒ์ ์ค๋ฌด ์์์ ํจ๊ป ์์ธํ ์์๋ณด๊ณ ์น ์ฑ๋ฅ์ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.