당신의 Table Code가 200줄 이상이라고 장담해요. 틀렸다는 걸 증명해 보세요. 😏

Source: Dev.to

도전 과제

나는 내기를 걸어요. 여러분의 테이블 구현에는 다음이 포함됩니다:

• 컬럼 정의(수동 작성)
• 필터 로직
• 정렬 로직
• 페이지네이션 상태
• API 연결
• 로딩 상태
• URL 동기화
• 내보내기 기능

이것만 해도 최소 200 줄 이상의 코드가 필요합니다. 600 줄 이상인 프로젝트도 본 적 있어요. 안 믿으시겠어요? 지금 바로 여러분의 코드를 세어보세요. 기다릴게요. ☕️

왜 TanStack Table은 여전히 보일러플레이트가 필요한가

TanStack Table은 놀랍습니다—헤드리스이고, 유연하며, 강력하죠. 하지만 여기서 함정이 있습니다: 기본 프리미티브만 제공하고, 여전히 여러분이 해야 할 일이 많습니다:

• 스키마를 컬럼에 매핑하기
• 필터/정렬/페이지네이션 UI 구축하기
• 서버‑사이드 로직 연결하기
• URL 상태 처리하기
• 내보내기 기능 추가하기

이는 TanStack의 잘못이 아니라, 설계상 헤드리스이기 때문입니다. 저는 이 문제와 3년째 씨름하고 있습니다.

TableCraft 소개

TableCraft는 TanStack Table 위에 얹은 레이어로, Drizzle 스키마만 있으면 모든 것을 자동으로 생성합니다.

// Backend: Connect schema, get full API
const users = defineTable(schema.users)
  .hide('password')
  .search('email', 'name')
  .sort('-createdAt')

// Frontend: One component, done

얻을 수 있는 것

• ✅ 스키마 기반 자동 컬럼 생성
• ✅ 서버‑사이드 필터링, 정렬, 페이지네이션
• ✅ 검색, 내보내기, 날짜 선택기
• ✅ URL 상태 동기화
• ✅ TypeScript 타입

모두 내부적으로 TanStack Table을 활용합니다.

행동 촉구

마지막 프로젝트에서 테이블 관련 코드(컬럼, 필터, 페이지네이션, API 라우트)의 줄 수를 세어보세요. 제가 본 가장 큰 규모는 600 줄 이상이었습니다. 이를 넘어보세요. 🏆

아래에 댓글을 남겨 주세요:

• 코드 줄 수
• 소요 시간
• 자동 생성 도구를 사용하고 싶으신가요?

제가 먼저 말하겠습니다: 340줄, 4시간, 그리고 예—제가 직접 도구를 만들었습니다. 여러분 차례입니다. 👇

링크

• 🔗 GitHub Repository
• 📚 Documentation