전체 글 (501) 썸네일형 리스트형 쿼리 키 & 페이지네이션 & 데이터 pre-fetching & isLoading / isFetching & Mutation 쿼리 키 쿼리 키를 표현하는 방식에는 두 가지가 있다. 문자열 방식 => "post" 배열 방식 => ["comments", post.id] const { data, isLoading, isError, error } = useQuery( ['comments', post.id], () => fetchComments(post.id) ); 만약 배열 방식으로 쿼리 키를 표현한다면 쿼리 키를 쿼리에 대한 종속성 배열로 취급하게 된다. 따라서 쿼리 키가 변경되면 새 쿼리를 생성하여 각각의 staleTime, cacheTime 을 가지게 된다. 배열에 속해있는 값들이 전부 같으면 같은 쿼리라고 인식하여 cache 에 저장되어 있는 데이터를 이용한다. 따라서 데이터를 가져올 때 사용하는 쿼리 함수에 있는 값이 쿼리 .. React Query 개발자 도구 & staleTime vs cacheTime 1. React Query 개발자 도구 React Query 개발자 도구는 쿼리 키로 쿼리를 보여주고 모든 쿼리의 상태(활성, 비활성, 만료 등)를 말해준다. 또한 마지막으로 업데이트된 타임스탬프와 데이터, 쿼리 등을 보여준다. 공식 문서에 따르면 개발자 도구는 프로덕션 번들에 포함되지 않는다. 그러므로 개발 중일 때는 보이고, 프로덕션 모드에서는 보이지 않는다. 아래의 코드를 참고하면 꽃 모양 버튼으로 된 React Query 개발자 도구를 브라우저 하단에서 볼 수 있다. import { QueryClient, QueryClientProvider } from 'react-query'; import { ReactQueryDevtools } from 'react-query/devtools'; const q.. React Query : React로 서버 상태 관리하기 부트캠프가 종료된 후 지금까지 원하는 스택의 학습을 위해 다양한 공식 문서, 블로그, 온라인 강의를 접하였다. 나는 한꺼번에 마음에 드는 강의를 구입하고 원하는 순서에 따라 강의를 수강하는 편이다. 가장 먼저 들었던 강의는 유데미에 있는 'React 정복 가이드'였고, 그 후에는 인프런에서 '한 입 타입스크립트'를 들었다. 두 강의 전부 기본 개념을 잡기에 충분한 강의였고, 강의를 듣고 메모가 필요한 부분은 블로그에 바로 기록해두는 방식의 학습을 했기 때문에, 때때로 복습이 필요할 때 블로그에 기록한 글들을 참고하였고 정말 큰 도움이 되었다. 이번에 들어볼 강의는 유데미에 있는 'React Query : React로 서버 상태 관리하기' 이다. 'Next.js 정복 가이드' 강의도 함께 구입했는데, Ne.. [리트코드] 994. Rotting Oranges - js (BFS) 1. 문제 https://leetcode.com/problems/rotting-oranges/description/ Rotting Oranges - LeetCode Can you solve this real interview question? Rotting Oranges - You are given an m x n grid where each cell can have one of three values: * 0 representing an empty cell, * 1 representing a fresh orange, or * 2 representing a rotten orange. Every minute, any leetcode.com 2. 코드 처음 작성한 코드) 예상했지만..타임아웃 /** * @p.. [리트코드] 121. Best Time to Buy and Sell Stock - js 1. 문제 https://leetcode.com/problems/best-time-to-buy-and-sell-stock/description/ Best Time to Buy and Sell Stock - LeetCode Can you solve this real interview question? Best Time to Buy and Sell Stock - You are given an array prices where prices[i] is the price of a given stock on the ith day. You want to maximize your profit by choosing a single day to buy one stock and choosin leetcode.com 2. 코.. [리트코드] 11. Container With Most Water - js (투포인터) 1. 문제 https://leetcode.com/problems/container-with-most-water/ Container With Most Water - LeetCode Can you solve this real interview question? Container With Most Water - You are given an integer array height of length n. There are n vertical lines drawn such that the two endpoints of the ith line are (i, 0) and (i, height[i]). Find two lines that toget leetcode.com 2. 코드 /** * @param {number[].. [리트코드] 72. Edit Distance - js (DP) 1. 문제 https://leetcode.com/problems/edit-distance/ Edit Distance - LeetCode Can you solve this real interview question? Edit Distance - Given two strings word1 and word2, return the minimum number of operations required to convert word1 to word2. You have the following three operations permitted on a word: * Insert a character * D leetcode.com 2. 코드 다양한 문제를 봤을 때, 두 개의 문자열의 각 자리를 비교하여 최소값을 리턴한다, .. [리트코드] 1143. Longest Common Subsequence - js (DP) 1. 문제 https://leetcode.com/problems/longest-common-subsequence/ Longest Common Subsequence - LeetCode Can you solve this real interview question? Longest Common Subsequence - Given two strings text1 and text2, return the length of their longest common subsequence. If there is no common subsequence, return 0. A subsequence of a string is a new string genera leetcode.com 2. 코드 이 문제는 DP(누적합)를 이용하여 .. 이전 1 2 3 4 5 6 ··· 63 다음
