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

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

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

React Router의 모듈 최적화

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

React Native Renaimated 들여다보기

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

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

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

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

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

memoization대신 컴포넌트 분리.

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

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

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

Jotai는 Weakmap을 사용한다

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

WebGPU 튜토리얼

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

Enzyme에서 RTL로

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

최신 브라우저를 위한 팁

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

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

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

새로운 친구들

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

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

번외: MCP는 뭘까

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