[인프런 워밍업 스터디 클럽 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가 자연스럽게 유지될 수 있다.
댓글을 작성해보세요.