| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |
- 프론트엔드 웹
- K-SW SQUARE
- 자바스
- 웹아키텍처
- ios 크로스브라우징
- 리액트 쿼리
- activeElement
- 로현 청춘의개발
- 자바스크립트 호이스팅
- React Query
- 모던 자바스크립트 Deep Dive
- 자바스크립트 중첩함수
- AWS 로드밸런서
- but requested an insecure XMLHttpRequest endpoint 'http://~~’. This request has been blocked; the content must be served over HTTPS.
- 자바스크립트 렉시컬스코프
- 모두의시간
- 퍼듀대학교
- 사파리 가상키보드
- 자바스크립트 변수 호이스팅
- 자바스크립트
- net::R_SSL_PROTOCOL_ERROR
- 자바스크립트 null 병합
- 자바스크립트 스코프 체인
- active blur
- Kafka
- 리액트 가상키보드
- touchmove 이벤트
- EC2 HTTPS로 연결
- refetchOnWindowFocus
- Purdue university
- Today
- Total
목록React Query (2)
개발 여행자, 현
React-Query : refetchOnWindowFocus 이슈 해결과정 (feat. API 재호출)
1. 이슈 발생 React Query 도입 이후 로그인 페이지에서 사용되는 Input 컴포넌트 리팩터링 도중에 동일한 API를 여러번 호출하는 이슈를 발견했다. 개발자 도구의 네트워크 탭을 확인하면 동일한 API가 여러번 호출된 것을 확인할 수 있다. 이런 상황이 발생하는 경우는 다른 인터넷 창, 탭, 어플리케이션에 방문했다가 돌아오면 API를 재요청하는 것이었다. 알고보니 Background Refetch라는 개념이 있었다. 2. 어떻게 해결했나? - Background Refetch (feat. refetchOnWindowFocus) Background Refetch란 브라우저가 해당 캐시에 대한 데이터를 재요청하는 것으로, 이를 통해 캐시가 항상 최신의 상태를 유지하도록 한다. - refetchOn..
[모두의시간] React-Query 도입기
react-query 도입기 모두의 시간 프로젝트를 짧은 기한 내에 개발하면서 유지보수의 필요성을 크게 느끼고 있었다. 메인 개발을 전부 마친 이후에 공통 컴포넌트를 우선적으로 재정돈하고 react-query를 도입했다. React Query를 도입 해야겠다고 생각한 가장 큰 이유 중 하나는 API를 요청해야 하는 페이지가 하나 둘 늘어났고 useEffct, async await, try catch, loading state... 코드의 줄 수가 불필요하게 길어지고 복잡해졌기 때문이다. 또한 생성한 방의 정보를 불러오는 API를 호출하는 페이지가 많은데, 데이터가 업데이트 되지 않았을 때는 일정시간 내에는 동일한 데이터를 사용하는게 맞다고 판단했다. API 요청을 최소화 하고싶었고, 추후 방생성하는 페이..