stale & cache time

Tanstack query에는 두가지 개념이 있다.stale정해진 시간(기본 0초)동안 데이터의 신선함(최신 데이터인지)을 보장하는 시간데이터는 처음에 fresh 상태였다 stale time이 지나면 stale 상태로 변한다.cache우리가 아는 그 캐시설정 되어있는 시간 만큼(기본 5분) 기존의 데이터를 메모리에 저장해놓는다.그냥 생각해봤을 때는 stale만 사용해도 될 것 같기도하고, cache만 사용해도 될 것 같은데Tanstack Query는 왜 두 개념을 모두 사용할까?동작 방식만약 stale time이 10초이고 cache time을 5분으로 설정해놓았다면..API를 불러왔을 때 불러온 fresh한 데이터는 10초 뒤 stale이 될 것이고 5분간 캐시에 남아있을 것이다.만약 캐시가 삭제되기 ..

• format_list_bulleted 개발 공부/Tanstack Query
• · 2024. 8. 7.
• textsms

Next.js에서 Devtools가 사라지는 문제 해결

문제 발생tanstack query hook을 만들어 사용하기 전 까진 문제 없이 devtools가 존재하다 hook을 사용하면 사라지는 문제가 발생했다!Tanstack Query를 사용하기 위해 먼저Provider를 만들어 {children} Root(next.js 14버전 기준 최상위 layout.ts)에 선언을 해줄 텐데Bad 😨만약 아래의 방법과 같이 TanstackQueryProvider안에 queryClient를 선언해줬다면 나와 같은 문제가 발생했을 것이라 생각한다.'use client';import { QueryClient, QueryClientProvider } from '@tanstack/react-query';import { ReactQueryDevtools } from ..

• format_list_bulleted 개발 공부/React-Next.js
• · 2024. 8. 7.
• textsms

About Next.js

Next.js란?풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크.기존에 React를 사용하던 것 처럼 사용자 인터페이스를 구축하고 Next.js를 이용해 추가 기능과 최적화가 가능내부적으로 Next.js는 번들링(빌드), 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성함. 따라서 구성에 시간을 낭비하지 않고 애플리케이션 구축에만 집중할 수 있다.→ React보단 자유도가 떨어질 것이다. 대신 React에서 내가 추가적으로 해야하는 일을 대신 해줘서 할 일을 줄여준다!주요 특징Routing레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터Rendering서버 컴포넌트와 클라이언트 컴포넌트를 사용한 CSR과 SS..

• format_list_bulleted 개발 공부/React-Next.js
• · 2024. 8. 7.
• textsms

혹시 당신은 z-index를 애용하시나요?

프로젝트를 진행하며 겪은 CSS z-index, position 관련 학습이 필요하다 느껴 작성한 글 입니다.만약 z-index를 사용한다면..위치도 잘 잡히고 너무 좋죠!!! 모든곳에 사용해도 되는 것 아닌가요?라고 생각하는 당신 위험합니다..프로젝트를 진행하며 컴포넌트를 각자 만든 뒤 합쳤을 때 위로 올라가면 안되는 부분이 위로 올라가있는 경험을 해보셨다면 제 위의 말이 이해가 갈것입니다.구조가 굉장히 복잡하게 짜여져있기때문에 '언제 어떤순서로 컴포넌트를 불러왔고 position 속성은 어떤것으로 설정했다'를 전부 기억하고있다면 문제가 되지는 않겠지만 우리는 혼자서 모든 일을 하지 않고 기억력도 엄청나게 좋지는 않습니다! (저만 그럴 수 있습니다.)z-index를 사용하기 전요소 간 상대적 깊이 먼저..

• format_list_bulleted 개발 공부/CSS
• · 2024. 8. 7.
• textsms

[React 학습하기]state: 컴포넌트의 메모리 - React는 어떤 state를 반환할지 어떻게 알 수 있을까?(+ Hooks 이해하기)

학습 대상useState를 이미 사용해본 사람state의 작동 원리가 궁금한 사람React는 어떤 state를 반환할지 어떻게 알 수 있을까?우리가 useState를 호출할때 어떤 state 변수를 참조하는지에 대한 정보를 받지 못한다는 것을 눈치챘는가?import { useState } from 'react';const [index, setIndex] = useState(0);useState에 전달되는 식별자가 존재하지 않는데 react는 어떤 state 변수를 반환할지 어떻게 알 수 있을까? 함수를 파싱하는 것과 같은 마법에 의존하는 것일까?정답은 아니다.React에서 간결한 구문을 구현하기 위해 Hooks은 동일한 컴포넌트의 모든 렌더링에서 안정적인 호출 순서에 의존한다.아래의 규칙을 따르면, Ho..

• format_list_bulleted 개발 공부/React-Next.js
• · 2024. 8. 7.
• textsms

[React 학습하기] 컴포넌트 순수성 유지

일부 JavaScript 함수는 순수하다. 순수 함수는 계산만 수행하고 그 이상은 수행하지 않는다. 컴포넌트를 엄격하게 순수 함수로만 작성하게 된다면 우리는 당황스러운 버그와 예측할 수 없는 동작을 피할 수 있다.하지만 이러한 이점을 얻으려면 몇 가지 규칙을 준수해야하는데, 이제부터 알아보도록 하자.순수성은 무엇일까?순수 함수는 다음과 같은 특징을 갖는다.자신의 일에만 신경쓰고 호출되기 전 존재했던 객체나 변수를 변경하지 않는다.동일한 입력이 들어오면 동일한 출력을 반환한다.우리는 순수 함수를 이미 알고있다.예를 들면 수학 공식에서y = 2x를 생각해보자.x에 같은 입력을 전달하면 항상 동일한 출력이 반환됨을 우리는 이미 알고 있다.React는 이 개념을 중심으로 설계되었다. React는 우리가 작성하는..

• format_list_bulleted 개발 공부/React-Next.js
• · 2024. 8. 7.
• textsms