본문 바로가기

📄Today I Learned41

연락처가 추가됐는데, 왜 화면엔 갱신이 안될까? 문제 상황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.
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.
Next.js에서 Tailwind CSS가 권장되는 이유 Next.js 프로젝트에서 Tailwind CSS가 많이 권장되는 데는 여러 이유가 있다.1. 자동으로 적용되는 Reset CSSTailwind CSS는 기본적으로 브라우저 간의 일관된 스타일링을 위한 Reset CSS(또는 Normalize CSS)를 포함하고 있다. 이는 별도의 설정 없이도 모든 브라우저에서 동일한 기본 스타일링을 제공하여 개발자의 부담을 줄여준다.2. Zero-Runtime 스타일시트Tailwind CSS는 "유틸리티 우선" 접근 방식을 사용하며, 빌드 시점에 사용된 클래스만 포함하는 최적화된 CSS를 생성한다. 이는 다음과 같은 이점을 제공한다:런타임에 JavaScript로 스타일을 계산하지 않아 성능이 향상된다.빌드 단계에서 사용하지 않는 스타일은 제거되어 최종 CSS 파일 크기.. 2025. 3. 22.

티스토리툴바