분류 전체보기

Apollo Link 개요와 주요 기능

Apollo Link Apollo Client에서 GraphQL 요청을 전송하고 응답을 처리하는 과정을 확장하거나 수정할 수 있는 유연한 미들웨어 시스템이다.링크 체인을 구성하여 다양한 기능을 수행할 수 있다.  요청 수정각 요청에 대해 헤더나 인증 토큰 등을 추가하거나, 변형할 수 있다.에러 처리요청 중에 발생하는 에러를 처리하거나, 재시도 로직을 구현할 수 있다.캐시 관리캐시를 관리하거나 요청을 캐시를 사용해 최적화할 수 있다.네트워크 요청HTTP를 통해 요청을 보내거나 WebSocket을 사용하여 실시간 통신을 할 수 있다.  Apollo Link는 여러 개의 링크를 체인으로 연결하여 각 단계마다 처리 로직을 추가할 수 있다.HttpLink는 기본적으로 HTTP 요청을 보내는 역할을 하고,Error..

Apollo Client 캐시 동작과 관리 방법

Apollo Client의 캐시 GraphQL 데이터를 효율적으로 저장하고 관리하기 위한 메커니즘이다.이를 통해 네트워크 요청을 최소화하고, 사용자 경험을 개선할 수 있다.Apollo Client의 기본 캐시는 InMemoryCache로, 이는 데이터를 메모리에 저장하고, 이를 통해 빠르게 데이터에 접근할 수 있다.  주요 특징과 사용 방법 기본적인 캐싱 동작 Apollo Client는 쿼리 요청 시 서버로부터 데이터를 받아 캐시에 저장한다.이후 동일한 쿼리가 발생하면 캐시에서 데이터를 불러오기 때문에 네트워크 요청을 다시 보내지 않아도 된다.  import { ApolloClient, InMemoryCache, gql } from '@apollo/client';const client = new Apol..

React Hook Form의 handleSubmit으로 폼 제출 시 페이지 리렌더링 방지하기

폼 제출 시 페이지 리렌더링: 기본 동작 방지를 잊은 예시// 잘못된 코드 예시import React, { useState } from "react";const ExampleForm = () => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); // onSubmit 함수, 기본 동작 방지 없음 const onSubmit = (e: React.FormEvent) => { // e.preventDefault()가 없으므로 폼 제출 시 페이지 새로고침 발생 console.log("폼이 제출되었습니다:", { email, password }); }; return ( ..

React Router v6

react-router-dom은 v6으로 업그레이드 React Router v6는 2021년 11월 2일에 공식적으로 출시되었다.React Hooks와 더 나은 통합을 제공하며, 번들 크기가 줄어드는 등의 장점이 있다.npm install react-router-dom@latest // v6.2.2npm install --save-dev @types/react-router-dom // 타입 정의 패키지  useNavigate() 훅을 도입해 useHistory()를 대체했다.useHistory가 navigation과 통합되어 사라졌다.하지만 useNavigate를 사용하여 동일한 기능을 수행 할 수 있다.API가 간소화되었다.가 로 대체되었다.또한 exact 속성이 삭제되어 경로 매칭이 더 간단해졌다. ..