Today Hailie Learned

useQuery와의 차이점1. 반환 객체에서 반환되는 데이터 속성의 구조와 형태 (pages, pageParams)useQuery를 사용하면 쿼리 함수에서 데이터가 data 속성에 담겨 반환되지만, useInfiniteQuery 에서는 반환되는 객체가 data와 pages라는 두 가지 속성을 포함한다. pages는 각 데이터 페이지를 나타내는 객체의 배열이다. 따라서 pages 배열의 각 요소는 useQuery를 사용했을 때 각각의 쿼리에서 받을 수 있는 데이터에 해당한다.   pageParams (페이지 매개변수)도 있는데, 이는 각 페이지마나 사용하는 파라미터를 기록한다. (잘 사용되지는 않는다.)  그래서 각 쿼리는 pages 배열의 자신만의 요소를 가지고 있고, 그 요소는 해당 쿼리의 데이터를 나..

tanstack query를 사용해서 데이터 패칭을 하는데 페이지네이션을 구현할 때, 다음 페이지로 이동을 할때마다 로딩 화면이 살짝 보이는 것을 개선하기 위해서는 prefetching 을 사용하면 된다.  prefetching을 사용하면 말 그대로 데이터를 미리 가져와서 캐시에 넣고 사용자가 로딩 화면을 보지 않도록 할 수 있다.   prefetchQuery는 QueryClient 의 메소드이고, useQueryClient 훅을 써서 그 QueryClient를 가져올 수 있다.  상태 업데이트가 비동기적이라 업데이트가 이미 적용되었는지 정확하게 알 수 없기 때문에 다음 페이지 버튼의 클릭 이벤트에서 prefetching이 실행되도록 하지 않는게 좋다. 그래서 현재 페이지가 변경될 때마다 useEffec..

staleTime데이터가 오래됐다. 유효기간이 만료됐다. 데이터는 여전히 캐시에 있다. 그저 데이터를 다시 검증해야한다는 뜻이다.  데이터 prefetch는 데이터가 stale일 때만 트리거된다. (쿼리 포함하는 컴포넌트 다시 마운트되거나 브라우저 창이 리포커싱될 때)stale 시간을 데이터의 최대 수명으로 생각하면된다. (서버로부터 가장 신선한 데이터 버전을 가져오기 전에 데이터를 살려둘 건지) - useQuery 옵션에서 stale 시간 조정 가능const { data, isError, error, isLoading } = useQuery({ queryKey: ["posts"], queryFn: fetchPosts, staleTime: 2000, }); 데이터가 stale이어야 re..

isFetching비동기 쿼리가 아직 해결되지 않았다.아직 fetch가 완료되지 않았지만, axios 호출이나 graphGL 호출 같은 다른 종류의 데이터를 가져오는 작업일 수 있다.  isLoadingisFetching의 하위 집합으로 로딩 중이라는 것을 말한다. 쿼리 함수가 아직 미해결이지만, 캐시된 데이터도 없다. 이 쿼리를 전에 실행한 적이 없어서 데이터를 가져오는 중이고 캐시된 데이터도 없어서 보여줄 수 없다.  => 페이지네이션 측면에서 캐시된 데이터가 있는지 없는지 구분하는 것이 중요  React Query Dev Tools=> 모든 쿼리의 상태, 활성, 비활성, stale(오래됨) 등을 알려준다. => 마지막 업데이트 시간도 알려준다.  => 데이터 탐색기도 있어서 쿼리로 받은 데이터를 볼..

1. 불필요한 연산 줄이기1. 연산된 값을 props로 넘기기2. useMemo로 연산 최적화하기 2. 문자열이면 중괄호 쓰지 않는다.  3. Props에서 spread 연산자가 쓰이면, 관련있는 props, 관련없는 props, 나머지 props로 나눠보자! 4. 너무 많은 props를 넘기는 경우분리를 해보자. 5. props에 객체 전체를 내리지 말고, 꼭 필요한 값만 내리자. 6. React.Fragment의 shortcut: key 값을 위해서는 사용

◆ docusaurus에서 최신 블로그 글 가져오는 방법 (사진이나 글쓴이 없이 제목과 링크만 가져오는 방법) import React from 'react' import recentPosts from '../../../../.docusaurus/docusaurus-plugin-content-blog/default/blog-post-list-prop-default.json' const BlogItem = () => { // console.log(recentPosts) return ( {recentPosts.items.slice(0, 5).map((item, index) => ( {item.title} ))} ) } export default BlogItem 참고) https://stackoverflow.c..

✔️ 환경 변수 파일이란? 애플리케이션이 실행될 때 특정 값을 넘길 수 있는 변수를 의미합니다. .env 파일에 정의된 변수를 의미하고, 미리 정의된 값을 애플리케이션에서 활용하고 싶을 때 사용합니다. ✔️ 환경 변수 파일을 왜 사용할까? 👉보안과 유지보수에 용이하기 때문에! port, db 관련 정보, API_KEY 등 오픈소스에 올리면 안되는 값을 dotenv 패키지(환경변수 파일)를 사용해서 소스코드 내에 하드코딩하지 않고 사용할 수 있다는 장점이 있습니다. ✔️ 사용 방법 ▶ .env 내에서 환경변수 적는 방법 REACT_APP_FIREBASE_API_KEY = "" REACT_APP_FIREBASE_AUTH_DOMAIN = "" ▶ 환경변수 가져와서 사용하는 방법 apiKey: process.e..

지금까지 2번의 프로젝트에서 로그인/ 회원가입 파트를 맡았는데 그때는 모두 로그인, 회원가입을 별도의 경로로 분리해서 만들었다. 그런데 이리저리 구글링을 하다가 위의 gif처럼 탭 형식으로 로그인과 회원가입을 만들어보고 싶었다! 그래서 도전! 사용한 기술스택 React, Typescript, Styled-components 구현할 퀘스트 1. 로그인/회원가입 탭을 누르면 버튼이 각각 로그인, 회원가입으로 바뀐다. 2. 클릭되는 로그인/회원가입 탭을 css로 표시한다. 3. 이메일에 @, . 포함되고, 비밀번호가 8자리 이상일 때 버튼이 활성화된다. 1. 로그인/회원가입 탭을 누르면 버튼이 각각 로그인, 회원가입으로 바뀌게 하기 탭부분과 폼부분을 나눠서 만들어서 붙이면 된다. 그리고 로그인이 된 상태를 알..

✔️ Next.js는 무엇인가? vercel에서 만든 리액트의 프레임워크!! 클라이언트 사이드 기술과 서버 사이드 기술을 모두 가지고 있는 올인원 솔루션입니다! api를 구현해서 프론트엔드인 리액트와 하이브리드하면 간단하게 서버 기능과 프론트엔드 기능을 모두 가지고 있는 애플리케이션 스택을 구축할 수 있습니다. ** 라이브러리 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미합니다. 폴더명, 파일명 등에 대한 규칙이 없고 프레임워크에 비해 자유롭습니다. ex) 무언가를 자를 때 '도구'인 '가위'를 사용해서 '내가' 직접 컨트롤하여 자른다. ** 프레임워크 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미합니다. 폴더명, 파일명 등에 대한 규칙이 있고 라이브러리에 비해 좀 더 엄격합..

axios는 response.data로 받고, fetch는 response.json()으로 받는다! axios useEffect(() => { axios .get("http://localhost:3001/user") .then((response) => response.data) .then((item) => setUserData(item)); }, []); fetch useEffect(() => { fetch(`http://localhost:3001/user/`) .then((response) => response.json()) .then((item) => setUserData(item)); }, []); 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓