전체 글 (73) 썸네일형 리스트형 eslint-lint-sprinkles-rule 제작기 - (2) sprinkles-rule 작성을 위한 배경 지식 목차 eslint-lint-sprinkles-rule 제작기 - (1) 문제인지eslint-lint-sprinkles-rule 제작기 - (2) sprinkles-rule 작성을 위한 배경 지식eslint-lint-sprinkles-rule 제작기 - (3) sprinkles-rule 내부를 구성하는 코드 설명 서론 저번 eslint-lint-sprinkles-rule 제작기 시리즈의 2편, sprinkles-rule 작성을 위한 배경지식을 작성하려고 한다. 이전 글에서 어떤 부분이 문제여서 rule 작성을 결심했는지에 대한 배경을 설명했다면 이번에는 실제로 어떤 방식으로 이를 해결하려고 했는지에 대한 설명을 하려고 한다. 다음 글에서 실제 코드에 대한 설명을 진행하려고 하는데 그 전에 전반적인 흐름.. eslint-lint-sprinkles-rule 제작기 - (1) 문제인지 목차 eslint-lint-sprinkles-rule 제작기 - (1) 문제인지eslint-lint-sprinkles-rule 제작기 - (2) sprinkles-rule 작성을 위한 배경 지식eslint-lint-sprinkles-rule 제작기 - (3) sprinkles-rule 내부를 구성하는 코드 설명 글이 너무 길어지는 것을 방지하여 문제인지와 해결과정에 대한 글을 나누어 작성하려고 한다. 서론 최근에 디렉토리 구조에 대한 공부를 진행하던 중 FSD(Feature-Sliced-Directory)에 대한 글을 읽고 많은 생각을 하게 되었다. 그러던 와중에 링크드인에 훌륭한 개발자분이 FSD 에 대한 Lint를 제작하신 것을 흥미롭게 보았고, 그동안 왜 우리 팀에 맞는 LInt Rule을 만들.. 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 방식을 제대로 경험하게 되었고, 그 과정에서 프론트엔드 개발자로서 사용자에게 더 좋은 경험을 주기 위한 방법들을 고민하던 중 좋은 글들을 만나게 되어 앞으로 사.. 이전 1 2 3 4 ··· 10 다음
