본문 바로가기

전체 글115

연락처가 추가됐는데, 왜 화면엔 갱신이 안될까? 문제 상황AddContactForm에서 연락처 추가 후 Supabase 저장까지는 잘 됐는데, 일반 연락처 리스트(regularContacts)에 바로 반영되지 않음화면은 여전히 과거 데이터를 보여줌원인을 한번 찾아볼까?처음엔 React Query의 쿼리 키(queryKey)가 달라서 발생한 문제라고 생각했다. 그래서 관련 코드를 다시 확인해봤다.점검했던 코드mutation 훅:export const useMutateInfiniteContact = (userId?: string) => { const queryClient = useQueryClient(); return useMutation({ mutationFn: ({ contactId, isPinned }: { contactId: string;.. 2025. 4. 24.
사이드시트(onClose)가 안 닫히는 이유 문제 상황AddContactForm에서 폼을 제출한 후 SideSheet를 닫고 싶어서 onClose 함수를 내려줬다.또, SideSheet 안에 있는 닫기 버튼을 눌러도 사이드시트가 닫히지 않았다.코드는 아래처럼 되어 있었다: handleClose}> handleClose} />분명 handleClose() 함수는 정상적으로 작동하고, 상태도 잘 바뀌는 것 같았는데...왜 사이드시트가 안 닫히는 걸까?원인결론부터 말하면,onClose={() => handleClose}는 실제 함수를 전달한 게 아니라, 함수를 리턴하는 함수를 전달한 것이었다.즉, () => handleClose는 handleClose()를 실행하는 게 아니라그냥 handleClose라는 함수 자체를 리턴만 하고 아무 일도 하지.. 2025. 4. 21.
React Hook은 왜 콜백 안에서 못 쓰는 걸까? ▲ Next.js 14.2.26 - Environments: .env.local Creating an optimized production build ... ✓ Compiled successfullyFailed to compile../src/components/calendar/MainCalendar.tsx88:6 Warning: React Hook useEffect has a missing dependency: 'setSelectPlan'. Either include it or remove the dependency array. If 'setSelectPlan' changes too often, find the parent component that defines it and wrap that d.. 2025. 4. 18.
시간대 불일치로 인한 데이터 신뢰성 문제 해결 문제 상황약속 관리 서비스를 개발하는 과정에서 약속 리스트에 D-day 기능을 구현하던 중 심각한 문제가 발생했다. 약속 날짜를 당일로 변경했을 때 해당 약속이 리스트에서 완전히 사라지는 현상이 생겼었고 원인을 파악하기 위해 Supabase에 저장된 데이터를 확인한 결과, 시간대 처리 방식에 문제가 있었다.예를 들어, 4월 14일 약속의 경우에는내가 예상한 시작 날짜 데이터: 2025-04-14 00:00:00+00실제로 DB에 저장된 데이터: 2025-04-13 15:00:00+00 (UTC 기준, -9시간 차이)이 문제는 한국 시간(KST)과 국제 표준시(UTC) 간의 9시간 차이를 생각을 못했던 것에서 시작됐다.핵심 문제점기능 구현을 위해 DB에 있는 데이터를 변형해서 기능을 구현하는 게 아니라, .. 2025. 4. 15.
Supabase에서 한글 데이터 정렬 문제와 해결 방법 개발 중에 흥미로운 문제에 부딪쳤다. Supabase를 사용해 연락처 목록을 가나다순으로 정렬하려 했는데, 예상과 다른 결과가 나왔다.문제 상황처음에는 Supabase의 기본 정렬 기능을 사용했다:typescript const { data, error } = await supabase .from('contacts') .select('contacts_id, name, relationship_level, contacts_profile_img, is_pinned') .eq('user_id', userId) .order('name', { ascending: true });하지만 결과는 예상과 달랐다. 예를 들어 '감자', '나비', '감나무', '날치'라는 이름이 있다면, 한글 자모음 순서로는 '감나무'.. 2025. 4. 10.
개발자와 디자이너의 협업 Tailwind CSS와 디자인 조율내가 최근 진행한 프로젝트에서 개발자 4명과 디자이너 한 명과 함께 협업하면서 겪었던 경험과 고민들을 나누려고 한다.처음 마주한 도전이번 프로젝트에서 리더 역할을 맡게 됐는데, 프로젝트를 진행하면서 작은 고민이 생겼다. 하나는 디자이너가 Figma에서 작업한 디자인을 코드로 구현하는 과정이었다. 디자이너는 모든 요소를 px 단위로 설계했고, 나는 최대한 디자인 시안과 동일하게 구현하고 싶었다.여기서 문제가 발생했다. 우리 조는 Tailwind CSS를 사용하고 있었는데, Tailwind에서 기본으로 제공하는 scale만으로는 디자인에서 요구하는 모든 px 값을 정확히 표현할 수 없었다. 그래서 나는 어쩔 수 없이 w-[410px]와 같은 방식으로 하드코딩을 하게 됐다... 2025. 4. 9.

티스토리툴바