그래프큐엘과 아폴로 클라이언트(Apollo Client)를 사용할 때, 캐시 관리는 매우 중요한 부분입니다.특히, cache.modify와 cache.writeQuery는 아폴로 캐시를 업데이트하는 두 가지 주요 방법입니다. 이 두 메서드는 비슷한 목적을 가지지만, 사용 방법과 적용 시나리오에 차이가 있습니다. 아래에서 각각의 메서드와 그 차이점을 예시와 함께 설명하겠습니다. cache.modifycache.modify는 아폴로 캐시에서 특정 필드를 변경할 때 사용됩니다.이 메서드는 필드 수준에서 캐시를 조작할 수 있는 기능입니다.  사용 시점캐시된 데이터의 특정 필드만 업데이트할 때여러 쿼리에서 동일한 필드를 공유하고 있을 때부분적인 데이터 갱신이 필요할 때 예시새로운 아이템을 리스트에 추가하는 예제를..

GraphQL 클라이언트에서 데이터 캐싱은 성능 향상과 네트워크 요청 최소화를 위해 매우 중요합니다.Apollo Client는 강력한 캐싱 메커니즘을 제공하며, 이를 통해 서버와의 상호작용을 더욱 효율적으로 관리할 수 있습니다.이번 포스트에서는 `InMemoryCache`를 사용하여 캐싱을 설정하는 방법을 설명하겠습니다. 캐시 설정 코드다음은 InMemoryCache를 설정하는 코드입니다.여기서 주요 포인트는 `typePolicies`를 사용하여 특정 쿼리와 필드의 캐싱 동작을 정의하는 것입니다. import { InMemoryCache } from '@apollo/client';import { ALL } from '../../utils/constants';const cache = new InMemory..

fragment는 그래프큐엘에서 반복되는 쿼리들의 필드들을 따로 모아두고 불러오는 기능을 말합니다.이 기능의 사용 예시를 기록하겠습니다. 사용법사용법은 아래와 같습니다.fragment "이름" on "해당fragment가 참조할 스키마 이름" { (반복해서 사용될 필드명 배치)} 이것을 실제로 적용해보면 이렇습니다. fragment itemFields on Item { _id itemName itemPrice itemCategoryId itemImage} 이렇게 작성된 fragment는 사용할 Query 또는 Mutation에서 자바스크립트의 스프레드 연산자와 같이 사용이 가능합니다. query { items{ ...itemFileds }} 그렇지만 실무에서는 다음과 같이 상..

if문if문..! {#if 조건} 조건이 참일때 내용{:else} 조건이 false일 때 내용{/if}{#if 조건} 조건이 참일 때{/if}{#if 조건1} 조건1 참일때 내용{:else if 조건2} 조건2가 참일 때{:else} 모든 조건에 해당되지 않을 때{/if} dom 제어다음 사진처럼 dom을 제어해줄 수 있습니다.해당 사진의 내용은 Log In 버튼을 누르면 true를, log Out 버튼을 누르면 false를 화면에 보여주는 코드입니다. 더 나아가서 다음과같이 작성할 수 있겠네요!로그인로그아웃{#if auth.loggedIn === true} 로그인 상태입니다.{:else} 로그아웃 상태입니다.{/if} 반복 블록 {#each..}바로 그냥 사용방법{#each datas as data} ..

컴포넌트 불러오기스벨트는 다음과 같이 컴포넌트를 불러올 수 있습니다.  script 영역에서 import를 해오고, script 영역 바로 아래에 해당 컴포넌트를 명시해주면 됩니다. 주의해야할 점은 불러오는 컴포넌트의 맨 앞글자는 대문자를 사용해주셔야합니다. props로 값 전달하기  위의 코드처럼 {} 중괄호에 보내주고싶은 값을 명시해주면 됩니다.그러면 props를 받을 땐 어떻게 해줘야 할까요? props로 값 전달 받기  받아오는 컴포넌트쪽에서 export를 작성하고 받아오려는 값의 명칭을 적어주시면 됩니다.

최근 그래프큐엘 및 아폴로의 공부를 위해서 강의를 구매하였는데, 이 강의는 프론트를 svelte로 구성하고 있었습니다.그래프큐엘과 아폴로의 활용방안 공부가 목적이였기에 상관없이 구매하였고 지금 약 다섯 시간째 듣고 있는 중입니다✨ 완강하고나면 늘 토이프로젝트로 복습을 하는 저이기에..나중에 제가  다시 보기 위해 정리를 한 글이므로, 다소 불친절한 설명일 수 있으니 양해 바랍니다.svelte 테스트 svelte는 공식홈페이지의 REPL 카테고리에서 바로 바로 테스트가 가능합니다.  클릭하시면 아래와 같이 나옵니다.여기서 테스트를 진행 할 수 있습니다. 리액트는 useState라는 훅으로 상태값을 관리하는 반면에,스벨트는 상태값을 그냥 script태그에 작성하시면 됩니다. 이렇게요!  아래에 바로 html..