데브허브 | DEVHUB | Adding an Editable Rich Text to The Writing PlatformAdding an Editable Rich Text to The Writing Platform
- 아내를 위한 글쓰기 플랫폼을 구축하며, 복잡한 CMS 대신 핵심 요소를 직접 설정할 수 있는 간단한 커스텀 CMS 기능을 구현합니다. ⚙️
- 애플리케이션 이름, 제목, 부제목, 이메일, 'About' 페이지 내용 등 설정 가능한 항목들을 중앙에서 관리하기 위해
configuration 테이블을 데이터베이스에 추가합니다. 💾
- Drizzle ORM을 활용하여 데이터베이스 스키마를 정의하고,
db generate로 마이그레이션 스크립트를 생성한 후 db migrate로 변경 사항을 적용하는 과정을 보여줍니다. 🚀
- TanStack Start 프레임워크의
createServerFn과 useLoaderData를 사용하여 서버 측에서 설정 데이터를 효율적으로 로드하고, 이를 통해 SEO 이점을 확보합니다. 🌐
- AI 개발 도구(Cursor)를 적극 활용하여 'EditableContent'와 같은 복잡한 UI 컴포넌트를 빠르게 생성하며, 현대적인 개발 워크플로우의 생산성을 강조합니다. 🤖
- 관리자 권한이 있는 사용자가 페이지 내용을 직접 클릭하여 편집 모드로 전환하고, 2초 디바운스 기능으로 타이핑 중단 시 자동으로 변경 사항을 저장하는 대화형 편집 UI를 구현합니다. ✍️
- 데이터베이스에 설정 레코드가 없을 경우 기본값을 삽입하고, 존재할 경우 업데이트하는 'upsert' 로직을
updateConfiguration 함수에 적용하여 데이터 지속성을 보장합니다. ✅
- 개발 과정에서 발생한 버그(예: 초기 데이터 미저장, 편집 후 화면 미반영)를 식별하고, AI의 도움을 받아 수정하며 실제 개발의 반복적인 디버깅 과정을 보여줍니다. 🐛