분류 전체보기 (71) 썸네일형 리스트형 React 19 긍정 검토하기 서론 React 18을 넘어 React 19가 공식적으로 stable하게 릴리즈 된지 한달이 넘었다. React 18이 나왔을 때에는 새로나온 내용들을 바로 공부하지 않고 어느정도 시간이 지난 후에 공부하게 되었는데 갈수록 변화가 빨라지고있다는 생각에 이번에는 조금 더 빠른 시점에 새로운 버전을 공부해보기로 했고 공식문서에 있는 내용들을 살펴보며 간단하게 정리해보려 한다. 바로 시작해보겠다. Actions Stable된 릴리즈 노트의 가장 위에 나오는 내용은 바로 Action 이다. React 19에서 새롭게 추가된 여러가지 훅은 Action을 지원하기 위해 나왔는데, 노트의 순서 상 실제 Action에 대한 설명은 조금 더 아래에 나오지만 Action에 대해 먼저 알고가야 앞으로 이해하기 편하기때문.. Polymorphic Component를 정의하는 여러가지 방법 해체분석 서론 사내 프로젝트를 진행하는 과정에서 Polymorphic Component에 대한 니즈가 생겼고, 기존에 Polymorphic Component를 정의하기 위한 복잡한 타입을 설명해 주신 좋은 글이 있었으나 React, Typescript의 버전이 올라가면서 이에 대한 완벽한 호환이 어려워져 이에 대한 대안을 설명해 둔 글을 보게 되었고 해당 글의 내용이 좋지만 forwardRef를 호환하기 위한 복잡한 타입들이 엮여있어 이를 흡수하기 위해 해당 글에 있는 타입들을 분석해보려 한다. 원문 : https://www.tsteele.dev/posts/react-polymorphic-forwardref 본론 위에서 언급한 바와 같이 해당 글에서 나온 forwardRef까지 완벽하게 호환할 수 있는 Pol.. (짧) Tree Shaking과 이를 사용하는 곳에서 해야할 일 흔히 말하는 Tree Shaking은 사실 Tree Shaking과 Dead Code Elimination이 존재하는데, Tree Shaking은 정적 분석을 통해 필요한 코드만을 추가하는 방식이고 Dead Code Elimination은 정적 분석을 진행한 후 사용하지 않는 것을 제거하는 방식이다. 따라서 Dead Code Elimination 방식을 사용하는 Webpack의 경우 사용하지 않는 코드를 제거해주는 Terser가 필요한 것이다. 또한 외부 라이브러리에서 트리셰이킹을 열어주는 방법으로는 package.json의 sideEffect을 false로 지정하는 것과 cjs, esm 방식으로 접근할때의 exports를 제대로 명시해주는 방법이 있는데, 이와 별개로 사용하는 곳에서도 잘 사용해주어야.. Nextjs와 Vanilla Extract 사용 시 css가 로드되지 않는 문제 Trouble Shooting 개요 회사 프로젝트를 진행하면서 Nextjs 13버전의 Page Router 프로젝트르 Nextjs 14버전으로 올리고 App Router로 마이그레이션해가는 과정(App Router와 Page Router가 혼재하는 상황)에서 Server Component를 사용하기 위해 기존에 사용하던 Emotion을 걷어내고 여러가지 방법 중 Zero Runtime을 보장하는 Vanilla Extract를 적용하고있었다. 그러던 도중 Refresh 시에는 정상적으로 그려지지만 Navigate 이후에는 스타일이 깨져보이는 문제가 발생해 이에 대해 파헤쳐본 것을 간단하게 글로 적어보려고 한다. 본문 먼저 정확한 프로젝트 상황은 다음과 같다. Nextjs 14 버전 사용@Vanilla-Extract/next-plug.. 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.. 이전 1 2 3 4 ··· 9 다음
