[유데미] React Query : React로 서버 상태 관리하기 📍props type 부여 - 부모 컴포넌트에서 넘겨준 props는 어떻게 type을 지정할까? 부모 컴포넌트에서 export한 type을 자식 컴포넌트에서 사용하기 위해 새롭게 typing이 필요 // 1. 부모 컴포넌트에서 타입을 import import { PostType } from "./Posts"; // 2. props에 맞는 형태로 재가공 // props가 여러개일때는 post밑에 이어서 쓰면 됨 interface PostProps { post: PostType; } // ... // 3. {} 뒤에 지정 export function PostDetail({ post }: PostProps) { // ... } 📍익명 함수 형..

[유데미] React Query : React로 서버 상태 관리하기 📍React Query Dev Tools이란? - 리액트 쿼리에서 기본 제공하며, 다양한 기능을 제공 - v4 부터 직접 import하게 바뀌었음! npm i @tanstack/react-query-devtools - Development 환경에서만 보여지므로 따로 -D 옵션으로 설치할 필요는 없다 📍기능 1️⃣key에 기반하여 쿼리를 보여준다 - 쿼리들의 상태 - 마지막 업데이트 타임스탬프 2️⃣반환된 데이터를 보여준다 3️⃣쿼리 탐색기 제공 📍사용방법 1️⃣npm install 후, query client를 생성한 컴포넌트 (App) 에서 import 해준다 2️⃣Provider 내부의 최하단에 devtools를 삽입 // App.t..

[유데미] React Query : React로 서버 상태 관리하기 📍prefetching 유저가 다음 페이지로 넘어가기 전에 미리 데이터 받아와서 매끄럽게 UI 변경하는 것 📍기본적인 사용 흐름 overview 1️⃣패키지 설치 npm i @tanstack/react-query 2️⃣query client 생성 - client는 쿼리와 캐시를 관리 3️⃣QueryProvider 적용 - children에 cache, client config 제공 - query client를 값으로 취함 4️⃣useQuery 훅 사용 - 서버에 쿼리하는 훅 📍QueryProvider // app.tsx // import import { QueryClient, QueryClientProvider } from "@tanst..

[유데미] React Query : React로 서버 상태 관리하기 📍@tanstack/react-query npm i react-query 대신 npm i @tanstack/react-query 📍query key들은 배열이어야 함 - 문자열 대신 배열로 묶기 📍devtools를 따로 설치해야 함 npm i @tanstack/react-query-devtools 📍setLogger가 제거됨 - 대신 QueryClient 옵션으로 logger를 추가한다

[유데미] React Query : React로 서버 상태 관리하기 📍클라이언트 상태 vs 서버 상태 - client state : 브라우저의 세션과 관련된 데이터 예) 언어, 테마 등 유저가 선택하는 정보 - server state : 서버에 저장된 데이터 fetching과 updating을 위해 비동기 API가 필요 예) DB에 저장된 post들 📍React Query의 역할 - React 앱에서 서버 상태를 쉽게 fetching, caching, synchronizing, updating 할 수 있다 - fetch로 바로바로 HTTP 요청을 보내서 데이터를 가져오는 것 대신 React Query가 cache한 데이터를 사용 - pagination / infinite scroll 쉽게 구현 가능 📍T..

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 1. CI & CD 📍CI (Continuous Integration) - 코드의 지속적 통합 - 일반적으로 코드를 통합한다고 하면 dev -> main 브랜치로 merge하는 것을 떠올린다 - 진정한 CI는 코드를 합치는 것 뿐만 아니라 코드를 테스트하고 유효한지 검사하는 확인까지 포함 📍CD (Continuous Deployment 또는 Delivery) - 코드의 지속적 배포 - CI를 통해 성공적으로 통합된 코드를 Development 또는 Production 환경에 자동으로 배포 - deployment : production 환경에 배포 - delivery : development 환경에 배포 📍CI/CD 플랫폼 - 개발..