eunu.log

개인 블로그입니다.

라이브 데모

🛠 기술 스택

Next.js

React

TypeScript

Three.js

Tailwind

코어 스택:

• 프레임워크: Next.js 16+ (App Router, SSG/SSR)
• 언어: TypeScript (Strict Mode)
• 스타일링: Tailwind CSS + CSS Variables (필요한 영역에만 CSS Modules 사용)

애니메이션:

• 3D: Three.js + @react-three/fiber + @react-three/drei
• 모션: Framer Motion

콘텐츠 처리:

• 포맷: MDX + meta.json (폴더 기반 콘텐츠 구조)
• 파이프라인: @mdx-js/loader + remark/rehype + syntax highlighting

🏗 시스템 아키텍처

현재 운영 기준 아키텍처는 아래와 같습니다.

핵심 포인트:

• 블로그 앱(eunu.log)과 분석 대시보드(Umami)는 각각 Vercel에 분리 배포합니다.
• 블로그 코드에서는 NEXT_PUBLIC_UMAMI_URL, NEXT_PUBLIC_UMAMI_WEBSITE_ID만 설정하면 Umami 스크립트가 자동 로드됩니다.
• Umami 커스텀 이벤트는 스크립트 초기화 전 큐에 적재되고, 로드 완료 후 자동으로 flush됩니다.

📂 프로젝트 구조

eunu.log/
├── 📁 src/
│   ├── 📁 app/                 # 라우트 엔트리 전용 (Next App Router)
│   ├── 📁 core/                # 앱 전역 설정/프로바이더 조합
│   ├── 📁 domains/             # 도메인 계약/타입/스키마
│   ├── 📁 features/            # 기능 모듈(ui/model/services)
│   │   ├── 📁 blog/
│   │   ├── 📁 resume/
│   │   ├── 📁 search/
│   │   └── 📁 home/
│   ├── 📁 shared/              # 공용 모듈(analytics/integrations/layout/seo/testing/ui/types)
│   ├── 📁 components/
│   │   └── 📁 visualization/   # 인터랙티브 알고리즘 시각화 전용
│   └── 📁 styles/              # 전역 스타일과 토큰
├── 📁 tests/
│   └── 📁 e2e/                 # Playwright E2E 테스트
├── 📁 internal/
│   ├── 📁 config/              # 내부 lint/spell 설정
│   └── 📁 scripts/             # 내부 자동화/유틸 스크립트
├── 📁 posts/                   # 블로그 글(MDX + 메타데이터)
│   └── 📁 [slug]/              # 글 단위 폴더
│       ├── index.mdx           # 글 본문
│       └── meta.json           # 글 메타데이터
├── 📁 public/                  # 정적 에셋
└── 📁 docs/                    # 문서