arilog.dev

서비스 소개

이력서에 첨부되는 개인 기술 블로그 겸 포트폴리오다. 콘텐츠는 MDX로 관리하고, 빌드 타임에 정적 생성해 배포한다. "동작만 하는 코드가 아니라 코드 품질 자체가 결과물"이라는 기준으로 만들었다.

아키텍처

Next.js 16 App Router 기반의 서버 컴포넌트 우선 구조다. 데이터 접근(파일 시스템, MDX 파싱, 인덱싱)은 src/lib에 격리하고, 상호작용이 필요한 최하단 컴포넌트에만 "use client" 경계를 둔다.

콘텐츠: content/**/*.mdx — gray-matter로 frontmatter 분리, zod로 검증
렌더링: next-mdx-remote/rsc + remark-gfm + rehype-slug
하이라이트: Shiki 듀얼 테마(light/dark)를 CSS 변수로 연결

기술 스택과 선택 이유

선택	이유
App Router	서버 컴포넌트로 클라이언트 번들을 최소화
next-mdx-remote/rsc	Turbopack 기본 환경에서 webpack 로더 의존을 피함
TailwindCSS v4	토큰 기반 디자인 시스템을 `@theme`로 관리
Shiki	빌드 타임 하이라이트로 런타임 JS 비용 0

폴더 구조

구조 요약

src/
  app/          라우트
  components/   common / layout / blog / project / ui
  lib/          mdx, projects, shiki, 검증 유틸
  constants/    site, resume, nav
content/
  <category>/   블로그 글
  projects/     프로젝트

트러블슈팅

Radix Slot과 RSC (문제-원인-해결-결과)

문제: 서버 컴포넌트에서 Button을 import하면 createContext is not a function으로 빌드 실패.
원인: @radix-ui/react-slot이 "use client" 없이 모듈 최상단에서 React.createContext를 호출한다. 서버(RSC) 환경에는 createContext가 없다.
해결: buttonVariants를 Slot을 import하지 않는 별도 파일로 분리하고, 서버 컴포넌트의 링크 버튼은 buttonVariants() + next/link 조합으로 렌더한다.
결과: 불필요한 클라이언트 경계 없이 서버 컴포넌트를 유지.

MDX 표현식이 조용히 사라지는 문제

next-mdx-remote는 기본값 blockJS: true로 JS 표현식을 제거한다. {expr} 자식과 prop={expr} 표현식 속성이 경고 없이 사라진다.

원인: 보안용 removeJavaScriptExpressions 플러그인이 표현식을 스트립한다.
해결: blockJS: true를 유지하되, 표현식·import/export를 빌드 타임에 잡는 자체 MDX 린트를 추가했다.