TanStack Query(React Query)에서 gcTime과 staleTime은 캐싱 전략을 제어하는 서로 다른 목적을 가진 옵션입니다.사용할 때마다 헷갈리는 두 개념 정리해보겠습니다.staleTime (신선도 시간)데이터가 "신선한(fresh)" 상태로 유지되는 시간을 의미합니다.기본값: 0 (즉시 stale 상태가 됨)역할: 이 시간 동안은 데이터가 fresh 상태로 간주되어, 같은 쿼리를 다시 호출해도 네트워크 요청을 하지 않고 캐시된 데이터를 반환합니다.사용 예시: 자주 변경되지 않는 데이터(예: 사용자 프로필, 설정값)는 staleTime을 길게 설정const { data } = useQuery({ queryKey: ['user', userId], queryFn: fetchUser, ..

Next.js App Router와 React 서버 컴포넌트를 도입하면서 더 빠른 렌더링을 기대했지만, 실제 개발 과정에서 여러 제약사항을 마주하게 되었습니다. 이론적 장점과 실무의 간극에 대해 정리하겠습니다. 서버 컴포넌트의 기대했던 장점Next.js의 App Router를 선택한 장점은 분명했습니다. 1. 성능 최적화: JavaScript 번들 크기 감소로 초기 로딩 속도가 개선되고, 저사양 환경에서도 나은 사용자 경험을 제공합니다.2. 직접적인 데이터 접근: API 레이어 없이 데이터베이스나 파일 시스템에 직접 접근할 수 있어 코드가 간결해지고 응답 시간이 단축됩니다.3. 보안 강화: 민감한 로직과 API 키가 서버에서만 실행되어 클라이언트에 노출되지 않습니다. 다만 React 19에서 서버 컴포넌..

특정 문자열이 브라우저에서 이모지로 치환되어 보이는 이슈를 겪었습니다.예를 들어 "Balloon"이라는 문자열이 텍스트 그대로 출력되지 않고, 말풍선 모양 이모지로 렌더링되는 현상이 발생했습니다. 처음에는 상품 등록 과정에서 유니코드가 잘못 들어간 게 아닌가 의심했지만, 데이터에는 문제가 없었습니다.확인해 보니 렌더링 시점에 브라우저가 문자열을 자동으로 이모지로 변환하고 있었고, 이는 적용 중인 Noto Sans 폰트에서 발생하는 문제였습니다. 이를 해결하는 방법은 크게 두 가지였습니다.첫번째. 이모지로 치환되지 않는 다른 폰트를 사용두번째. 브라우저의 자동 치환 기능을 비활성화 하지만 폰트를 변경하는 것은 서비스 전체 디자인에 영향을 줄 수 있기에 채택하지 않았습니다.대신 CSS 속성으로 제어하는 방..

진행 배경초기 렌더링 개선과 SEO를 위해 RSC(React Server Component)를 사용하기 위해 Next14 App Router적용,렌더링이 서버에서 처리되면서 서버비용이 많이 들어감트래픽이 많은경우 CPU 부하가 심해짐상세페이지 레이아웃, 상품정보는 자주 변경되는 정보가 아님 웹서버의 성능이 중요한 이유얼마나 빠르고, 효율적으로 사용자들에게 콘텐츠를 제공하느냐를 의미빠른로딩으로 사용자 경험 향상빠른사이트는 SEO유리네트워크 사용량 감소, 서버 요청 최소화로 인프라 비용 절감 개선할점상품스펙에 관련 된 상품정보는 자주 변경되는 정보가 아니기 때문에 상품페이지는 Full Route Cache를 적용해서 캐시된 HTML을 적용한다.Full Route Cache란?Next.js는 4가지 캐시 매커..

컴포넌트?데이터(props)를 인자로 받아서, jsx를 리턴하는 자바스크립트 함수를 컴포넌트라고 한다.1. 실행 환경서버 컴포넌트서버에서 렌더링되며, 클라이언트(브라우저)로 전송되는 HTML 또는 React Server Component Payload(RSC Payload) 형태로 제공됩니다.클라이언트 측 JavaScript 번들 크기를 줄여 성능을 최적화합니다.기본적으로 Next.js 14의 모든 컴포넌트는 서버 컴포넌트로 간주됩니다.클라이언트 컴포넌트클라이언트(브라우저)에서 렌더링되며, 서버에서 사전 렌더링된 후 클라이언트에서 "하이드레이션(hydration)" 과정을 거쳐 인터랙티브해집니다.'use client' 지시어를 파일 상단에 추가하여 정의합니다. 2. 주요 특징서버 컴포넌트데이터 페칭: 서..

Next 앱라우터는 Suspense를 통한 스트리밍을 지원한다.streaming이란?React와 Next.js에서 스트리밍이 작동하는 방식을 알아보려면 서버사이드렌더링(SSR)을 이해해야한다.서버에서 모든 데이터를 fetch한다.데이터를 바탕으로한 HTML을 렌더링한다.클라이언트로 HTML, CSS, Javascript를 전송한다.HTML, CSS를 통해 인터페이스를 표현한다. (상호작용 안되는)React hydration을 통해 상호작용이 될 수 있도록 한다.streaming을 사용하게 된 배경서버에서 모든데이터를 가져오고 작업이 완료되므로 순차적이고 차단적이다.컨텐츠를 다운받기 전 빈화면이 보일 수있다.streaming을 사용하면페이지의 HTML을 작은조각으로 나누고 점진적으로 서버에서 클라이언트에 ..

1. 배경React Query를 사용하면 캐싱이 가능하지만, 기본적으로 브라우저 메모리에 저장되므로 새 창을 열거나 새로고침하면 캐시 데이터가 유지되지 않습니다. 특히, 슈프라이즈 앱처럼 페이지 이동 시 새 창이 열리는 구조에서는 react-query 캐시를 활용할 수 없는 문제가 발생합니다.이를 해결하기 위해 persistQueryClient 를 사용하여 캐시를 로컬 스토리지에 저장하고, 새 창이나 새로고침 시에도 캐시 데이터를 활용할 수 있도록 최적화하였습니다.persistQueryClient?persistQueryClient는 React Query에서 제공하는 기능으로, 쿼리 클라이언트(QueryClient)의 상태(예: 캐시된 데이터)를 브라우저의 로컬 스토리지, 세션 스토리지 등에 영구적으로 저..

함수와 렉시컬환경의 조합함수가 생성 될 당시의 외부변수를 기억, 생성 이후에도 계속 접근 가능외부변수의 은닉화 (외부함수의 변수를 변경할 수 없다.) 함수 내부 렉시컬환경에서 변수가 없는경우 하나씩 외부로 나가서 변수를 찾게된다. 내부함수 -> 외부함수 -> ... -> 전역환경  let one;one = 1;function addOne(num) { console.log(num + one); //인수 5 + 전역변수 one값을 가져온다}addOne(5); 함수가 생성 될 당시의 변수를 기억해서 이후에 계속 사용할 수 있다. function makeAdder(x) { return function (y) { return x + y; };}const add3 = makeAdder(3);console..

프로젝트에서 특정 버튼을 클릭 시 사용자정보를 fetch해서 response에 따라 비동기로 input에 focus하는 로직을 구현했습니다. 안드, 웹에서는 정상작동했지만 ios에서 input에 focus가 안되는 이슈가 있었습니다. 찾아보니 Ios는 사용자 인터렉션에 의해서만 input focus를 시킬 수 있다고 합니다. 해결방법이라기보다 제가 사용한 꼼수는 ios경우 버튼클릭 시 인풋에 포커스가 가게하고 비동기로 response받아서 이후 프로세스 처리하는 것으로 진행했습니다.사실 ios의 경우 활성화가 되면안되는경우도 활성화가 되었다가 비활성화 된다는 현상이 있었지만 사용성을 생각했을 때 키보드에 포커스가 가는게 더 낫다 생각을 했기때문에 진행했습니다. 참고 https://gist.github..

순수 css 별다른 처리가 필요하지 않아 서버컴포넌트에서 호환문제가 발생하지 않는다. css 전처리기 sass, less, postcss등 css 전처리기는 빌드타임에 순수css로 컴파일된다. css modules 빌드타임에 css가 생성된다. Tailwind css 빌드 타임에 css가 생성된다. CSS-in-JS 자바스크립트를 사용하여 스타일 정의를 한다. 런타임에 동적으로 스타일이 적용된다. 빌드타임에 css가 완성되냐, 런타임에서 js통해 동적으로 css가 렌더링 되냐 Next.js 서버컴포넌트 호환성을 결정해준다.