클립보드를 잘 쓰기 위한 여행

The web's clipboard, and how it stores data of different types

심윤섭: W3C 클립보드 API에 대한 설명과 역사, Figma와 Google Docs에서는 어떻게 사용되는지 설명합니다. 클립보드 API를 활용할 예정이라면 보기 좋을 것 같습니다. 혹은 다른 기능을 구현할 때 다른 유명한 기업에서 어떤 방식으로 구현했는지 보는 것을 배울 수도 있겠네요.

김대관: 복사 기능에 대한 커스텀 구현에 활용할 수 있는 키워드를 잘 설명한 글입니다. 사용자 편의성을 고려하여 클립보드 API를 활용할 때 어떤 구조를 통해 구현할 것인지 엿볼 수 있습니다.

원자 상태 관리 사용기

What the heck is atomic state management?

This post contains a detailed look at atomic state management and Jotai, an atomic state management library

심윤섭: 원자 상태 관리 라이브러리는 Recoil의 등장으로 시작되었지만, 등장때에 받은 관심보다는 현재 사용을 기존 Flux 기반 라이브러리보다 사용이 덜 한 것 같습니다. 하지만 상황에 따라 괜찮을 수도 있다는 것을 가볍게 사용해보면서 장단점에 대해 살펴보는 글입니다. 중앙 집중형 시스템과 분산 시스템의 차이라고 볼 수도 있구요.

김대관: 위 글에서 원자 상태 라이브러리 Jotai와 tanstack-query 기능에 대한 리렌더링 이슈를 보면서, 원자 상태에 맞춰서 리팩토링하는 부분이 인상적이었습니다. 원자 상태 관리가 어려움이 있기 때문에 글쓴이도 좋은 방식은 아니기에 추천하지는 않는다고 하지만, 상태 관리 로직을 외부에 둘 수 있는 효율적인 이점이 있으니 본인의 프로젝트에 맞는 상태 관리를 고민하시는게 좋습니다.

폰트 최적화에 대한 모든 것

The Ultimate Guide to Font Performance Optimization | DebugBear

Font performance optimization is a set of web development techniques that make fonts load faster and render more smoothly, including thoughtful font selection, the use of performant font formats, self-hosting, optimized @font-face declarations, font display strategies, and others.

심윤섭: 최신 브라우저에서 폰트를 설정하는 방법을 모두 설명하는 글입니다. 폰트 최적화에 관련된 글은 아니지만 OpenType의 역사, 폰트 렌더링 방식, 그리고 활용 방식과 생태계를 정리한 2024년 텍스트 렌더링 현황 글이 있으니 관심 있으면 보시길 바랍니다. COLR 포맷을 활용하거나(커스텀 폰트로 syntax highlighting 구현), 가변 폰트를 활용해야 하는 경우(font-feature-settings)도 있으니 가볍게 보시면 좋습니다.

김대관: npm에서 서빙하는 폰트(FontSource, 한글 폰트들은 모두 따로 있음), 비교적 알려지지 않은 API인 Font Loader API(와 API를 활용한 FontFaceObserver)도 있으니 참고하셨으면 좋겠습니다.

`@svg-use`가 해결하고자 하는 것

Introducing @svg-use | Fotis Papadogeorgopoulos

Introducing @svg-use, a set of tools and bundler plugins, to ergonomically load SVG files as components, via SVG's use[href] mechanism.

심윤섭: CRA로 개발하던 분이라면 SVGR을 많이 마주쳤을 것이고, 이에 대한 문제를 많이 마주쳤을 것입니다. 이 글은 SVGR같은 라이브러리인 SVG-in-JS의 문제점을 살펴보고, 다른 접근 방식과 함께 @svg-use가 이를 어떻게 해결했는지 소개합니다.

Build Time 플러그인 vs RSC

Build-time Components | Code Hike

Why React Server Components are a leap forward for content-driven websites

마크다운으로 만들어진 글이 Nextjs에서 어떤 과정을 거쳐 빌드되는 지와 Build-Time 플러그인과 RSC의 장단점은 어떤지 비교하는 글입니다. 단적으로 SSG(상황에 따라 ISR)과 RSC 방식을 비교하는 글입니다. Vercel의 렌더링 설명 글과 같이 읽으면 좋겠네요.