Svelte 5, 명과 암
2025. 3. 29.
Svelte 5, 명과 암
Svelte 5 And The Future Of Frameworks: A Chat With Rich Harris — Smashing Magazine 🔗Svelte 5 is not Javascript 🔗첫 글은 Svelte 5의 Rune 도입과 철학과 미래를 소개하는 글이고, 두 번째 글은 Rune 도입으로 인해 Proxy가 내부에서 어떻게 동작해야 하는지 알아야 하기 때문에 단점이 부각된다는 점을 짚어주는 글입니다. 두 번째 글에서는 기존 Svelte는 컴파일러가 어떻게 동작해야 하는지 알아야 했다면, Svelte 5에서는 React나 Vue같이 내부에서 Proxy나 여러 Rune이 어떻게 동작해야 알아야 하기 때문에, 기존의 Svelte의 장점이 사라졌다는 것을 주장합니다. 이는 Next.js에서 Astro로 변경하기 글 처럼, 저자의 Svelte 팀에 너무 이입하지 말라는 말처럼, 라이브러리가 리코드를 했을 때 장단점을 파악해서 활용해야 하는 것이 중요합니다. 첫 번째 글에서 새로운 Svelte가 철학과 함께 로드맵을 보여주고 있으므로 그 사이에서 또 다른 장점이 있을 수 있습니다. 하지만 장단점은 주관적이므로, 생각해보는 것이 중요합니다.
종속성을 제공해야 하는가
Bundling dependencies (and when not to do it) | e18e 🔗E18E팀에서 왜 라이브러리를 제공할 때 포함하는 종속성을 번들로 제공해야 하는지, 아니라면 어떤 선택지를 제공해야 하는지를 설명하는 글입니다. 만약 라이브러리를 제공해야 할 경우 어떻게 대처해야하는지 생각할 거리를 제시합니다.
:has(:not) vs :not(:has)
Decoding CSS Selectors: :has(:not) vs :not(:has) | Polypane 🔗보기만 했을 때는 비슷해보이는 :has(:not)선택자와 :not(:has)선택자가 어떻게 다른지 소개하는 글입니다. CSS의 다양한 선택자(ex. :is(), :not(), …)를 어떻게 해석하면 쉽게 해석할지 단계별 접근법을 알려줍니다.
아이콘만 사용하지 말기
In Defense of Text Labels - Christopher Butler 🔗텍스트 대신 아이콘만 사용하면 생기는 단점들을 간단하게 소개하는 글입니다. 물론 경우에 따라 아이콘만 사용하는 것이 도움이 될 수도 있고, 다른 방식으로 텍스트 라벨을 띄울 수 있겠지만, 아이콘만 사용했을 때의 단점은 인지해야겠습니다.
rem대신 수식을 사용하는 이유
Reimagining Fluid Typography | OddBird 🔗디바이스의 차이, 그리고 브라우저 설정을 일부 차용하는 Fluid 폰트 크기를 사용하는 이유를 소개하는 글입니다. 어플리케이션의 차이에 따라서 수식을 변경해야 하겠지만, 여러 요소를 넣은 수식을 기본 값으로 사용하는 것은 고려해볼만 합니다.
TailwindCSS의 단점 이해하기
Understanding the trade-offs of using Tailwind CSS | Blog | Measured 🔗TaildwindCSS의 단점을 더 쉽게, 다양하게 소개하는 글입니다. 물론 TailwindCSS도 사용처가 있고, 명확한 장점이 있지만, 단점을 명확하게 알고 요구사항에 맞게 적용하는 것이 미래의 나에게도 도움이 됩니다.
불완전한 시스템이 더 좋은 경우
When Imperfect Systems are Good, Actually: Bluesky's Lossy Timelines · Jaz's Blog 🔗프론트엔드에 관련된 글은 아니지만, 요구사항 분석을 정확하게 하여 성능과 확장성 모두 챙긴 흥미로운 글입니다.
디자인 시스템 커버리지 측정하기
www.uber.com 🔗디자인 시스템을 만들게 되면 항상 고민하는 것이 개발자가 디자인 시스템을 사용하지 않는 것입니다. Uber 팀에서 어느 부분에서 디자인 시스템을 사용하고 있지 않은지 파악해서 새로운 컴포넌트를 출시하거나 개선할 수 있도록 하는 도구를 만들었다는 글입니다. 도구를 오픈소스로 만든 것은 아니지만, 아이디어를 일부 차용해볼 수 있다고 생각합니다.
& 잘 사용하기
Three Approaches to the “&” (ampersand) Selector in CSS – Frontend Masters Blog 🔗CSS Nesting 잘 사용하기에서는 &가 작동하는 방식과 사용에 주의할 부분에 초점을 맞췄다면, 이 글은 어느 상황에서 사용해야 하는지를 소개하는 글입니다.
Polymopic 컴포넌트 만들기
React "as" Prop Using TypeScript | Playful Programming 🔗디자인시스템에서 많이 볼 수 있는 as를 구현하는 글입니다. 더 여러가지 사례는 예전에 소개했던 React에서 polymorpic component 만들기(w. asChild)를 참고하세요.
간단한 커링 함수 분석하기
Deeply Understand Currying in 7 Minutes - Yazeed Bzadough 🔗Ramda의 curry가 어떻게 구현되어있는지 크롬 디버거로 분석하는 글입니다. 재귀를 JS의 재밌는 특성과 함께 소개하므로, 가볍게 보기 좋습니다.
새로운 친구들
React Native 0.78 - React 19 and more · React Native 🔗ESLint now officially supports linting of CSS - ESLint - Pluggable JavaScript Linter 🔗 Announcing Interop 2025 | WebKit 🔗Introducing the new TanStack React Query integration | tRPC 🔗react-router/CHANGELOG.md at main · remix-run/react-router · GitHub 🔗Deno 2.2: OpenTelemetry, Lint Plugins, node:sqlite 🔗Experimental sessions | Docs 🔗첫 글은 React Native 0.78버전을 출시하면서 React 19 지원과 새로운 기능을 추가했다는 글입니다.
두 번째 글은 ESLint가 CSS 린트 기능을 출시했다는 글입니다. 기본 CSS만을 사용하면 stylelint을 대체할 수도 있겠네요.
세 번째 글은 Interop 2025에서는 4가지 브라우저가 2025년에 어느 기능을 만드는데에 집중할 것인지 소개하는 글입니다.
네 번째 글은 trpc에서 Tanstack Query 지원을 시작했다는 소식, 다섯 번째 글은 React router에서 Type safe URL을 지원을 추가했다는 소식입니다.
여섯 번째 글은 Deno 2.2에서 OpenTelemetry를 빌트인 지원을 추가했다는 소식입니다.
마지막은 늦은 소식이지만, Astro에 실험적 기능으로 세션을 관리해주는 API가 등장했다는 소식입니다.
주목할만한 라이브러리
GitHub - TanStack/create-tsrouter-app: Create-tsrouter-app is drop-in replacement for create-react-app that builds TanStack Router based SPA applications 🔗Style Observer 🔗React Bits - Animated UI Components For React 🔗첫 번째는 React에서 CRA을 deprecated하게 되면서 Tanstack router측에서 제공하는 CRA를 대체할 수 있는 도구입니다. 두 번째는 CSS 값이 변화하는 것을 구독할 수 있는 도구, 마지막은 여러 인터렉티브 컴포넌트 예시를 소개하고 바로 사용할 수 있는 CLI 도구입니다.