💻 개발/toy project17 [트러블 슈팅] Supabase 트리거 디버깅: participant_count가 업데이트되지 않는 미스터리 🚨 이슈 사항1) 목적 : 트리거를 통해 챌린지 참여자 수를 자동으로 관리하여 별도 업데이트 로직 없이 참여자 수 표시하기2) 최초 구현 방법 : - challenges 테이블에 participant_count 필드 생성 - participants 테이블의 INSERT/DELETE 이벤트 발생 시 트리거를 통해 자동 업데이트 - 참여 시(INSERT): participant_count + 1 - 탈퇴 시(DELETE): participant_count - 13) 이슈 내용 : 어느 시점부터 participant_count 필드가 업데이트되지 않음. 사용자들이 챌린지에 참여하거나 탈퇴해도 참여자 수가 변경되지 않는 현상 발생4) 이슈 원인.. 2025. 3. 27. [트러블 슈팅] 다중 인자를 Type Guard 하는 방법 오늘은 프로젝트에서 여러 개의 인자를 타입가드하다가 만난 오류들과 그것들을 어떻게 해결했는지 이야기해보려고한다! 🚨 문제 사항1) 목적 : Dropdown 컴포넌트에서 제어/비제어 컴포넌트 패턴을 모두 지원하면서, 반복되는 타입 체크 로직을 타입가드 함수로 분리하고자 함2) 최초 구현 방법 : typeof isOpen === 'boolean' && typeof setIsOpen === 'function' 조건을 직접 사용3) 문제 내용 : 타입가드 함수로 분리할 때 변수의 타입 정보가 제대로 좁혀지지 않음4) 문제 원인 : 객체 리터럴 전달 시 참조 불투명성 문제와 다중 인자 타입가드 미지원 이슈5) 해결 방안 : 객체를 먼저 변수로 정의하고, 해당 객체에 대해 타입 검증 후 사용 ⚠️ 문제 상세 내.. 2025. 3. 13. [트러블 슈팅] 배포하니까 에러가 바뀌었다 (ENV를 잘 작성하자) 🚨 이슈 사항1) 목적: API 호출 실패 시 사용자에게 에러 알림 표시하기 2) 최초 구현 방법: 유효하지 않은 API 키를 테스트용으로 사용하여 error 확인 후 react-toastify로 알림 표시3)이슈 내용: 개발 환경에서 react-toastify 알림이 2개씩 표시되는 현상 발생. React Strict Mode의 영향으로 추정하여 빌드 후 실행했으나 개발 환경과 다른 error가 나옴4) 이슈 원인: 개발 환경(.env.development)에는 API 키가 설정되어 있었으나, 배포 환경(.env.production)에는 API 키 설정 파일을 생성하지 않아 빈 문자열로 처리됨 5) 해결 방안: 배포 환경용 .env.production 파일을 생성하고 올바른 API 키 설정 ⚠️ 이.. 2025. 3. 12. Next.js 프로젝트에서 styled-components 에서 tailwindCSS로 바꾼 이유 오늘은 Next.js 프로젝트에서 UI 라이브러리를 styled-components에서 tailwindCSS 로 바꾼 이유에 대해 설명하겠다. 서론: styled-components 를 선택한 이유.스코프가 명확한 스타일링일반 css 를 사용한다면 프로젝트가 커질수록 클래스 네이밍 충돌이 발생할 수 있고, 어디서 적용된 스타일인지 확인하기 힘들 것이다.하지만 styled-components는 컴포넌트 단위로 스타일되면서 스타일 충돌 걱정 없이 사용할 수 있다.의미가 있는 컴포넌트명styled-components는 스타일이 지정된 의미있는 컴포넌트명을 사용할 수 있다.( 예시: ProfileButton, PostCard )직관적인 네이밍을 통해 가독성과 개발자 경험(DX)를 향상시킬 수 있을 것 이다.C.. 2025. 3. 3. Zustand와 Axios: React 컴포넌트 외부에서 상태 관리하는 방법 오늘은 Axios의 인터셉터에서 zustand 상태를 사용하려고 하다 마주친 문제에 대해 말해보겠다. 문제 상황기존에 유저 정보와 토큰을 직접적으로 localStorage의 setItem 과 getItem으로 관리하였다.이를 Zustand를 통하여 관리하도록 변경한 이후 모든 api 에서 아래와 같은 문제 발생하였다. 접근 방식일반적으로 에러가 발생하면 콘솔창 또는 API 호출과 관련된 내용이면 Network 탭, 터미널에서 자세한 오류 문구를 확인할 수 있다.하지만 이번의 경우 아무런 내용을 확인할 수 없었다! (왜 안 뜨는그야!) 이전에는 API 호출에 문제가 없었으므로, 수정했던 코드 중 API 호출과 관련된 코드로 범위를 좁혀서 찾아보기 시작했다. 다행히 이때 변경된 코드가 많이 없어서 생각보다.. 2025. 2. 25. json-server에서 관계형 데이터베이스 구축 및 사용 방법 프론트엔드 개발 시 백엔드 API를 대체하기 위해 자주 사용되는 json-server에서, 관계형 데이터베이스를 구축하면서 겪은 에러와 이를 바탕으로 알게된 사용방법에 대해 설명해보겠다. 📄 개발 시나리오사용 방법에 대해 설명하기에 앞서 앞으로 나오는 예제에 대해 간단히 설명하겠다.예시들의 내용은 간단한 블로그 시스템을 구축하는 프로젝트로, 아래와 같은 기능이 있다.사용자는 회원가입하고 로그인할 수 있다.사용자는 글(포스트)을 작성, 수정, 삭제할 수 있다.사용자는 다른 사용자의 글에 댓글을 달 수 있다.이 예시를 기준으로 관계형 데이터베이스를 구축하고 사용하는 방법을 알아보자! 🕶️ 사용 방법1. 설치json-server를 사용하기 위해 일단 패키지를 설치하자.$ npm install json-se.. 2025. 2. 25. 이전 1 2 3 다음
