006

005

004

문제 프로필 수정 페이지에서 이미지를 변경할 때마다 새로운 이미지가 Supabase Storage에 업로드되는 문제가 있었다. const uploadImgHandler = async (e: ChangeEvent<HTMLInputElement>) => { const

003

002

001

Error: Database error deleting user 문제 백업복구 후에 회원탈퇴 기능을 테스트하던 중 특정회원만 탈퇴에 실패하는 문제가 발생했다. 회원탈퇴 시 다음과 같은 오류가 발생했다. 처음에는 소셜 로그인(Google, Kakao) 계정에서 발생

백업파일로 새 프로젝트에 복원이 완료되면 다음 설정도 함께 변경 및 확인합니다. .env 환경 변수 수정 Project URL 수정 : Supabase에 Project Overview에서 확인 가능 anon public, service_role 수정 : Supaba

무료 플랜을 사용하던 Supabase 프로젝트가 일시정지되어 새 프로젝트를 생성한 뒤 기존 백업 파일을 복원한 과정을 기록합니다. 현재상황 무료플랜 사용중 기존 프로젝트 일시정지(Paused) 상태 백업파일 보유 : DB(.backup.gz), Storage (.st

인터넷 사용 시 기기마다 화면 크기가 상이함. 컴퓨터는 화면이 크고 휴대폰은 작음. 반응형 디자인은 이러한 다양한 기기 환경에 맞춰 화면 레이아웃이 자동으로 변하는 디자인을 의미함. ◼ 필요성 유저 편의성: 사용자는 항상 쾌적한 환경을 원함. 휴대폰 사용 시 글씨가

Tailwind CSS는 디자인 시스템을 직접 구축할 수 있도록 도와주는 CSS 프레임워크. 가볍고 사용이 간단한 프레임워크이며, 유틸리티 퍼스트(Utility-First) 방식을 사용함. 빠르고 쉽게 스타일을 적용할 수 있는 다양한 클래스를 제공함. ◼ 등장배경 C

◼ API 문서 서버 API URL https://api.example.com 회원가입 아이디, 비밀번호, 닉네임으로 DB에 회원정보를 저장. Request Method: POST URL PATH: /register Body (JSON): JSON {

◼ 인증과 인가 인증(Authentication) 서비스를 이용하려는 사용자가 등록된 회원인지 확인하는 절차. 일반적으로 로그인 과정. 인가(Authorization) 인증이 완료된 사용자가 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차. 로그인 이후,

◼ Throttling이란? Throttling은 짧은 시간 간격으로 연속 발생한 이벤트를 일정 시간 단위(delay)로 제한하는 기법. 지정한 시간 동안 처음 또는 마지막 이벤트만 실행 가능. 주로 무한스크롤, 스크롤 이벤트, 버튼 연속 클릭 방지 등에 사용. 이벤

Zustand는 상태관리 본연의 기능에 집중한 라이브러리. 복잡성을 줄이고, 간단하고 직관적인 상태관리 기능 제공. 단순화된 Flux 패턴 기반의 small, fast, scalable 상태관리 솔루션이며 Hooks 기반의 간편한 API 제공. ◼ 등장배경 상태관리의

◼ Query Cancellation 다운로드 UI가 있거나 UX를 저해하는 불필요한 네트워크 요청을 제거할 때 사용. 대용량 fetching을 중간에 취소하거나, 사용하지 않는 컴포넌트에서 fetching이 진행 중이면 자동으로 취소해 불필요한 네트워크 비용을 절감함

TanStack Query는 서버 상태 관리를 위한 라이브러리. 서버 상태란 서버와의 통신을 통해 받아오는 데이터 의미. 클라이언트 상태와 달리 다음과 같은 관리 필요. Fetching(패칭) : 서버에서 데이터를 가져옴. Caching(캐싱) : 가져온 데이터를

TanStack Query는 서버 상태 관리 라이브러리. 데이터 패칭, 캐싱, 동기화, 무효화 등의 기능을 제공. 비동기 로직을 간결하게 작성할 수 있어 유지보수성을 높일 수 있음. ◼ 등장배경 비동기 로직의 복잡성 해결 필요 기존의 useEffect, useStat

◼ Custom Instance의 개념과 필요성 Custom Instance의 필요성 지금까지는 아래와 같이 데이터를 통신함. const data = await axios.get("http://localhost:4000/"); 별도의 설정 없이 기본 Axios 그대로