# refetch

ktw9115

✅ 성능 최적화 전에 알면 좋은 것 ❓ 브라우저 주소창 결국은 api get을 이용한다. 비교 >- 브라우져 ⇒ 가지고온 데이터(HTML)를 그림으로 바꿔주는 것이다. >- 포스트맨 ⇒ 요청 했을 때 데이터만 받아오는 것이다. >- axios ⇒ 프로그램 상에서 데이터를 요청하고 받아올 때 사용하는 것이다. >- curl => 터미널 cmd의 curl로 주소를 요청할 수있음. ❓ 브라우저의 정보를 가져오는 방법 방식의 차이 >- 스크래핑 브라우저의 정보를 1번 가져오기 ⇒ Cheerio >- 크롤링 브라우저의 정보를 계속 가져오기 ⇒ Puppeteer 🤔 고려사항 cors(cross-origin-resource-sharing) >- sop(same-origin-polic) 정책으로 인해서 생기는 에러이다. >- proxy server 만들면 접근이 가능해서 백엔드에서 작업을 많이 한

taejun-baek

왜 댓글을 작성했는데 새로고침을 하기 전까지 업데이트가 되지 않는걸까? 1번째 시도 결과:실패 onMutate 옵션을 사용하여 mutate 함수가 호출된 직후에 새로운 데이터를 다시 가져오도록 해보았다 실제로는 onMutate 옵션을 사용하는 것으로만으로는 댓글을 작성하자마자 즉시 업데이트되지는 않습니다. onMutate 옵션은 mutate 함수가 호출된 직후에 실행되는 콜백 함수이지만, useQuery 훅이 리턴하는 data는 axios.get 요청을 기반으로 한 데이터로 초기화됌 2번째 시도 결과:성공 onMutate 옵션은 주로 mutate 함수가 성공적으로 호출되었을 때 데이터를 업데이트하는 등의 사후 작업을 수행할 때 사용됩니다. 따라서 댓글을 작성하자마자 즉시 업데이트를 보고 싶다면, 아래와 같이 onMutate 옵션을 사용하는 것이 아닌, 댓글 작성 성공 후에 refetch 함수를 호출하여 새로운 데이터를 가져오도록

chhw130

🔴 리액트쿼리를 사용하면서... > 리액트 쿼리를 커뮤니티 프로젝트를 수행하면서 사용하였는데, 커뮤니티 특성 상 실시간으로 업데이트 되어야 하는 부분이 많았다. 하지만 이런 이유로 쿼리 요청을 많이 하기 때문에 최적화 해야 하는 부분이 필요했다... (쿼리 요청을 최적화하지 못했기 때문에 백엔드 서버 DB의 사용이 너무나도 많아, 요금이 무지막지하였다...) 🟠 일단 Stale과 Cache에 대해서 &nbsp react-query는 상태 관리 라이브러리로서 데이터를 효율적으로 가져오고 관리하기 위한 기능을 제공한다. 그런데 우리는 우선적으로 stale time과 cache time에 대해 이해하고 갈 필요가 있다. Stale time(defa

bie38

페이지네이션 구현 중 페이지를 클릭하면 해당하는 데이터를 불러와야 하는데, HomePage에서 페이지네이션 컴포넌트로 page값을 넘겨주어 구현했더니 데이터를 제대로 받아오지 못했다. 그래서 useEffect를 사용하려는데, 리액트 hook 규칙에 따르면 useEffect 안에서는 custom hook 함수를 사용할 수 없다고 오류가 발생했다. 대안으로 state를 사용해보았다. HomePage.tsx 위와 같이 useQuery로 데이터를 가져오고, state를 만든 다음 데이터를 적용해주고 useEffect안에서 useQuery를 사용하지 않고 다시 데이터를 불러와 state로 값을 변경하여 보여주었다. 근데 너무 비효율적이잖아.. 이럴거면 useQuery 왜 사용해..? 물론 다른 방법이 있겠지만 이건 아니다 싶어 다시 검색해봤더니 react-query에서도 refetch 함수를 제공해주었다. refetch() 적용하기 u

creyon0215

INDEX 카카오 맵 API, 구현, script 태그의 비동기 작동 이슈, 카카오 맵 커스텀(초기 위치 설정, 마커 추가), refetch의 문제점과 개선 방법 카카오 맵 API 검색창에 주소지를 입력하면? 보통 지도가 나타나고 지도를 통해 경로, 주소를 파악할 수 있다. 또한 현재 내 위치를 알려주기도 좋고 맵을 내 프로젝트 안으로 적용한다면 편의성이 향상된다. 지도 API의 종류에는 구글, 네이버, 카카오 등이 있는데 지도 API 간에는 제공하는 기능의 종류, 비용 등의 차이가 있으므로 이를 고려해 API를 결정하면 된다. 카카오 개발자(Kakao Developers) 페이지 : https://developers.kakao.com/ 모든 API가 무료는 아니며 일정 사용량 초과시 유료로 전환되는 경우도 있다. 카카오에서 제공하는 개발자 A

koyk0408

useQuery는 get할때 사용하는 메서드였다. create했을때 리스트가 업데이트되지않아서 당황했음. refresh를 삭제해서 그런거겠지만... 리액트쿼리에 이부분을 위한 메서드가 있을거라고 생각했다. 찾아보니 useMutation이라는 것을 사용해서 CUD를 하고, 여기서 refetch해주는 게 따로 있다고 함. > 리액트 쿼리 mutation https://react-query-v3.tanstack.com/guides/mutations Create Before After > 이런식으로 작성했더니 바로 업데이트가 안된다. 위에서처럼 이렇게 써야 업뎃이 바로 됨. 유니크 키로 맵핑된 get함수를 실행하게 된다. setQueryData는 get함수의 파라미터를 변경해야할때 사용한다고 한다. Delete Before After 리액트 쿼리를 사용하니 다른 코드에 대한 의존도가 낮아진 것 같다. 그놈의 리프

zoo0

emotion에도 props를 전달할 수 있다. 어떤 태그를 클릭하거나 하는 이벤트가 일어날 경우 props를 주어 css를 변경해줄 수 있다. 작성자, 제목, 내용을 모두 입력했을 때 버튼의 색이 바뀌게 해주려면 일단 state를 false값으로 하나 만들어준다. return 부분에 적어주고, if문으로 조건을 달아준다. emotion.js에서도 컴포넌트에 함수를 만들어준다. 백틱``

minsu2344

코드 배운점 refetching 방법 및 loading data 컨트롤 axios 어려워했는데 더 어려워진 것 가ㅌ...

rlaclgns321

현재까지 우리는 refetch 라는 기능을 통해서 손쉽게 화면을 업데이트 했습니다. 하지만 이는 좋은 방법은 아닙니다. 불필요한 네트워크 요청을 백엔드에 한 번 더 보내게 되는 것이죠. 따라서, 추가적인 네트워크 요청 없이 프론트엔드의 apollo 저장소에 직접 자바스크립트로 CRUD를 하게되면 대규모 환경에서 더 효율적인 서비스를 제공할 수 있겠죠? 업데이트 방법은 아래와 같습니다

rlaclgns321

refetchQuery는 기존에 받아왔던 데이터가 변경 되었을 경우 최신 데이터로 다시 fetch 해주기 위해 사용됩니다. 어떻게 사용하는지 예제를 통해 알아보겠습니다. 아래 예제는 사용 방법으로만 보시면 좋을 것 같습니다. refetchQuery의 사용 방법 위의 코드는 흔하게 볼 수 있는 삭제 Mutation입니다. 위 코드는 삭제 Mutation이 실행 된 후에는 데이터가 변경 되었을 테지만 아직 최신 데이터가 반영 되지 않았습니다. 따라서 refetchQueries를 이용해 최신 데이터로 다시 받아오겠습니다. 위의 코드를 자세히 살펴보시면 useMutation 함수 안에서 refetchQueries라는 키가 있다는 것을 알 수 있습니다. refetchQueries는 Apollo에서 제공하는 기본 기능입니다. refetchQueries는 배열로 시작하여, 그 안에 **어떤 query를

favorcho

form submit 이벤트가 발생했을 때 비동기 통신을 하기 위해 useQuery 관련 자료를 찾아봤다. 1. polling 방식 쿼리가 일정 주기마다 실행되도록 하여 서버와 실시간에 가까운 동기화를 제공한다. 쿼리에 대한 polling을 활성화 하려면 pollInterval 옵션얼 설정해준다. refetching 방식 polling 방식처럼 일정 간격으로 update 를 하지 않고 특정 사용자의 액션에 대한 응답으로 쿼리 결과를 refetch 해준다. 적용 Search.tsx api 아직 api 연동을 안해서 형태만 잡아 놓았다. api 구축이 잘 되어 비동기 통신이 잘 이루어지면 좋겠다.

space086

📔 학습목표 state의 동작원리    >>    SetState 최신 데이터 다시 가져오기    >>    refetch 목록에서 삭제하기    >>    key/index > 지난 시간 수업 코드리뷰 container / presenter 부모 자식 관계 게시판 등록해서 버튼 어쩌구 이해하고 넘어가기!!!!! props drilling 드릴링이 많은 건 좋은 방법은 아니다. props가 뚫고 지나간다고 해서 드릴링이라고 함. JSX = 자바스크립트 XML 객체의 키와 밸류 둘의 이름이 항상 같아야 하는 건 아니다. container의 리턴 안의 이벤트를 적어주고 presenter 매개변수에 props를 적어주고 이벤트 맨 앞에 p

songinho96

깃 다시 오늘 목표 props drilling: props를 부모가 자식에게 물려주고 자식이 그 자식에게 물려주는 방식 많다고 좋은것은 아니다 복습 파일을 나누면서 container : 자바스크립트 영역 presenter : HTML ( JSX ) 영역 기능을 연결시켜 주기 위해 props로 객체형식으로 던져줌 키값은 변

championcom

현재까지 우리는 refetch 라는 기능을 통해서 손쉽게 화면을 업데이트 했습니다. 하지만 이는 좋은 방법은 아닙니다. 불필요한 네트워크 요청을 백엔드에 한 번 더 보내게 되는 것이죠. 따라서, 추가적인 네트워크 요청 없이 프론트엔드의 apollo 저장소에 직접 자바스크립트로 CRUD를 하게되면 대규모 환경에서 더 효율적인 서비스를 제공할 수 있습니다. 예시를 한번 보쉬죠~ 간략히 소개 하자면 패치 보드해서 데이터를 불러오고 id, writer ,title 를 useQuery를 통해서 불러 오고 있습니다. 이때까지 refetch를 사용했습니다. 하지만 여기서는 varialbes로 요청하고 캐쉬를 직접 업데이트 해주고 있습니다. 여기서 refectch를 사용하게 되면 또다시 DB에

kimareum

(와씨 타입스크립트쓰다가 맨날 가능한 제네릭이 아닙니다..그놈의 제네릭 제네릭으리아ㅡㄹ아거!!!!1이랬는데 드디어 배운다는 소식에 감동..) 신나는 6주차의 커리큘럼 !!! > ## - 비구조화할당(= 구조분해할당) 비구조화 할당이란? 기존에 객체에있는 값을 꺼내올때 간편하게 표현하게 하기 위해 적는 방식을 비구조화 할당이라고 한다 ! 중괄호는 객체 안에있는 키값을 빼서 변수로 선언하겠다 ! -> **child라는 객체의 키와 벨류값을 따로 뽑아 저장하고 싶을때, 마지막 한줄이 위의 3줄을 줄인

jinyinshu

1. serch, query, refetch Search.tsx ~ SearchBar component를 styled.TextInput로 만듬 [query, setQuery] = useState('')를 만들어서 query값을 담을 State를 만듬 onChangeText함수를 만들어서 text를 setQuery(text) query에 담음 onSubmit 함수를 만들어서 query값이 null일때 return을 하고, 값이 있으면, refetch()를 실행한다. refetch하는 이유는 Page가 첨 열렸을떄, useQuery가 실행되지 않게 해 놓음. { enabled: false } , 그 이유는 page가 rendering됬을때, useQuery가 실행되면 query가 null인 상태로 movies.search로 보내짐. component에 props들을 담는다. <SearchBar

kimareum

오늘의 요약 _**오늘은 for문을 대신해 반복을 수행하는 map과 관련된 내용을 배웠습니다! 기존에 우리가 알고 있던 반복문 for문은, 사실 실무에서 자주 사용되진 않습니다. 대신에 map을 사용해서 반복을 실행하고 break문과 continue문은 filter로 대신 사용하게 됩니다! filter와 map을 연달아 사용할 수도 있다는 점 또한 기억하시죠!? map을 활용해서 목록을 화면에 나타낼 때, key를 넣어주어야 하지만, 그렇다고 key를 index와 같이 고유하지 않은 값으로 주시면 안되는 것! 주의해 주세요! 마지막으로, 게시물을 수정/삭제 했을 때, refresh가 되도록 보여주려면 refetchQueries를 활용해서, 다시 요청해주었습니다! 오늘 배운 내용들은 실무에서 자주 사용하게 될 내용인만큼 복습과 실습을 통해 map,filter 사용에 익숙해지시길 바랍니다!**_ >### - 포트폴리오리뷰 -필수내용 다 작성했을때 버튼 불들어오게 하는 함수 use

j00b33

⬇️ Main Note https://docs.google.com/document/d/1qX7bD1p08PT3N80BDoDXmSgV4sDOsu21TZJl0EF7qdE/edit 🌻 [Destructuring] 비구조화할당(=구조분해) {Object Destructuring} By destructuring, the user cna

junejae_1625

refetchQueries Query를 다시 Fetch한다는 것으로 useMutation을 한 후 기존에 받아왔던 Query의 데이터가 변경되었을 경우 사용하게 된다. 예를들어, Query로 게시글들의 목록을 10개 불러왔다고 하자. 그런데 Mutation을 통해 하나를 삭제하면 게시글은 9개가 되는데, 이럴 경우 다시 Query를 통해 서버에서 9개 짜리의 데이터를 받아와야 한다. 이때, Mutation에 refetchQueries 기능을 이용하면 위의 예시를 간단하게 작성할 수 있다. 코드를 통해 자세히 알아보자. ![](https://images.velog.io/images/junejae_1625/post/d80c98a7-0a2d-4c08-9407-cafa3cc0f763/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-01-18%20%E1%8

wisdoom03

[ map / filter ] 1️⃣ map map 동일한 로직 반복 1) 연습하기 > #### 배열적용 > #### 객체적용 > #### 그 외 적용 객체추가 2) 소괄호 생략이 가능하다 : 화살표함수의 특성 ![](https://images.velog.io/images/wisdoom03/post/fdd6a130-7bc0-