저번주 프론트엔드 볼거리 (#64)

- 모니터링 도구 처음부터 구현하기

https://programmingarehard.com/2025/03/11/react-router-error-reporting.html/

에러를 탐지위해 Sentry나 datadog같은 모니터링 툴을 사용할 수도 있지만, 사용하기 힘들 수도 있습니다. 이 글에서는 React Router의 production에서 에러를 모니터링하기 위해 Source map 매핑, 커스텀 서버 구현하는 과정까지 구현하는 과정을 담은 글입니다. analytics 도구나 여러 도구와 연결하면 좋은 모니터링 툴을 만들 수도 있을 것 같네요.

- React Router의 모듈 최적화

https://remix.run/blog/split-route-modules

React Router에서 렌더링하는 과정을 빠르게 하기 위해서 라우터 모듈을 동시에 다운받는 기능을 출시했습니다. 제한사항이 있고 실험 기능이지만, 모듈의 사이즈가 커지는 경우에 좋은 기능이 될 것 같네요.

- React Native Renaimated 들여다보기

https://blog.swmansion.com/how-react-native-reanimated-updates-the-styles-a-deep-dive-338ab22e9f21

React Native Renaimated가 라이브러리에 전달하는 props를 분리해서 전달하여 스타일 업데이트를 최적화한다는 간단한 글입니다.

- AV1은 무엇이고 어떻게 사용할까

https://evilmartians.com/chronicles/better-web-video-with-av1-codec

동영상을 올리고 보여주는 사이트를 만들다보면 동영상의 압축률에 대해 고민을 많이하게됩니다. 이 글에서는 최신 브라우저를 위해 만들어진 AV1 코덱에 대해 설명하고 어떻게 사용하는지 소개합니다. ffmpeg에 대해 설명하는 부분이 더 길지만, ffmpeg 사용에 대한 설명이나 AV1에 대한 설명은 이해하기 쉽게 되어있습니다.

- Next.js를 사용하면 트래픽을 얼마나 줄일 수 있을까

https://martijnhols.nl/blog/how-much-traffic-can-a-pre-rendered-nextjs-site-handle

Next.js의 prerender를 사용하면 얼마나 트래픽을 줄일 수 있을지를 측정한 흥미로운 글입니다.

- memoization대신 컴포넌트 분리.

https://cekrem.github.io/posts/beyond-react-memo-smarter-performance-optimization/

상태를 여러군데에서 사용하지 않는다면 컴포넌트 분리를 통해 memoization으로 리렌더링을 막는 대신 children으로 전달해 리렌더링을 막는 방식을 권장한다는 글입니다.

- SVG를 더 가독성을 좋게 만들 수 있다

https://persevering.substack.com/p/super-crispy-svg-icons

저자가 SVG 아이콘을 디자인 할 때 고려하는 것들을 소개하는 글입니다. path를 단축하는 것은 SVG를 통한 애니메이션을 구현 ( https://www.joshwcomeau.com/blog/whimsical-animations/ )해야 하는 경우에는 하지 말아야 하지만, 좋은 팁들이 많이 있습니다.

- Jotai는 Weakmap을 사용한다

https://newsletter.daishikato.com/p/how-the-jotai-store-api-is-inspired-by-the-weakmap-api

WeakMap이 무엇이고, Jotai가 어떻게 영향을 받아서 만들어졌는지 소개하는 간단한 글입니다.

- WebGPU 튜토리얼

https://okaydev.co/articles/dive-into-webgpu-part-1

WebGPU를 사용하는 튜토리얼입니다. 개념에 대해서 깊게 설명하진 않지만, 멋진 예시 4가지를 만들어보면서 WebGPU(`gpu-curtains` 라이브러리)를 사용하는 방법을 익힐 수 있습니다.

- Enzyme에서 RTL로

https://open.nytimes.com/how-the-new-york-times-systematically-migrated-from-enzyme-into-react-testing-library-b3ea538d001c

Enzyme은 React hook이 등장하기 이전에 좋은 테스트 유틸 라이브러리였지만, React hook과 React testing Library가 등장한 이후 패러다임의 변화와 함께 많이 찾지 않게 되었습니다. 이 글은 마이그레이션 방식 소개와 함께 왜, 그리고 어떻게 방식을 적용했는지 소개하는 간단한 글입니다.

- 최신 브라우저를 위한 팁

https://www.bram.us/2025/03/11/view-transitions-border-radius/

View Transition을 사용할 때 border 애니메이션을 더 자연스럽게 만드는 방법을 소개한 글입니다.

https://harrisonbroadbent.com/blog/cool-native-html-elements/

최신 브라우저에 적용된 여러 HTML 태그를 소개하는 글입니다.

https://ishadeed.com/article/css-relative-colors/

hex나 rgb 함수로 감싸져있는 문자열로 되어있는 색깔을 수정해야 할 때 쉽게 수정할 수 있는 함수인 color-function(), color-mix()를 소개하는 글입니다.

- 새로운 친구들

https://blog.angular.dev/angular-19-2-is-now-available-673ec70aea12

Angular에서 큰 업데이트는 아니지만, 백틱 없이 템플릿 보간 작성, 비동기 Signal에 대한 지원 강화는 눈여겨볼만 하네요.

https://blog.vlt.sh/blog/reproducibility

공급망 공격을 재현할 수 있는지 확인하는 라이브러리입니다. npm 패키지 공급망 공격이 많이 발생하는 지금 활용 방법을 고민해봐야겠네요.

- 번외: MCP는 뭘까

https://norahsakal.com/blog/mcp-vs-api-model-context-protocol-explained/

프론트엔드와 큰 상관은 엇지만, AI를 사용하는데에 떠오른 Model Context Protocal이 뭔지 쉽게 설명해주는 글입니다. MCP 개념이 잘 이해되어서 가져왔습니다.