분류 전체보기 (74) 썸네일형 리스트형 eslint-lint-sprinkles-rule 제작기 - (3) sprinkles-rule 내부를 구성하는 코드 설명 목차 eslint-lint-sprinkles-rule 제작기 - (1) 문제인지eslint-lint-sprinkles-rule 제작기 - (2) sprinkles-rule 작성을 위한 배경 지식eslint-lint-sprinkles-rule 제작기 - (3) sprinkles-rule 내부를 구성하는 코드 설명 본론 이번 글은 바로 기존에 정의했던 문제를 바탕으로 작성한 코드를 분석해보려한다. 실제 린트에 대한 정의를 수행하기 전 필요한 값부터 확인해보자. 우리가 해결하고자 하는 문제는 내 프로젝트에 정의되어있는 sprinkles를 바탕으로 lint룰을 통해 sprinkles로 사용해야함에도 불구하고 일반 style을 사용하는 케이스를 잡아내야하기때문에 부득이하게 lint plugin으로 spri.. 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.. 이전 1 2 3 4 ··· 10 다음
