😎mui는? mui는 css 스타일링을 도와주는 라이브러리입니다. 공식문서에 따르면 디자인을 신속하게 배치하는 것을 위한 css 유틸리티의 모음집이라고 생각할 수 있다고 하네요 확실히 스타일을 지정하는 것은 피로도가 높은 작업입니다. 하나의 스타일을 지정하는데에만도 꽤 많은 공수가 들어가고 당연하게 쓰이는 기능들을 위해 수많은 보일러플레이트가 들어가니까요 예컨대 가운데 정렬을 위한 css 스타일링을 다음과 같습니다. display: flex; justify-content: center; align-items: center; 이 외에도 너무 긴 텍스트를 막게해주는 css.. 무슨 기능을 위한 css 유저 인터페이스를 위한 css 특히 ui기능을 구현하려고하면 굉장히 많은 수고가 들어가게되고 hover / ..
😐Radix UI는? 흔하게 Headless UI 라이브러리라고 부르곤 하는 라이브러리입니다. 쉽게 이야기하면 디자인 없이 기능만 제공해주는 라이브러리라고 생각할 수 있습니다. 기능 없이 디자인만 제공해주는 라이브러리들의 대척점에 있다고도 생각할 수 있어요 다양한 UI/UX 기능들을 높은 퀄리티로 어떤 CSS 도구와도 통합할 수 있게 제공해주는 Radix UI는 개발자의 생산성을 크게 향상시켜줄 수 있는 도구입니다. https://www.radix-ui.com/docs/primitives/overview/getting-started Getting started – Radix UI A quick tutorial to get you up and running with Radix Primitives. www...
🙄Emotion이 'use client'를 사용하라고 불평했다. emotion을 학습해보던 중 next.js 환경에서 사용해보려고 하니 위와 같은 에러를 반환했습니다. 우선 emotion docs에 ssr에 관한 항목이 있어 이를 참고해보았습니다. https://emotion.sh/docs/ssr Emotion – Server Side Rendering Server side rendering in Emotion 10 has two approaches, each with their own trade-offs. The default approach works with streaming and requires no additional configuration, but does not work with nth ..
😎세가지를 조합하면 아주 멋진 것을 만들 수 있다. https://xionwcfm.tistory.com/322 https://xionwcfm.tistory.com/323 https://xionwcfm.tistory.com/325 지금까지 진행한 세가지 라이브러리에 대한 포스트입니다. 이 세가지를 조합하면 아주 멋있고 유용한 CSS를 작성할 수 있습니다. npm install --save clsx npm install tailwind-merge npm install class-variance-authority 우선 tailwind css는 설치되어있다고 가정하고 위 라이브러리들을 설치해줍니다. 유틸함수를 만들어 주겠습니다. import { ClassValue, clsx } from 'clsx'; impor..
🤗tailwindcss에 storybook을 적용시키는 방법 슬슬 정이 떨어지고 있는 yarn berry 빠른 건 알겠지만 노드 모듈에 의존성이 있거나 아무튼 지원이 안되는 경우 개복치마냥 에러가 발생하는데 굉장히 열이 받습니다. 임시방편으로 pnpify라는 라이브러리를 제공해주고 있기는 하지만 말그대로 임시방편이며 계속 사용할 것을 기대하고 만든 라이브러리가 아니라고하네요 그래도 그나마 storybook까지는 잘 적용을 해볼 수 있습니다. 그나마... 잘 적용을 해 볼 수 있는데 레퍼런스 찾아보기가 상당히 어렵네요 우선 제 환경은 다음과 같습니다. window10 yarn berry vite typescript react tailwindcss 또한 많은 깃허브 이슈 페이지와 블로그를 돌아다녔지만 가장 ..
🙄cva 함수 내부에서는 tailwind intellisense가 동작을 안해요 https://cva.style/docs/installation Installation | cva Class Variance Authority cva.style vs code를 기준으로 설명합니다. cva의 docs에서는 settings.json에 위 정규식을 포함시키면 인텔리센스를 사용할 수 있다고 안내해줍니다. 다만 처음 하는 경우에는 살짝 어렵게 느껴질 수 있을 것 같습니다. settings.json에 익숙하신 분들은 그냥 저 설명만 봐도 충분히 명확하지만말이에요! settings.json에는 명령팔레트를 통해 진입할 수 있습니다. 명령 팔레트의 단축키는 ctrl + shift + p입니다. 기본 설정과 사용자 설정을 ..
https://github.com/lukeed/clsx GitHub - lukeed/clsx: A tiny (228B) utility for constructing `className` strings conditionally. A tiny (228B) utility for constructing `className` strings conditionally. - GitHub - lukeed/clsx: A tiny (228B) utility for constructing `className` strings conditionally. github.com clsx의 깃허브는 다음 링크를 타고 가면 됩니다. JavaScript로 작성된 228B의 작은 라이브러리입니다. 😍사용방법 npm install --save..
https://github.com/dcastil/tailwind-merge GitHub - dcastil/tailwind-merge: Merge Tailwind CSS classes without style conflicts Merge Tailwind CSS classes without style conflicts - GitHub - dcastil/tailwind-merge: Merge Tailwind CSS classes without style conflicts github.com github는 다음 링크를 따라가면 확인하실 수 있습니다. 대체로 typescript를 이용하여 작성되었고 현재 포스트를 작성하는 시점에는 v.3.0 up to v3.3까지 지원이 되네요 (참고로 2023/05/20 기준 ..
