🎁[속보] 인프런 내 깜짝 선물 출현 중🎁

[인프런 워밍업 스터디 클럽 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.checkedtrue인 경우 완료한 타이밍으로 간주해 현재 시간을 설정(setCompletedAt)

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

 

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

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

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

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

문제의 원인

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

해결 방법

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

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

댓글을 작성해보세요.


채널톡 아이콘