🛠 블로그 개발 기록

이 블로그는 Next.js App Router, TypeScript, Shadcn UI, Radix UI, Tailwind CSS 등을 활용해 개발했습니다.

아래는 개발 과정에서 수행한 주요 작업과, 선택한 기술 및 그 이유에 대한 정리입니다.

---

1️⃣ 프로젝트 초기 세팅

• Next.js App Router 기반 프로젝트 생성
• TypeScript 적용 및 tsconfig 최적화
• ESLint, Prettier 설정 → 일관된 코드 스타일 유지

---

2️⃣ UI 라이브러리 및 스타일링

• Shadcn UI + Radix UI
  → 접근성이 뛰어난 UI 컴포넌트 구성
• Tailwind CSS
  → 모바일 퍼스트 & 반응형 디자인 최적화
• 다크 모드 및 커스텀 테마 지원

---

3️⃣ 폴더 구조 및 코드 컨벤션

• 기능 중심 디렉토리 구조 설계
  예: /components/auth-wizard, /lib/utils
• 함수형 컴포넌트 + interface 기반 타입 선언
• 모듈화된 헬퍼 함수로 코드 중복 최소화

---

4️⃣ 데이터 및 상태 관리

• React Server Components (RSC) 적극 활용
  → 클라이언트 컴포넌트 사용 최소화
• nuqs 사용 → URL search parameter 상태 관리
  → 예: /posts?page=2&sort=latest처럼 URL 파라미터를 타입 안전하게 관리
• 서버 사이드 데이터 패칭 (SSR) 및 캐싱 최적화

---

5️⃣ 성능 및 SEO 최적화

• WebP 이미지, lazy loading, 명시적 이미지 크기 설정
• Core Web Vitals (LCP, CLS, FID) 개선
• SEO 메타 정보 설정
  • meta 태그
  • Open Graph
  • Twitter Card

---

6️⃣ 기타 작업

• dynamic import → 비필수 컴포넌트 지연 로딩
• Suspense + fallback → UX 최적화
• 커스텀 훅 및 유틸 함수 분리

---

7️⃣ 서버 및 데이터베이스 구성

• Vercel을 통한 무중단 배포 및 자동 빌드 파이프라인 구성
• Supabase를 백엔드로 사용하여 다음 기능 구현:
  • 카테고리 기반 게시글 관리
  • Admin 인증 및 로그인 시스템 (Supabase Auth)
  • 이미지 업로드 및 저장 환경 구성 (Supabase Storage)
• .env 환경변수 및 보안 설정으로 민감 정보 분리 관리

---

🔄 앞으로의 방향

최신 프론트엔드 트렌드에 맞춰
성능, 접근성, 유지보수성을 고려한 블로그로 발전 중입니다.
앞으로도 신규 기능 도입과 코드 개선을 지속적으로 이어갈 예정입니다.