[인프런 워밍업 스터디 클럽 3기 풀스택] 1주차 발자국

강의수강

• Next.js 기본기

  • next.js란?

    • 풀스택 개발을 하기에 최적화된 웹 프레임워크

    • 서버에서 html을 최적화해 웹으로 내려주기에 검색엔진에 유리

  • 폴더 구조

    • route는 폴더명, 경로와 일치

    • page.tsx, layout.tsx, route.ts 등 역할이 정해진 파일명들이 존재

    •  

• tailwindcss

  • 클래스로 구성된 유틸리티 우선 css 프레임워크

• recoil

  • facebook에서 만든 React 상태 관리 라이브러리

  • 컴포넌트에 상태를 손쉽게 공유할 수 있게 함

• React Query

  • fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리

     

  • useQuery (데이터 조회)

    • 서버에서 데이터를 가져오고 캐싱하는 데 사용

  • useMutaion (데이터 변경)

    • 데이터를 수정, 생성, 삭제할 때 사용

    • useQuery와 다르게 자동 캐싱 x, 수동으로 트리거해야 함 (invalidateQueries)

       

• Supabase

  • PostgreSQL 기반의 백엔드 서비스

  • 데이터베이스, 인증, 스토리지, 엣지 함수 등을 제공

미션

• TODO 항목 옆에 생성 시간을 표시하기

  • supabase todos table에 created_at column을 이용

     

  • 생성 시간을 보기 편하게 formatDate 란 함수를 만들어 형식을 변경

     

    export function formatDate(date: string) {
      if (!date) {
        return '';
      }
    
      const d = new Date(date);
      const yyyy = d.getFullYear();
      const mm = String(d.getMonth() + 1).padStart(2, '0');
      const dd = String(d.getDate()).padStart(2, '0');
      const hh = String(d.getHours()).padStart(2, '0');
      const min = String(d.getMinutes()).padStart(2, '0');
    
      return `${yyyy}/${mm}/${dd} ${hh}:${min}`; 
    }

  • ui/todo.tsx 컴포넌트 파일에 created_at을 렌더링 부분을 추가

<p className="text-xs text-blue-gray-400">
  Created: ${formatDate(todo.created_at)}
</p>

• completed_at 필드를 추가하여 완료한 시간도 함께 저장

  • supabase todos 테이블에 completed_at column 추가

  • todos.tsx 컴포넌트에 completed_at 관련 상태를 관리하는 completedAt useState 추가

  • todos.tsx 컴포넌트 내부의 Checkbox 컴포넌트의 onChange 이벤트에 e.target.checked 가 true인 경우 완료한 타이밍으로 간주해 현재 시간을 설정(setCompletedAt)

  • updatedTodoMutaition mutationFn의 updatedTodo 액션에 보낼 객체에 completed_at 필드를 추가해 mutation 시 supabase에 저장된 completed_at의 값을 변경

완료한 시간을 추가하면서 개선한 점

완료한 상태에서는 completed_at 값을, 완료하지 않은 상태에서는 created_at 값을 렌더링하는 방식으로 목표 기능을 설정했다.

초기 구현에서는 completedAt 상태값을 추가하지 않고, todo-actions의 updateTodo 함수에서 updated_at 필드를 업데이트하는 방식과 동일하게 진행했다. 그리고 todo.tsx에서 completed 값이 true이면 todo.completed_at을, false이면 todo.created_at을 렌더링했다.

이 방식은 completed가 false일 때는 문제가 없었지만, false → true로 변경될 때 todo.completed_at 값이 null이라 화면이 깜빡이는 문제가 발생했다.

문제의 원인

completed는 리액트 상태값이고, todo.completed_at은 Supabase에서 가져오는 값이기 때문에 completed가 먼저 true로 변경된 후 Supabase에서 completed_at 값을 업데이트하고 가져오는 과정에서 지연이 발생했다. 그로 인해 completed_at 값이 null인 순간이 있어 깜빡임이 나타났다.

해결 방법

화면 깜빡임을 방지하려면 completed 값과 함께 completedAt 상태값을 리액트에서 관리해야 한다.

즉, checkbox의 값이 변경될 때 completedAt 상태값도 동시에 변경하고, mutate 시 completedAt 값을 전달하면 completed와 completedAt 상태가 같은 타이밍에 변경된다. 이렇게 하면 Supabase 응답을 기다리는 동안에도 UI가 자연스럽게 유지될 수 있다.