shadcn/ui는 컴포넌트 라이브러리가 아니다.
2025. 6. 30.
Beyond the Article: 한 걸음 더
shadcn/ui는 컴포넌트 라이브러리가 아니다.
shadcn on twitter 🔗shadcn/ui는 단순한 컴포넌트 라이브러리가 아니며, 프로덕션에서의 컴포넌트 라이브러리를 바꾸지 않기 위해서 만들어진 개방형 추상화, API-like 컴포넌트를 만들기 위한 도구임을 강조하는 글입니다. 자세한 방식을 보기 위해서는, shadcn registry를 참고하세요. 아직 실험 기능이지만, 쓸만하며 프로덕션에서 컴포넌트를 안정적으로 교체하기 좋게 만들어진 도구입니다.
봇 감지를 위한 역사
A short history of web bots and bot detection techniques · OlegWock 🔗수많은 방식으로 봇을 감지하는 방식을 늘리고 늘렸지만.. 일반적인 통신으로부터 감지하는 방식부터 헤드리스 브라우저 감지, Captcha, 행동 감지… 여러가지 봇 탐지 방식을 소개하는 글입니다. 이외에도, Captcha나 행동분석 또한 접근성을 지켜야 하기 때문에 Captcha나 다른 봇 탐지 방식을 통해 탐지하기 어려울 수도 있겠네요.
명시도 제어를 위한 도전
CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control — Smashing Magazine 🔗BEM 표기법, CSS layer, Utility CSS가 어떻게 명시도 제어를 처리하는지 소개하고, 어떨 때 좋을지 나쁠지 소개하는 글입니다. 하지만, 핵심을 관통하는 결론도 있으니 보기를 추천드립니다. 더 다양한 스타일링 방식을 보려면 CSS 전략 소개를 참고하세요.
라이브러리에서 번들 사이즈 줄이기 챌린지
How We Reduced CKEditor’s Bundle Size by 40% | CKEditor 🔗npm과 CDN 두개의 방식으로 제공되는 라이브러리를 어떻게 최적화하였는지 소개하는 글입니다. 측정 및 분석, 트리 셰이킹(가장 많은 부분을 차지합니다)과 sideEffect 소개 등 여러 번들 사이즈를 줄이는데 좋은 팁들을 소개합니다. Tree shaking 방식에 딥다이브 하는 글은 Tree shaking이 뭔데를 참고하세요.
모든 CSS color 표현 방식
Color Everything in CSS | CSS-Tricks 🔗말 그대로 색 공간부터 소개해서 여러가지 CSS color 표현 방식을 소개하는 글입니다. 최근 oklch()함수를 사용이 주목 받는 이유는 다음 rgb와 hsl에서 oklch로 바꾼 이유글을 참고하세요.
Tailwind 좋은거 맞아요?
Tailwind is the worst form of CSS, except for all the others | Mux 🔗tailwindcss가 무엇이고, tailwindcss의 장단점을 소개하는 글입니다. tailwindcss 4.0이 되면서 지원 범위나, 컴파일 방식이 바뀐게 단점을 더 약화시키려는 움직임이 보입니다.
Straight to the Article: 빛나는 인사이트
컴포넌트 기반 디자인의 이점 그리고 기준
Just a moment... 🔗트위터에서 디자인의 컴포넌트 기반 디자인을 도입해 재사용성, 문서화로 이익을 챙겼다는 글입니다. 요즘은 컴포넌트의 어디까지 재사용해야 하는지와 얼마나 유연해야 하는지를 고민하게 되지만, 트위터는 기준을 잡고, 어떤 장단점을 얻게 되었는지도 소개합니다.
undo/redo 시스템 설계하기
mlacast 🔗데이터 undo를 간단하게 구현하기에서는 포인터 형식으로 간단하게 구현했다면, 이 글에서는 행동을 의미하는 Action과 실행 스택을 의미하는 Container를 구현하면서 복잡한 undo/redo 시스템을 구현할 때 어떻게 해야 하는지 잘 보여주는 글입니다.
Margin대신 Gap 사용하기
Prefer Gaps To Margins | Kyle Shevlin 🔗display: flex;를 많이 사용하는 요즘 gap을 사용하는 것이 margin을 사용하는 것보다 좋을 수도 있다는 것을 보여주는 글입니다. 물론 경우에 따라 margin을 사용해야 할 때도 있겠지만요.
React Native 그래픽의 미래
The Future of React Native Graphics: WebGPU, Skia, and Beyond (2025) - Shopify 🔗React Native Skia와 WebGPU의 미래에 대해 말하는 글입니다.
WASM에도 역최적화가 적용된다.
Speculative Optimizations for WebAssembly using Deopts and Inlining · V8 🔗WASM에도 Ignition - Sparkplug - Turbofan… 처럼 역최적화 로직을 넣어 성능을 향상시켰다는 글입니다.
JPEG가 어떻게 웹을 지배했을까
How JPEG Became the Internet’s Image Standard - IEEE Spectrum 🔗가독성 좋은 정규표현식 만드는 방법
Tips for making regular expressions easier to use in JavaScript 🔗CSS 신기능으로 스크롤 기반 애니메이션 만들기
A guide to Scroll-driven Animations with just CSS | WebKit 🔗Fresh Finds: 놓치지 말아야 할 소식
Vite 7.0 is out! | Vite 🔗큰 변화는 없었지만 여러 내부 훅과 Node.js/브라우저 support가 변경된 Vite 7 소식입니다.
i18n-check: Validating your Next.js internationalization | Lingual 🔗i18n이 빠진 것이 없는지 체크해주는 라이브러리입니다.
Roadmap to AdonisJS 7 🔗Laravel에서 영감을 받은 AdonisJS가 NodeJS 최소 버전 상향과 ORM 모듈 분리, type-safe 강화 등 여러 기능을 추가한 7 버전 소식을 알렸습니다.
Containers are available in public beta for simple, global, and programmable compute 🔗container를 서버리스 엣지에 모두 배포할 수 있는 플랫폼인 Cloudflare Container 베타 소식입니다.
Prettier 3.6: Experimental fast CLI and new OXC and Hermes plugins! · Prettier 🔗빠른 CLI(실험적 기능)과 신규 플러그인을 제공하게된 prettier 3.6버전 소식입니다.
Astro 5.10 | Astro 🔗기존에는 빌드로만 업데이트할 수 있었던 content collections에서 진화된 live content collections이 추가된 Astro 5.10 소식입니다.
stylish SVG Backgrounds for your websites and designs | Mossaik 🔗멋진 SVG 배경을 만들 수 있는 도구입니다.
Oliver Medhurst - Compiling JavaScript ahead-of-time - YouTube 🔗AOT로 JS를 WASM으로 컴파일하는 도구 Proffor를 소개하는 영상입니다.