far

1. Query-KeyQuery-Key란?Query-Key는 쿼리를 고유하게 식별하기 위한 키로, 데이터를 캐싱하거나 새로고침할지, 캐시에서 데이터를 사용할지를 결정한다. 보통 배열 형태로, 리소스 이름과 파라미터를 포함하여 사용한다. 예를 들어, ['todos', userId]처럼 설정할 수 있다.Next.js 서버사이드에서의 Query-Key 사용서버에서 Query-Key를 설정해 데이터를 미리 가져오고, React Query가 이를 캐싱해 활용할 수 있다.// app/layout.tsximport { ReactQueryProvider } from './_providers';import './globals.css';export default function RootLayout({ children,}..

프로젝트를 하던 도중 로컬 서버에서는 잘 돌아갔는데 production레벨에서 api 통신을 하기만 하면 에러가 발생했다. 처음에는 cors에러인가 싶었는데 그것도 아니었고, 배포시 .env를 잘못 등록했나 싶었는데 그것도 아니었다.이것저것 삽질을 한 결과 Github Action의 빌드창을 확인해봤더니...Cannot get final name for export 'QueryClient' of ./node_modules ......라는 에러가 발생하고 있었다. 이 에러는 React-Query의 QueryClient를 사용중인곳에 'use client'를 붙이지 않아서 생기는 문제인데, 나의 경우 Provider로 사용중인 QueryClient말고 다른곳에 테스트용으로 만들어둔 QueryClient에 '..

백엔드와 React를 연결하기 위해 데이터를 fetch 시켜야 한다. 만약 백엔드 작업이 되어 있지 않다면 axios는 건너뛰고 더미 데이터 넣어주면 된다. npm i axios npm i react-query react-query를 선택한 이유는 redux가 redux-toolkit으로 오면서 보일러플레이트가 많이 줄었다고는 하나, 전역 상태를 관리하기 때문에 여전히 코드량이 많았다. 그래서 서버 스테이트를 관리하는 react-query를 사용해보고 싶었다. 아직 조금밖에 사용해보지 않았기에 장단점은 잘 모르겠으나, 확실히 코드는 많이 간결해졌다. // configs/config.ts export const backUrl = 'http://localhost:3065'; configs폴더를 만들고 안에 ..