분류 전체보기 (77) 썸네일형 리스트형 (짧) Nextjs fetch를 사용할 때 User-Agent 트래킹하기 Nextjs를 사용하면서 캐싱을 활용하기 위해서는 내부적으로 제공해주는 fetch를 활용하는 것이 일반적이다.(다만 실무에서 Nextjs의 캐싱을 제대로 활용할 수 있을까 하면 쉽지 않아보인다.) 그렇게 Nextjs에서 제공해주는 fetch를 사용하면서 진입 유저 분석을 위해 User Agent를 수집하다보면 이상한 점이 보인다. 기존에 User Agent로서 익숙한 이름들이 아니라 모든 요청이 undici 라는 User Agent값으로 넘어오는데, 이는 node 라이브러리 중 하나로 HTTP 요청을 더 좋은 성능으로 수행할 수 있도록 해주는 라이브러리라고 한다. Nextjs에서는 실제로 Node 버전이 18버전보다 낮으면 이를 동일하게 수행해주는 polyfill을 사용한다고한다. https://next.. Radix-ui 의 Slot 컴포넌트 사용 시 주의할 점 서론 사내 프로젝트에서도 그렇고 여러가지 공통 컴포넌트를 만들때 요새 자주 사용하게 되는 패턴 중 하나는 Radix-ui의 Slot 컴포넌트를 활용하는 방식이다. 이 컴포넌트를 활용하는 과정에서 예상치못한 이슈를 마주한 경험이 있어 이에 대해 다시한번 정리하고, 문제 및 해결 방안을 정리해보려 한다. 본론 아는 사람은 알겠지만 이 Slot 컴포넌트의 역할 자체는 렌더링을 위임할 수 있는 컴포넌트이다. 위임한다는 것은 즉, 특정 역할을 가질 수 있도록 컴포넌트를 설계하고 (style, event 등등), children으로 들어오는 컴포넌트에 해당 역할을 그대로 부여해주는 것이다. 코드를 빼놓고 설명하기는 어려우니 빠르게 코드를 살펴보고 문제 상황에 대해 알아보겠다. (원문 : https://gi.. App Router 렌더링 환경 차이 이해하기 서론 프로젝트를 진행하면서 시간을 다루는 일이 생겼고, 이로 인해 의도치않게 Hydration Mismatch가 발생했다. 문제에 대해서는 해결했지만 그 과정에서 App Router를 사용하면서 Client Component와 Server Component에 대한 렌더링 환경 차이를 정확하게 인지하지 못한 점과 문제가 발생했을때 문제 포인트를 빠르고 정확하게 캐치하지 못했다는 점에서 알게모르게 혼동되었던 이 개념들을 다시 정리하려고 한다. 본론 현재 회사에서 진행중인 프로젝트는 Nextjs 14 App Router를 사용중이다. 기존에는 Page Router를 사용했다가 마이그레이션을 최근에서야 마무리하게되었는데, 아직 일부 개념들에 있어서는 Page Router에 갇혀있다는 느낌이 들기도 했.. 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.. 이전 1 2 3 4 ··· 10 다음
