Skip to content

chan-ok/blog

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

153 Commits
.husky
.husky
Β 
Β 
.kiro
.kiro
Β 
Β 
.storybook
.storybook
Β 
Β 
.vscode
.vscode
Β 
Β 
docs
docs
Β 
Β 
netlify/functions
netlify/functions
Β 
Β 
public
public
Β 
Β 
src
src
Β 
Β 
.gitignore
.gitignore
Β 
Β 
.prettierignore
.prettierignore
Β 
Β 
README.md
README.md
Β 
Β 
chromatic.config.json
chromatic.config.json
Β 
Β 
eslint.config.ts
eslint.config.ts
Β 
Β 
lint-staged.config.ts
lint-staged.config.ts
Β 
Β 
netlify.toml
netlify.toml
Β 
Β 
next.config.ts
next.config.ts
Β 
Β 
package.json
package.json
Β 
Β 
playwright.config.ts
playwright.config.ts
Β 
Β 
pnpm-lock.yaml
pnpm-lock.yaml
Β 
Β 
pnpm-workspace.yaml
pnpm-workspace.yaml
Β 
Β 
postcss.config.js
postcss.config.js
Β 
Β 
prettier.config.ts
prettier.config.ts
Β 
Β 
tsconfig.base.json
tsconfig.base.json
Β 
Β 
tsconfig.json
tsconfig.json
Β 
Β 
vitest.config.ts
vitest.config.ts
Β 
Β 
vitest.setup.ts
vitest.setup.ts
Β 
Β 
vitest.shims.d.ts
vitest.shims.d.ts
Β 
Β 

Repository files navigation

Chanho's Dev Blog

Netlify Status

πŸ“– ν”„λ‘œμ νŠΈ μ†Œκ°œ

Next.js 16 기반의 개인 개발 λΈ”λ‘œκ·Έλ‘œ, Feature-Sliced Design(FSD) μ•„ν‚€ν…μ²˜μ™€ 이쀑 리포지터리 ꡬ쑰λ₯Ό νŠΉμ§•μœΌλ‘œ ν•©λ‹ˆλ‹€.

ν•­λͺ© λ‚΄μš©
ν”„λ ˆμž„μ›Œν¬ Next.js 16.0.10 + React 19.2.3
μŠ€νƒ€μΌλ§ Tailwind CSS v4
μƒνƒœ 관리 Zustand
ν…ŒμŠ€νŒ… Vitest + Playwright + Storybook
배포 Netlify

λͺ©μ 

  • πŸ“š 개인용 개발 λΈ”λ‘œκ·Έ 운영
  • πŸš€ λͺ¨λ˜ν•œ ν”„λ‘ νŠΈμ—”λ“œ κΈ°μˆ μŠ€νƒ 체득
  • 🌐 기술 지식 곡유 (ν•œκ΅­μ–΄, 일본어, μ˜μ–΄)

μ•„ν‚€ν…μ²˜

λΈ”λ‘œκ·ΈλŠ” 두 개의 독립적인 λ¦¬ν¬μ§€ν„°λ¦¬λ‘œ κ΅¬μ„±λ©λ‹ˆλ‹€:

  • blog (ν˜„μž¬ 리포지터리) - Next.js 16 기반 λΈ”λ‘œκ·Έ μ• ν”Œλ¦¬μΌ€μ΄μ…˜
  • blog-content - MDX ν˜•μ‹μ˜ 포슀트 μ½˜ν…μΈ  μ €μž₯μ†Œ
graph LR
    A[blog 리포지터리] -->|main 브랜치 push| B[Netlify μžλ™ 배포]
    C[blog-content 리포지터리] -->|main 브랜치 push| D[GitHub Actions]
    D -->|generate-index.ts| E[index.json 생성]
    B -->|fetch| E
    B -->|λ Œλ”λ§| F[GitHub Raw URL]
Loading

πŸš€ λΉ λ₯Έ μ‹œμž‘

사전 μš”κ΅¬μ‚¬ν•­

도ꡬ 버전 확인 λͺ…λ Ήμ–΄
Node.js 22.x 이상 node -v
pnpm 10.x 이상 pnpm -v

μ„€μΉ˜ 및 μ‹€ν–‰

# μ˜μ‘΄μ„± μ„€μΉ˜
pnpm install

# 개발 μ„œλ²„ μ‹œμž‘ (http://localhost:3000)
pnpm dev

# Netlify Functions와 ν•¨κ»˜ μ‹œμž‘ (http://localhost:8888)
pnpm dev:server

ν™˜κ²½ λ³€μˆ˜ μ„€μ •

.env.local νŒŒμΌμ„ μƒμ„±ν•˜κ³  ν•„μš”ν•œ ν™˜κ²½ λ³€μˆ˜λ₯Ό μ„€μ •ν•©λ‹ˆλ‹€:

# μ½˜ν…μΈ  리포지터리 (ν•„μˆ˜)
NEXT_PUBLIC_GIT_RAW_URL=https://raw.githubusercontent.com/chan-ok/blog-content/main

# Cloudflare Turnstile (Contact 폼용)
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key
TURNSTILE_SECRET_KEY=your_secret_key

# Resend (이메일 λ°œμ†‘μš©)
RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxx

⚠️ .env.local은 μ ˆλŒ€ Git에 μ»€λ°‹ν•˜μ§€ λ§ˆμ„Έμš”!

πŸ› οΈ μ£Όμš” λͺ…λ Ήμ–΄

# 개발
pnpm dev              # 개발 μ„œλ²„ μ‹œμž‘
pnpm dev:server       # Netlify Functions와 ν•¨κ»˜ μ‹œμž‘
pnpm build            # ν”„λ‘œλ•μ…˜ λΉŒλ“œ
pnpm start            # ν”„λ‘œλ•μ…˜ μ„œλ²„ μ‹œμž‘

# μ½”λ“œ ν’ˆμ§ˆ
pnpm lint             # ESLint μ‹€ν–‰
pnpm fmt              # Prettier ν¬λ§·νŒ…

# ν…ŒμŠ€νŒ…
pnpm test             # Vitest ν…ŒμŠ€νŠΈ μ‹€ν–‰
pnpm coverage         # ν…ŒμŠ€νŠΈ 컀버리지 확인
pnpm e2e              # Playwright E2E ν…ŒμŠ€νŠΈ

# Storybook
pnpm storybook        # Storybook μ‹€ν–‰ (localhost:6006)
pnpm build-storybook  # Storybook λΉŒλ“œ

πŸ—‚οΈ ν”„λ‘œμ νŠΈ ꡬ쑰

blog/
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ app/           # Next.js App Router (λΌμš°νŒ…)
β”‚   β”œβ”€β”€ features/      # λΉ„μ¦ˆλ‹ˆμŠ€ κΈ°λŠ₯ (about, contact, post)
β”‚   β”œβ”€β”€ entities/      # λΉ„μ¦ˆλ‹ˆμŠ€ μ—”ν‹°ν‹° (markdown)
β”‚   β”œβ”€β”€ widgets/       # 볡합 UI (header, footer)
β”‚   └── shared/        # 곡유 λ¦¬μ†ŒμŠ€
β”‚       β”œβ”€β”€ components/  # 볡합 μ»΄ν¬λ„ŒνŠΈ (유기체 이상)
β”‚       β”‚   β”œβ”€β”€ toggle/    # ν† κΈ€ (locale, theme)
β”‚       β”‚   β”œβ”€β”€ turnstile/ # Cloudflare Turnstile
β”‚       β”‚   └── ui/        # 순수 UI (μ›μž, λΆ„μž)
β”‚       β”œβ”€β”€ config/      # μ„€μ • (API λ“±)
β”‚       β”œβ”€β”€ hooks/       # μ»€μŠ€ν…€ ν›…
β”‚       β”œβ”€β”€ providers/   # Context providers
β”‚       β”œβ”€β”€ stores/      # Zustand stores
β”‚       └── types/       # TypeScript νƒ€μž…
β”œβ”€β”€ netlify/functions/ # μ„œλ²„λ¦¬μŠ€ ν•¨μˆ˜
β”œβ”€β”€ e2e/               # E2E ν…ŒμŠ€νŠΈ
└── docs/              # πŸ“š 개발 λ¬Έμ„œ

πŸ“š λ¬Έμ„œ κ°€μ΄λ“œ

ν•„μˆ˜ λ¬Έμ„œ

λ¬Έμ„œ μ„€λͺ… μ–Έμ œ μ½λ‚˜μš”?
λΉ λ₯Έ μ‹œμž‘ κ°€μ΄λ“œ 개발 ν™˜κ²½ μ„€μ • 및 첫 κΈ°μ—¬ ν”„λ‘œμ νŠΈ μ‹œμž‘ μ‹œ
개발 κ·œμΉ™ 핡심 개발 원칙 및 κ·œμΉ™ μ½”λ“œ μž‘μ„± μ „
μ•„ν‚€ν…μ²˜ FSD ꡬ쑰 및 μ½˜ν…μΈ  νŒŒμ΄ν”„λΌμΈ μƒˆ κΈ°λŠ₯ 개발 μ‹œ

개발 κ°€μ΄λ“œ

λ¬Έμ„œ μ„€λͺ… μ–Έμ œ μ½λ‚˜μš”?
μ½”λ“œ μŠ€νƒ€μΌ κ°€μ΄λ“œ TypeScript, Tailwind, μ»΄ν¬λ„ŒνŠΈ μž‘μ„± κ·œμΉ™ μ½”λ“œ μž‘μ„± μ‹œ
ν…ŒμŠ€νŒ… κ°€μ΄λ“œ Vitest, Playwright, Storybook μ‚¬μš©λ²• ν…ŒμŠ€νŠΈ μž‘μ„± μ‹œ
λ³΄μ•ˆ κ°€μ΄λ“œ ν™˜κ²½ λ³€μˆ˜, XSS 방지, 봇 방지 λ³΄μ•ˆ κ΄€λ ¨ μž‘μ—… μ‹œ
Git κ°€μ΄λ“œ 컀밋 λ©”μ‹œμ§€, 브랜치 μ „λž΅ 컀밋 μ „

운영 κ°€μ΄λ“œ

λ¬Έμ„œ μ„€λͺ… μ–Έμ œ μ½λ‚˜μš”?
배포 κ°€μ΄λ“œ Netlify 배포 및 ν™˜κ²½ λ³€μˆ˜ μ„€μ • 배포 μ‹œ
Kiro Hooks κ°€μ΄λ“œ AI μžλ™ν™” ν›… μ‚¬μš©λ²• Kiro μ‚¬μš© μ‹œ
AI 검증 체크리슀트 AI λ‹΅λ³€ 검증 방법 AI μ½”λ“œ 적용 μ „

ν”„λ‘œμ νŠΈ 관리

λ¬Έμ„œ μ„€λͺ…
μ˜μ‚¬κ²°μ • 둜그 인간-AI ν˜‘μ—… μ˜μ‚¬κ²°μ • 좔적
κ΅¬ν˜„ κ³„νš 기술 μŠ€νƒ 및 진행 상황
λ³€κ²½ 둜그 버전별 λ³€κ²½ λ‚΄μ—­
ν•  일 λͺ©λ‘ 남은 μž‘μ—… λͺ©λ‘

🌏 κΈ°λŠ₯ ν˜„ν™©

βœ… κ΅¬ν˜„ μ™„λ£Œ

  • πŸš€ Netlify 배포 - μžλ™ λΉŒλ“œ 및 배포
  • 🌐 λ‹€κ΅­μ–΄ 지원 - URL 기반 (ν•œκ΅­μ–΄, 일본어, μ˜μ–΄) + i18next UI λ²ˆμ—­
  • 🎨 MDX λ Œλ”λ§ - μ½”λ“œ ν•˜μ΄λΌμ΄νŒ… 포함
  • πŸ“ About νŽ˜μ΄μ§€ - λ§ˆν¬λ‹€μš΄ 기반
  • πŸ“° Posts νŽ˜μ΄μ§€ - blog-content 리포지터리 연동
  • πŸ’¬ Contact 폼 - Zod 검증 + Turnstile + Resend
  • πŸŒ™ 닀크 λͺ¨λ“œ - Zustand + LocalStorage 지속성
  • πŸ” μ–Έμ–΄ 선택기 - URL 경둜 기반 + Zustand
  • πŸ’¬ λŒ“κΈ€ μ‹œμŠ€ν…œ - Giscus (GitHub Discussions 기반)

πŸ“‹ μ˜ˆμ • κΈ°λŠ₯

  • πŸ“š λ§ˆν¬λ‹€μš΄ κ³ κΈ‰ν™” - μ½”λ“œ 블둝 κ°œμ„ , TOC, Reading time
  • 🏠 ν™ˆν™”λ©΄ λ””μžμΈ κ°œμ„  - μ΅œμ‹ /인기 포슀트, ꡬ독 폼
  • πŸ”Ž 검색 κΈ°λŠ₯ - ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œ λ˜λŠ” Algolia

πŸ€– Kiro Agent Hooks

ν”„λ‘œμ νŠΈμ—λŠ” 개발 μ›Œν¬ν”Œλ‘œμš°λ₯Ό μžλ™ν™”ν•˜λŠ” Agent Hooksκ°€ μ„€μ •λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

ν›… μ—­ν•  트리거
πŸ“ Auto Documentation λ¬Έμ„œ μžλ™ μ—…λ°μ΄νŠΈ μˆ˜λ™ μ‹€ν–‰ (κΈ°λŠ₯ μ™„μ„± ν›„)

μžμ„Έν•œ μ‚¬μš©λ²•μ€ Kiro Hooks κ°€μ΄λ“œλ₯Ό μ°Έκ³ ν•˜μ„Έμš”.

πŸ”— κ΄€λ ¨ λ¦¬μ†ŒμŠ€

μ™ΈλΆ€ λ¬Έμ„œ

πŸ“„ License

MIT

About

dev blog

chanho.dev

Topics

blog

Resources

Readme

Security policy

Security policy
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Languages