전체 글 (67) 썸네일형 리스트형 Tanstack Query의 Refresh Hydration과 Navigate Hydration의 차이 개요 사내 프로젝트를 진행하는 과정에서 Nextjs 14의 Page Router와 Tanstack Query v4를 함께 사용하고 있었다. 그러던 와중에 특정 쿼리를 추가했고 쿼리를 Server Side에서도 활용하기 위해 queryClient의 fetchQuery 메서드를 활용했고, 개발 과정에서 코드를 추가한 뒤 해당 지면에서 refresh를 수행하며 디버깅을 했을때에는 문제없이 Hydration이 잘 수행되었다. 하지만 추가적인 테스트를 진행하면서 다른 지면에서 해당 지면으로 Navigate할때의 Hydration이 원활하게 동작하지 않아 이에 대해 알아보게 되어 그 과정에 대해 정리하고자 한다. 본론으로 들어가기 전 먼저 이러한 상황이 발생한 시점 queryClient의 defaultOpt.. 더 좋은 유저 경험을 위한 Streaming SSR 목차 서론Streaming SSR의 등장 배경, 기존의 CSR과 SSR 방식에 관하여웹 성능 지표 RemindStreaming SSR이란 ?Streaming SSR의 동작 방식Progressive HydrationStreaming SSR이 가능한 이유React 진영에서 Streaming SSR까지 오기까지의 여정실제 구현 예시 및 이로 인한 성능 개선 지표 (미정)Streaming SSR의 전망결론 서론 최근에 회사에서 CSR 기반의 Vite 프로젝트만을 진행하다가 Next.js로 이루어진 글로벌 서비스 프로젝트를 메인으로 작업하게 되어 SSR 방식을 제대로 경험하게 되었고, 그 과정에서 프론트엔드 개발자로서 사용자에게 더 좋은 경험을 주기 위한 방법들을 고민하던 중 좋은 글들을 만나게 되어 앞으로 사.. PWA환경에서 유저 친화적으로 앱 다운로드 안내하기 서론 현업에서 파일럿프로젝트로 진행하는 프로젝트가 PWA로 되어있었는데, 이를 넘겨받아 디벨롭하는 과정에서 사용하는 유저들에게 더 좋은 경험을 제공하고자 [홈 화면에 추가] 를 통한 바로가기 앱 다운로드를 안내하는 과정을 정리하려고 한다. 본문 먼저 PWA의 앱 다운로드 방법을 설명하기에 앞서 PWA가 무엇인지 간단하게 알아보고 가자. PWA(Progressive Web Apps)는 웹 애플리케이션과 네이티브 애플리케이션의 장점을 결합한 기술입니다. PWA는 웹 기술(HTML, CSS, JavaScript)을 사용하여 개발되며, 네이티브 애플리케이션과 같은 사용자 경험을 제공하는 것이 목표입니다. 한마디로 정리하자면 PWA는 웹으로 이루어졌지만 앱과 유사한 환경을 제공해주는 방식이다. 그렇다면.. jotai atom을 모킹하는 다양한 방법 일반적으로 jotai의 공식문서를 보면 testing에 대한 이야기가 별도로 있다. 첫번째 예시부터 확인해보자. // 출처: https://jotai.org/docs/guides/testing#injected-valuesimport React from 'react'import { render, screen, fireEvent } from '@testing-library/react'import { useHydrateAtoms } from 'jotai/utils'import { countAtom, Counter } from './Counter'import { Provider } from 'jotai'const HydrateAtoms = ({ initialValues, children }) => { useH.. (짧) Vite환경에서 tanstack/query 사용 시 useSyncExternalStore 관련 에러가 발생하는 경우 해결 방법 Vite환경에서 build시에 위와 같이 tanstack/query에서 사용중인 패키지 중 useSyncExternalStore.mjs에서 해당 메서드를 제대로 export하지 못하여 import하지 못했다는 에러 메시지가 발생하는 경우가 있다. 발생한 에러 메시지는 다음과 같다. RollupError: node_modules/@tanstack/react-query/build/lib/useSyncExternalStore.mjs (2:9): "useSyncExternalStore" is not exported by "node_modules/use-sync-external-store/shim/index.js", imported by "node_modules/@tanstack/react-query/build.. Vite의 manualChunks옵션에 관하여 개요 이번에 사내 프로젝트를 팀원분이 CRA에서 Vite로 개선해주시면서 함께 고민했던 내용 중 잘못 이해했던 내용에 대해 회고하려고 한다. 서론 먼저 본론을 시작하기에 앞서 React 프로젝트를 작업하면서 사용하게 되는 Chunk(청크)에 대해 생각하면 어떤 상황들이 떠오르는지 생각해보겠다. 일반적으로는 React 프로젝트에서 자주 활용하는 상황은 Page단위로 Code Splitting을 적용하여 이들을 Lazy Load 하여 초기 로딩 성능을 향상시키는 상황을 자주 볼 수 있다. 예시는 아래와 같다. import { lazy, Suspense, useEffect } from 'react' const FirstPage = lazy(() => import('@pages/FirstPage')) const.. Browser Rendering vs React Rendering - (2) 개요 이전 글에서는 Browser Rendering에 대해서 살펴보았다. 이번에는 비교하려고 했던 React Rendering을 살펴보고 둘의 차이를 명확하게 정리하면서 마무리하려고 한다. React Rendering 이는 브라우저 렌더링에서의 해석과 동일하게 Rendering의 주체가 React인 것이다. 리액트의 렌더링은 크게 보면Trigger, Render Phase와 Commit Phase으로 나누어져 있는데, 이 과정을 하나씩 살펴보자. Trigger 이름 그대로 렌더링을 촉발시키는 것이다. 리액트는 기본적으로 렌더링이 두 가지 케이스로 나뉜다. 최초 렌더링 리렌더링 첫 번째로 최초 화면 진입 시에는 당연하게 화면에 그려야 할 결과물이 필요하다. 따라서 렌더링이 일어나게 된다. 최초 렌더링 이후.. Browser Rendering vs React Rendering - (1) 개요 React로 개발을 계속하다 보면 '렌더링'이라는 단어는 당연하게도 React에서의 렌더링으로 이해하는 경우가 많은데, 실제로 이는 문맥에 따라 브라우저 렌더링을 가리킬 때도 많이 있다. 실제로 가끔 이러한 상황을 마주하면 혼동하는 경우를 자주 목격하여 이번을 계기로 정확하게 정리하고 가려고 한다. Rendering 먼저, 두가지 케이스에 공통으로 등장하는 렌더링(Rendering)이 무엇인지부터 정확하게 정리하고 가려고 한다. 기본적으로 렌더링(Rendering)이란, 구글 검색을 통해 나오는 정의를 보면 사용자에게 보여지는 시각적 요소들을 생성하고 화면에 표시하는 과정을 의미한다. 하지만 조금 더 단순하게 본다면 컨텐츠를 픽셀로 변경하는 과정이라고 볼 수 있다. (여기서 컨텐츠는 브라우저 내에서.. 이전 1 2 3 4 ··· 9 다음
