Beyond the Article: 한 걸음 더

서버 요청을 어떻게 해결할까

하나의 페이지를 렌더링하기 위해서, HTML, UI 라이브러리(React), GraphQL, RSC는 어떤 해결방법을 제시하고 있는지 소개하는 글입니다. 물론, 여기서 소개하지 않는 단점 또한 있지만, 한 번에 정리하는 글은 많지 않으니까요. 지금까지 React 생태계에서 서버 상태 관리를 어떻게 해결하려 했는지 보여주는 글은 Rethinking react best practice를 참고하세요.

Framework-agnostic을 위해 달려가는 두 프레임워크

저번에 소개했듯이, Remix가 React의 의존성을 떼어내고, 웹 API 기반으로, 여러 종속성을 떼어낸 프레임워크가 될 것이라고 소개하는 글입니다.

Tanstack router 역시 리액트에 종속되어 있지 않고, 여러 UI 라이브러리를 지원하기 위해 만들어진 프레임워크입니다. 이 글에서는 Tanstack이 무엇을 지향하고 있는지 보여주고 있습니다.

간단한 두 글이지만, framework-agnostic을 지향하고 있는 두 프레임워크가 비슷한 종류의 글을 작성해서, 묶어서 소개했습니다. 항상 그랬듯이, 표준은 중요합니다(Monkey Patch를 하지 마세요).

피그마의 멀티 플레이어 구축기

Figma에서 협업 기능을 만들기 위해 어떤 알고리즘을 선택했는지, 가장 중요한 confilct는 어떻게 해결했는지 엿볼 수 있는 글입니다. 협업 기능에 관심이 많으시다면, 오프라인 수정 지원과 협업 기능의 충돌, 데이터 동기화 지표나 협업 기능 구현을 위한 아키텍쳐 글도 좋은 글입니다.

useSyncExternalStore은 왜 존재하는가

useSyncExternalStore가 왜 존재하고, 어떻게 사용하는지 소개하는 글입니다. 이 글은 예시와 일반적으로 하는 실수를 어떻게 해결하는지를 기반으로 되어있지만, 왜 tearing 이슈가 발생하는지, 어떤 장단점이 있는지 확인하려면 React에서 상태 불일치 글을 참고하세요.

Spotify가 웹과 데스크탑을 어떻게 통합했는가

UI는 동일한 라이브러리 기반으로, 그리고 기능 부분은 React hooks 기반으로 추상화한 라이브러리를 사용해서 성공적으로 웹과 데스크탑을 하나의 방식으로 통합했다는 글입니다. 실제로 구현할 경우, 추상화와 간접적인 레이어는 구분해야겠지만 생각해볼만한 글입니다.

SearchParams는 State다. 하지만 type-safe한가?

SearchParams가 State라는 것은 많은 프론트엔드 개발자가 알고 있지만, type-safe한 방식으로 하기 어렵습니다. 직접 구현(React 19에서 SearchParams 핸들링하기)하거나 nuqs라는 좋은 도구를 사용할 수도 있지만, type-safe하거나, SearchParams를 다루는 방식이 일관되지 않습니다. 이 글에서는 Tanstack router에서 SearchParams에 접근하는 방식을 소개합니다.

Straight to the Article: 빛나는 인사이트

OKLCH 도구들 살펴보기

OKLCH가 무엇인지 알아보고(제공하는 HSL과 RGB에서 OKLCH로 전환한 이유 글이 잘 소개하고 있습니다), 이를 설명하거나, 잘 사용할 수 있는 도구를 소개하는 글입니다. 특히 harmonizer는 빠르게 컬러팔레트를 만들어야 하는 경우 잘 사용할 수 있겠네요.

Shopify의 Import maps 개선기

Shopify 테마 개발자를 위해, import maps의 사용성을 개선하기 위해 스펙과 어떤 것을 적용했는지 보여주는 글입니다. import maps의 가능성을 엿볼 수 있기 때문에 관심있는 분들은 보세요 :)

document.currentScript 사용하기

document.currentScript로 <script>태그의 위치나 어떻게 호출해야 하는지 제한할 수 있다는 것을 보여주는 글입니다.

RSC는 왜 번들러와 통합해야 하는가

서버 없이 LLM 기반 관련 포스트 구현하기

RSC를 JSON기반으로 설명하기

가능하면, 접근성을 위해 <table>을 사용하지 마라.

최소한의 JS로 마우스 Spotlight 효과 구현하기

Fresh Finds: 놓치지 말아야 할 소식

RN 팀에서 레거시 아키텍쳐에 대한 PR을 받지 않을 것이라고 발표하였습니다.

Remix에 이어서, React Router 또한 Open Governance를 발표하고, 어디로 나아갈지 발표하였습니다.

Svelte 생태계에서 5월에 어떤 일이 일어났는지 정리하는 글입니다.

번외: localhost를 통한 브라우저 취약점?

Meta와 Yandex가 안드로이드의 브라우저 취약점을 통해 트래킹했다는 소식입니다. 아무래도 프론트엔드가 아닌 취약점이다보니 관련은 약하지만, 흥미로워서 가져왔습니다.