이력서를 대체하는 개인 포트폴리오 겸 기술 블로그 사이트
Next.js 16 App Router와 Route Handler로 화면과 API를 한 저장소에서 만든 개인 사이트입니다. 소개·이력서, 프로젝트 목록과 상세, 문의하기, 방명록을 제공하고, 데이터는 Drizzle ORM과 PostgreSQL(Neon)에 저장합니다. 첫 화면 조회는 서버 컴포넌트에서 서비스를 직접 호출해 캐시하고, 작성 기능은 Zod로 검증하는 API로 처리합니다. 기능마다 테스트를 먼저 쓰는 TDD로 개발했으며, 블로그는 2차 개발로 이어갈 예정입니다.
?theme= 값을 하이드레이션 이후에 적용해 첫 화면이 잠깐 다른 테마로 보였습니다.
페인트 전에 실행되는 head 스크립트에서 테마를 먼저 저장해 첫 렌더링부터 올바른 테마가 적용되도록 바꿨습니다.
헤더가 usePathname을 Suspense 밖에서 읽어 /blog/[slug] 같은 동적 경로의 사전 렌더링이 실패했습니다.
현재 경로를 쓰는 메뉴 링크를 NavLinks로 분리하고 Suspense로 감싸, 나머지 헤더는 정적으로 렌더링되게 했습니다.
드라이버 기본값으로 함수 인스턴스마다 연결을 10개까지 열고 닫지 않아, 인스턴스가 늘면 DB 연결 한도를 넘을 수 있었습니다.
인스턴스당 연결을 3개로 줄이고 유휴 연결을 20초 뒤 닫도록 했으며, Neon pooler에 맞춰 prepared statement를 껐습니다.
cursor 메모의 작성 시각을 JS Date로 가져와 비교하면 밀리초까지만 남아, 같은 메모가 다음 목록에 다시 나올 수 있었습니다.
기준 시각을 서브쿼리로 DB 안에서 비교해 마이크로초 정밀도를 유지하고, 같은 시각은 id로 정렬했습니다.