아래 이슈에서 도움을 받았습니다. https://github.com/radix-ui/primitives/issues/2051 Popover when hover · Issue #2051 · radix-ui/primitives Feature request Is it possible to show popover when hover on the trigger component? Could be there an option to choose either : when click or when hover for showing the popover? github.com popover 기능은 일반적으로 hover 되었을 때 나타나는 것이 조금 더 자연스러운 ux라고 생각합니다. 다만 radix의 trigger 기능은 기..
RSC, Suspense , concurrency mode, use, hydrate 등 최근 리액트의 변화 흐름은 제 머리로는 코어컨셉을 이해하기도 힘겹습니다. next.js 와 같은 프레임워크에서 RSC를 적극적으로 사용하고 있으니 아..그렇다.. 뭐.. 서버겠구나.. 하고 넘어가지만 그렇다고 RSC !== SSR 은 아니라는 말을 들으니 오히려 더 혼란스러워지는 이 기분.. 여러분도 아실까요? 아시겠죠... 네.. 🤯 RSC는?? react 18 버전부터 도입된 개념으로서 React Server Components 의 줄임말입니다. 서버에서만 렌더링 되어 전달되는 컴포넌트를 의미합니다. 리액트 서버 컴포넌트는 HTML 이 아닌 "특별한 형태로" 서버에서 렌더링 되어 클라이언트에게 전달됩니다. 이러한 ..
를 할 수 있습니다. https://basarat.gitbook.io/typescript/main-1/barrel Barrel - TypeScript Deep Dive Instead of exporting *, you can choose to export the module in a name. E.g., assume that baz.ts has functions: basarat.gitbook.io 타입스크립트 딥다이브에서도 확인할 수 있는 패턴인데 사실 유사한 형태로 관리해본 경험에서 이야기하자면 import 할 때는 행복한 대신 export 할 때 귀찮은 작업이 추가된다는 단점이 있습니다. 작성패턴은 아주 쉽습니다. 주로 내보내기 할 파일들이 모여있는 폴더내부에서 index.ts 파일을 생성해 준 뒤 ..
🎄사실 이건 정말 대답하기 힘든 질문이다. "리액트를 사용하는 이유는 무엇일까요?" 이 질문은 꽤나 대답하기 어렵습니다. 왜일까요? 이렇게 대답할 수도 있을 것 같습니다. 모두가 리액트를 쓰니까 저도 쓰는거죠!! 어...나도 그렇기는 한데.. 어떻게 보면 유명한 걸로 유명한 연예인같은 느낌이 들기도합니다. 물론 그럼에도 불구하고 리액트가 많은 사람들의 사랑을 받은 이유는 이야기할 수 있을 것입니다. 이번에는 그런 "그럼에도 불구하고"에 초점을 맞추어 왜 나는 리액트를 사용하는 시대에 살고 있을까? 라는 질문에 대한 답을 찾아보겠습니다. 리액트가 많은 사랑을 받을 수 있었던 요인을 알아보기 위해서는 리액트가 기존 웹의 어떤 문제를 해결했는지에 집중할 필요성이 있습니다. 리액트가 나오기 전인 2012년 이전..
ts환경 jest 안쓰는 import 에러 막기 우선 pathalias가 적용이 안되어서 에러가 나는 케이스는 이 링크로 이동해주세요 https://xionwcfm.tistory.com/375 이게 lint에러인지 jest가 기본적으로 안쓰는 import에 엄격한건지 고민이 많았는데 결론적으로는 타입스크립트의 tsconfig.json 파일의 설정 문제입니다. tsconfig.json "compilerOptions": { ... "noUnusedLocals": false, } 컴파일러 옵션에서 사용하지않는 locals에 대한 옵션을 false로 지정해주면 됩니다.
app라우터에서 pandacss를 바로? 이전 글에서는 왜 build time css - in -js 가 하입을 받고 있는지를 간단히 다루어보았는데요 이번에는 build type css - in js 프레임워크 중 하나인 panda css의 세팅을 해보도록 하겠습니다. panda css는 next.js , remix , gatby , nuxt , preact , solid.js 등 너무나도 다양한 프레임워크들을 지원해주며 그 방법 또한 공식문서에서 잘 가르쳐주고 있습니다. 심지어는 app router와의 통합 과정도 너무 잘 가르쳐주고 있는데요 공식문서를 잘 따라서 설치해보고 조금 문제가 생길 수 있는 부분들은 간단하게 고쳐보면서 panda css를 잘 세팅해보도록 하겠습니다. npx create-nex..
build time css는 왜 중요해졌는가?프론트엔드의 추세가 csr -> ssr의 흐름으로 가면서 수많은 서버사이드렌더링 프레임워크가 등장했습니다. next.js, nuxt.js sveltekit , remix 등등이 있지요 대표적인 프레임워크 중 하나인 next.js의 경우 'use client'를 사용한 컴포넌트에서만 리액트 훅과 이벤트 리스너를 사용할 수 있습니다. 이는 app router의 서버컴포넌트 동작이 리액트의 서버컴포넌트 기반으로 동작하기 때문인데요 이 서버컴포넌트는 간략하게 설명하면 서버에서 렌더링 과정이 이루어지며(HTML로 생성하는건 아닙니다.) Stream을 생성하여 점진적으로 클라이언트에게 스트림을 쏴줍니다. 이러한 동작방식은 기존 CSR의 패러다임과 비교했을 때 명확한 차이..
nest는 데코레이터를 적극적으로 활용하는 프레임워크입니다. 데코레이터를 적절히 사용하면 횡단 관심사(cross-cutting concern)을 분리하며 관점 지향 프로그래밍을 적용한 코드를 작성할 수 있는데요 다른 언어에 익숙하신 분들은 자바의 애너테이션, 파이썬의 데코레이터를 떠올려주셔도 됩니다. 타입스크립트에서 데코레이터는 클래스 , 메서드, 접근자, 프로퍼티, 매개변수에 적용이 가능하며 각 요소의 선언부 앞에 @로 시작하는 데코레이터를 선언하게되면 데코레이터로 구현된 코드를 함께 실행해줍니다. 이러한 데코레이터는 여러개의 데코레이터를 함께 사용하는 데코레이터 합성을 할 수 있습니다. 함수를 중첩해서 사용할 때와 비슷하게 생각을 할 수 있는데요 @f @g test 이러한 형태로 작성된 데코레이터 코..
