본문 바로가기

트러블 슈팅

 (19)
[React] useInfiniteQuery로 페이지네이션 적용하고 난 후 데이터 깜빡임 현상 페이지네이션 적용하고 난 후 Cache된 데이터가 보이는 현상처음에는 removeQueries key값 하나만 주고, 댓글을 삭제하면 Cache된 곳에서 대댓글을 다 삭제하게 로직을 재구성했었다.곰곰히 생각해보니, 상관없는 Cache된 데이터도 삭제해버리니, 정작 react-query의 이점을 제대로 못 적용하고 있다고 생각이 들었고, 다른 기록의 댓글을 클릭하니깐 약간 깜빡임처럼 기존의 댓글이 보이는 현상을 확인 할 수 있었다.    해결 방안id값을 key값으로 인자를 더 넣어주어서 해당 id만 Cache된 데이터만 삭제하게 해주었다. 그리고 invalidateQueies를 적용하여 대댓글을 다시 불러오게 설정을 해주었다.const useNewCommentDeleteMutation = ({ recor..
[React-Query] react-query useInfiniteQuery를 이용해서 페이지네이션 개선하기 현 사항전에 팀원분이 페이지네이션 hook을 구현해 놓으셨는데, setState와 useEffect를 이용해서 구현을 해놓으셨다. 굳이 2가지의 요소를 사용하지 않아도 react-query의 useInfinteQuery를 이용해서 페이지네이션을 구현할 수 있다고 생각이 들어서, 다시 재제작을 해보았다. 구현 코드처음에는 조건문을 사용하지 않고, 아래처럼 구현을 했었는데 처음에는 0을 불러왔는데, 버튼을 클릭하니 페이지 2를 불러오는 문제점이 발생했다. lastPage.last?undefined:allPages.length + 1그래서 api 조건을 살펴보았는데, 우리쪽 백에서 page=0부터 시작하게 설정을 해놓아서, 아래처럼 조건문을 설정해놓았다! const useFeedInfiniteQuery = (..
[React] useInfiniteQuery page별로 받아오는 데이터 병합하기 현 사항지금 더 보기를 누르면 페이지를 불러오는 식으로, 페이지네이션을 구현하였는데, 같이 함께 했던 팀원이 따로 페이지네이션이라는 hook을 만들어서 setState와 useEffect를 이용하여 구현을 해 놓은 상태였습니다.하지만, react-query를 사용하고 있는 상황에서 이 페이지네이션 hook보다는 react-query의 useInfiniteQuery를 이용하여 개선을 하는게 좋다고 생각이 들어서 모든 페이지를 적용하고 있는데, 각 페이지마다 상황이 다르니깐 여러가지 문제가 생기게 되어서 정리를 하게 되었습니다. 문제 사항우선, 저의 경우에는 데이터가 오면 날짜 별로 데이터를 Grouping을 하였는데, useInfiniteQuery를 이용하다보니, 페이지가 서로 다르면 페이지 별로 날짜가 ..
[React] useCallback을 왜 제거할까? 문제 발생 - 사용자를 초대한 상태인데 똑같은 사용자를 초대했을 때 어떤 식으로 작동할까라는 예외사항을 만들어보았다. 역시나, 초대된 사용자를 X버튼을 눌러서 초대를 취소했을 때, 똑같은 사용자가 표시 된다. - 또, 닉네임을 입력하게 되면 입력된 만큼 query에 cache되는 모습을 확인 할 수 있다. 해결 방법- 초대 버튼을 누르면 무조건 refetch()가 되기 떄문에, 초대자에 해당 닉네임이 없을 때만 refetch()가 될 수 있게 조건 문을 설정하였다. 맨 처음에는 useCallback으로 감싸져 있어서, contributors, inputValue를 업데이트가 안되어서 계속 오류가 났었는데, useCallback을 감싼 로직을 삭제했다. - 그런데, useCallback을 사용해도 cont..
[react-query] 실행 시점 enabled, refetch를 이용하고, cache된 데이터 삭제 문제 발생- 닉네임을 입력하고, 초대를 누르고 해당 닉네임이 있다면 닉네임이 나옵니다. 처음에 똑같은 닉네임을 검색했다면, 초대 버튼을 누르지 않아도 리스트에 닉네임이 표시되는 문제점이 발생하였습니다.    - 로직에서 enabled를 이용하여 초대 버튼을 클릭시 enabeld가 true가 되며, useEffect를 이용하여 데이터가 변경되면 enabled가 false가 되게 처리하였습니다. 하지만 useEffect를 제거하고 로직을 개선의 필요성을 느꼈습니다.//enabled를 이용한 기존 코드const useGetUser = ({ q, enabled }: { q: string, enabled: boolean }): UseQueryResult => { return useQuery([USER_API_K..
[React-Query] 대댓글 기능 중 댓글 삭제 시 해당 대댓글 다시 불러오는 현상 해결 주요 기능지금 현재하는 프로젝트에서 댓글을 수정, 삭제, 답글을 달 수 있는 기능이 있다. 주요 기능을 설명하자면,1. 댓글 등록 기능2. 등록된 댓글 수정, 삭제, 대댓글 등록 가능3. 대댓글 등록 시 수정, 삭제 기능 4. 각 기능 별로 바뀌는 탭 바 문제 사항이런 식으로 구현이 되는데, 댓글 조회, 수정, 삭제, 등록, 상태별 바뀌는 탭 바는 최상위 부모 컴포넌트에서 제작을 하였다.  그래서 컴포넌트의 구조가 Comment->CommentList->CommentItem->ReplyCommentList->ReplyCommentItme 으로 구성이 되어 있는데,댓글 조회:Commnet, 대댓글 조회:ReplyCommentList로 불러온다. 이때 댓글을 조회,수정,삭제는 상단에서 관리해서 수월했지만, ..
현재 프로젝트에서 브랜치 전략 개선해보기 현재 진행하고 있는 프로젝트의 브랜치 전략 - main: 제품으로 출시될 수 있는 브랜치 - dev-fe: 다음 출시 버전을 개발하는 브랜치 - feature: 기능을 개발하는 브랜치 - dev-release: 이번 출시 버전을 준비하는 브랜치 총 4가지의 브랜치를 운영하고 있습니다. 1. main에서 dev-fe 브랜치를 생성한다. 2. 기능 단위로 이슈를 등록 후 feature 브랜치를 생성한다. - 2명이서 진행했기 때문에 담당자 이름 약자(ex: ayr)/feature/이슈넘버가 들어가게 브랜치 룰을 정했습니다. 3. 기능을 완성하면 feature 브랜치를 dev-fe에 merge한다. 4. dev-fe에서 pull 받아와서 제대로 작동하는지 확인 및 버그 수정을 진행한다. 5. 제대로 작동하면,..
GitHub Flow와 Git Flow 중에 어떤 걸 선택해야하지? 원래는 Git Flow를 적용해보려고, Git Flow에 대해서 공부하고 있었는데 공부를 하면서 점점 이상하다고 느껴졌습니다. 우선 지금 진행하고 있는 프로젝트가 소규모이기도하고, 빠르게 배포하고 수정해야했기 때문에 release 브랜치를 생성하여 CI/CD가 가능하게 제작해놓았는데, Git Flow 경우에는 버전에 맞게 배포를 진행하기 때문에 이게 맞나...?라는 생각이 문득 들었는데 그 와중에 GitHub Flow라는 것을 알게 되었습니다. Git 브랜치 전략 브랜치 전략은 여러 개발자가 하나의 저장소를 사용하는 환경에서 저장소를 효과적으로 활용하기 위한 work-floew며, 브랜치 생성에 규칙을 만들어서 협업을 유연하게 하는 방법론이다. Git-Flow Git Flow 전략 간단하게 살펴보기 Gi..

티스토리툴바