본문 바로가기

Programing371

2024-08-23 TanStackQuery enabled 옵션으로 페칭 순서 조정하기 이것이 무슨 말이냐?상황을 보면 이해될 것이다. 코드를 작성하다 보니 이런 케이스가 발생했다. 다른 커스텀 훅을 통해 유저의 아이디만 추출한다.추출한 아이디로 API 라우트에 쿼리 매개 변수에 실어 GET 요청을 보낸다. 이거 두 개를 하고 싶었을 뿐인데,문제는 유저의 아이디만 추출해올 때 undefined가 찍혔다가 데이터가 불러와져서 그 사이에 비동기 함수인 GET 요청이 쿼리 매개 변수에 아무 값이 없는 상태로 넘어가게 되는 것이다. 그러니 계속 400 상태 코드와 함께 에러를 뿜어 낸다. TanStack Query로 상태 관리 중이라면 아주 간단하게 해결할 수 있다. 문제의 코드const { data: clickedBuddy, isLoading, error } = useBuddyProfile(pa.. Programing/TIL 2024. 8. 23.
2024-08-22 컴포넌트 재사용에 따른 조건부 로직 구현 방법 '팀 프로젝트'란 무엇인가부트캠프에서 마지막 프로젝트를 진행하면서 엄청난 깨달음을 얻었다. 이번 프로젝트까지 팀 프로젝트를 5~6번은 진행한 것 같은데,마지막 프로젝트는 약 한 달 간 진행하는 나름(?) 대규모 프로젝트였고,이전 프로젝트는 1~2주 내외의 비교적 간단한 프로젝트였다. 앞에 짧게 진행했던 프로젝트들을 거치면서 많이 성장했다고 느꼈었는데'팀 프로젝트'라는 것에 대한 접근법 자체가 틀렸었던 것 같다. 지금 와서 생각해보니 그 전의 프로젝트는4~5명의 개인 개발자들이 공용 리포지토리를 하나 만들어서각자 맡은 페이지나 기능을 만들어서 합치는 과정에 불과했던 것이었다는 생각이다. 내가 이런 생각을 하게 된 이유는 최종 프로젝트가 힘들어도 너무 힘들다는 것에서 '왜 그럴까'라는 고민에서 시작되었다. .. Programing/TIL 2024. 8. 22.
2024-08-21 광클을 방지하기 위한 노력 상황하트를 누르면 팔로우가 되는 버튼을 만들었다. 보기엔 간단해보여도자신에게 팔로우 요청을 보내는 것인지,이미 팔로우가 되어 있진 않은지,팔로우를 하려는 건지, 언팔로우를 하려는 건지로그인이 되어 있는지,상대방이 탈퇴한 회원은 아닌지 등굉장히 많은 비용이 발생하는 버튼이다. 그런데 기능 구현을 하고 나니, 뿌듯한 마음에 네트워크 탭을 열고계속 눌렀다 떼었다를 반복했다. 그러면서 문득 든 생각."사용자도 멍 때리면서 계속 누르기 딱 좋게 생겼는데?" 나의 서버비를 아끼기 위해 광클을 막아야겠다고 결심한 순간이다.한계나의 구현 방식에는 한계가 있다.카드 하나의 버튼을 광클하지 못하게 하는 것이고, 저런 카드가 수백장 있다고 했을 때매크로가 카드 엘리먼트를 찾아서 계속 클릭하는 것은 이 로직으로 막지 못한다... Programing/TIL 2024. 8. 21.
2024-08-20 이벤트 전파(event bubbling) 문제 상황사용자의 프로필 카드를 만들었다.그리고 그 프로필 카드 우측 상단에 하트를 만들었고, 하트를 클릭하면 팔로우가 되도록 하였다.follow API route가 다른 곳에서도 재사용되고 있는데 optimistic하게 보여줄 수 없는 페이지도 있어서optimistic update는 아니고,  기대하는 상황은 하트를 누르면 사용자의 프로필로 넘어가는 것이 아니라 (프로필은 카드 자체를 누르면 넘어가게 링크되어 있다.)팔로우 기능만 작동하기를 바란다. 그런데 팔로우 기능만 작동하는 것이 아니라 팔로우 버튼이 눌림과 동시에 카드 자체도 눌려진다. 버튼 위에 버튼이 있는 형상이다. 즉 자식 요소의 클릭 이벤트가 부모 요소의 클릭 이벤트까지 전파가 되었다는 것을 의미하고,이를 이벤트 버블링이라 한다. 마치 거.. Programing/TIL 2024. 8. 20.
2024-08-19 [Next.js, Supabase] 여러 테이블을 참조하는 DELETE 메서드 작성하기 구현하고자 하는 기능 파티를 삭제하면 다른 테이블에 참조되어 외래 키로 연결된 테이블의 정보까지 모두 삭제하고자 함. 현재 상황 파티를 모집하고 있다. 파티 자체는 trips라는 테이블에서 관리하고 있다. 그리고 trips에 참가하는 인원이 생기면 contract라는 테이블에 차곡차곡 기록이 된다. 테이블 구성과 구현한 로직은 이렇다. 사용자가 파티를 개설하면 trips 테이블에서 trip_id가 자동으로 생성되며 여러 데이터가 쭉 컬럼에 입력되며 하나의 레코드를 만들어 낸다.그리고 contract라는 테이블에 contract_id가 자동으로 생성되며 trips_trip_id에 아까 만들어진 trips 테이블의 trip_id와 외래 키로 묶이고, 이는 자바스크립트로 입력된다.그리고 파티를 만든 사람은 리.. Programing/TIL 2024. 8. 19.

티스토리툴바