Next.js와 Supabase를 활용한 Todo 애플리케이션 개발

강의 수강 내용 요약

이번 주에는 Next.js 14, TypeScript, Material Tailwind, Supabase를 연동하여 Todo 리스트 애플리케이션을 만드는 방법을 학습했습니다.

사용한 기술 스택과 그 이유

1. Supabase

• PostgreSQL 기반의 오픈소스 백엔드 서비스 플랫폼

• Firebase의 대안으로 관계형 DB의 장점을 활용할 수 있음

• 자동 생성되는 API와 인증 시스템 제공

• 장점: 오픈소스, PostgreSQL 기반, 비용 효율성, 다양한 연동 방식

• 단점: 상대적으로 작은 커뮤니티, 문서화 부족, Firebase보다 높은 러닝커브

2. Next.js

• React 기반 풀스택 웹 애플리케이션 프레임워크

• 서버 사이드 렌더링, 정적 생성, API 라우트 등 다양한 기능 제공

• App Router를 통한 새로운 라우팅 시스템

• 클라이언트/서버 컴포넌트 분리를 통한 성능 최적화

3. Material Tailwind

• Material UI와 Tailwind CSS를 결합한 디자인 시스템

• 유틸리티 기반의 스타일링과 미리 구성된 컴포넌트 제공

• 타입스크립트 지원으로 개발 경험 향상

4. React Query (Tanstack Query)

• 서버 상태 관리를 위한 강력한 라이브러리

• 데이터 페칭, 캐싱, 동기화, 상태 업데이트 기능 제공

• 자동 리패칭과 캐싱 기능으로 UX 향상

• 장점: 자동 캐싱, 데이터 동기화, 개발자 경험, 성능 최적화

• 단점: 학습 곡선, 복잡한 설정, 캐시 관리의 복잡성

   

   

   

  🍭미션
  

  

할일 CRUD 기능 구현 (feat. Server Action)

• Next.js의 Server Actions 활용한 데이터 조작 함수 구현

• getTodos, createTodo, updateTodo, deleteTodo 기능 구현

• React Query hooks를 활용한 서버 상태 관리

• Todo 컴포넌트 개발 및 CRUD 로직 연결

이 과정에서 Material Tailwind 컴포넌트의 타입 불일치 문제로 여러 타입 에러가 발생했습니다. 이를 해결하기 위해 래퍼 컴포넌트 패턴을 적용했습니다:

// 커스텀 IconButton 래퍼 컴포넌트
interface IconButtonProps {
  onClick: () => void | Promise<void>;
  children: ReactNode;
  className?: string;
}

function IconButton({ onClick, children, className }: IconButtonProps) {
  return (
    <MTIconButton
      onClick={onClick as any}
      className={className}
      {...({} as any)} // 타입 에러 방지
    >
      {children}
    </MTIconButton>
  );
}

또한 todoQuery와 mutation을 활용하여 데이터 관리를 구현했습니다:

const updateTodoMutation = useMutation({
  mutationFn: () =>
    updateTodo({
      id: todo.id,
      title,
      completed,
    }),
  onSuccess: () => {
    setIsEditing(false);
    queryClient.invalidateQueries({
      queryKey: ["todos"],
    });
  },
});

queryClient는 쿼리 관련된 요청의 캐시 역할을 해주어 React Query가 캐시를 정상적으로 동작하게 해줍니다.

학습 내용 회고

아쉬웠던 점

• 타입스크립트 타입 에러 해결에 많은 시간을 소비했습니다. 라이브러리 문서를 먼저 자세히 살펴봤다면 더 효율적이었을 것입니다.

• 프로젝트 구조 설계와 파일 경로 설정 등 기초적인 부분에서 오류가 발생했습니다.

• 컴포넌트 재사용성과 코드 구조화 측면에서 개선할 여지가 있습니다.

보완하고 싶은 점

• 래퍼 컴포넌트를 별도 파일로 분리하여 코드의 재사용성을 높이고 싶습니다.

• Supabase의 인증 기능을 추가하여 사용자별 Todo 관리 시스템으로 확장하고 싶습니다.

• 테스트 코드 작성을 통해 애플리케이션의 안정성을 높이고 싶습니다.

• 모바일 반응형 디자인을 더 개선하여 다양한 디바이스에서의 사용성을 향상시키고 싶습니다.

• 복습을 계속 해야할 것 같습니다.