TanStack Start와 Directus SDK 연동을 통해 인증, 타입 안전 데이터 페칭, CRUD, 파일 업로드를 하나의 파일로 구성하는 방법을 소개합니다.

Context

TanStack Start 기반 프론트엔드와 Directus 헤드리스 CMS를 연동할 때, 수동 fetch 호출 작성이나 커스텀 인증 헤더 구축이 필요했습니다. 이로 인해 타입 안전성 저하와 인증 로직 분산 문제가 발생했습니다.

Technical Solution

• Directus SDK 설치로 인증과 데이터 페칭의 추상화 계층 생성
• createDirectus()에 authentication('session')과 rest() 플러그인 조합 적용
• 제네릭 타입으로 스키마 정의해 전체 요청에서 엔드투엔드 타입 안전성 확보
• readItems, createItem, updateItem, deleteItem 함수를 컬렉션별로 async 함수로 분리
• filter 옵션에 _eq 연산자로 쿼리 빌더 스타일 필터링 구현

Impact

TanStack Start loader에서 getProducts()만 호출하면 서버사이드 데이터 페칭 자동 처리

Key Takeaway

세션 기반 인증은 credentials: 'include' 설정으로 쿠키 자동 관리되어 토큰 관리 코드가 불필요합니다.