프라이D
프라이Develog(❁´◡`❁)
프라이D
전체 방문자
오늘
어제
  • ALL (378)
    • TDD, Cleancode with JavaScr.. (5)
    • 프로젝트 (32)
      • work (3)
      • 직접 만드는 기술 블로그 (2)
      • 데일리 옥션 (19)
      • 모락모락 (8)
    • Computer Science (1)
    • Algorithm & 자료구조 (94)
      • 알고리즘 w.JavaScript (53)
      • 자료구조 (5)
      • (인프런) 자바스크립트 알고리즘 문제풀이 (34)
    • JavaScript (45)
      • JavaScript (41)
      • 모던 자바스크립트 Deep Dive (4)
    • WEB (13)
    • 회고 (12)
    • TIL (109)
    • WIL (7)
    • Stacks (20)
      • React.js (6)
      • Next.js (1)
      • Redux (3)
      • Node.js (2)
      • GIT (2)
      • SAP (1)
    • 15일 메이킹 프로젝트 (15)
    • 이전 기록 (14)
    • ETC. (5)
    • ---------------2021 (6)
      • 내일배움단-웹개발 5주 (2)
      • 정보처리기사 (4)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • 코딩프로젝트
  • 알고리즘
  • MySQL
  • JavaScript
  • nomadcoders
  • 비트마스크
  • 내일배움카드
  • 자바스크립트
  • 스파르타코딩클럽
  • 코드스테이츠
  • nomadcoder
  • 내일배움단
  • 2023 인프콘 후기
  • 자바스크립트비트마스크
  • 자바스크립트알고리즘
  • 국비지원
  • 모던자바스크립트딥다이브
  • 투포인터알고리즘
  • Til
  • vanilaJS

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
프라이D

프라이Develog(❁´◡`❁)

# 작업일지 18 / 조건에 따른 데이터 refetch, 검색 기능 로직 수정
프로젝트/데일리 옥션

# 작업일지 18 / 조건에 따른 데이터 refetch, 검색 기능 로직 수정

2023. 3. 2. 19:55

이틀간 SSE와 싸워 지쳤던 나는, 나머지 마무리 하지 못한 기능을 마저 완성하기로 했다. 

 

1. queryClient.refetchQueries(key) 메서드로 실시간 데이터가 업데이트 될 때마다 refetch 되도록 했다. 

상품 상세페이지에서 입찰 후 실시간 데이터가 변경이 될 때, 웹소켓으로 받아오지 않는 나머지 데이터에 대해서도 업데이트 되도록 했다. 이제 훨씬 자연스럽고 더 실시간으로 변경되는 느낌이 난다. 

위와 같이 key값을 넘기면 간단하게 사용이 가능하다.

 

option에 enabled 라는 속성에 boolean 값을 넣으면 평가에 따라 refetch 하도록 할 수 있는데, 나의 경우 response 데이터가 변경될때마다 상태를 처리하는 것보다 refetchQueries 라는 메서드를 쓰는게 더 명확하게 업데이트 할 수 있어서 위와 같이 작성해주었다. 

 

2. 커스텀 훅을 만들어서 게시글 상세 데이터에 대한 useQuery 중복 코드를 리팩토링했다. 뭔가 공통으로 적용될 수 있도록 훅을 만들어서 더 효율적으로 만들고 싶은데, 좋은 방법이 떠오르지 않는다. 좀 더 찾아봐야겠음.

그리고 그 외 검색 기능 구현도 마무리 하고 (요청 엔드포인트에 오타가 있어서 안되고 있었다. ) 인기 검색어 API도 연결하였다. 목데이터를 토대로 로직을 미리 작성해 두어서 훨씬 빠르게 수정할 수 있었다.

저작자표시 (새창열림)

'프로젝트 > 데일리 옥션' 카테고리의 다른 글

# 작업일지 20 / SSE 알림 기능 상태관리, 화면 렌더링!  (0) 2023.03.06
# 작업일지 19 / SSE 연결하여 알림 기능 구현하기  (0) 2023.03.02
# 작업일지 17 / SSE 야! 이미 연결 되어있는데 왜 자꾸 끼어들어!  (2) 2023.03.02
# 작업일지 16 / SSE를 연결해보자! Event source polyfill 라이브러리 사용해보기. 연결은 왜 끊어지지 않는가.  (0) 2023.02.27
# 작업일지 14,15 / 웹소켓 연결, 차트에 실시간 데이터 업데이트하기(Chart.js)  (0) 2023.02.24
    '프로젝트/데일리 옥션' 카테고리의 다른 글
    • # 작업일지 20 / SSE 알림 기능 상태관리, 화면 렌더링!
    • # 작업일지 19 / SSE 연결하여 알림 기능 구현하기
    • # 작업일지 17 / SSE 야! 이미 연결 되어있는데 왜 자꾸 끼어들어!
    • # 작업일지 16 / SSE를 연결해보자! Event source polyfill 라이브러리 사용해보기. 연결은 왜 끊어지지 않는가.
    프라이D
    프라이D
    틀린내용 정정 및 개선사항은 언제든지 댓글 달아주세요 :D

    티스토리툴바