도움되는 오류 메세지 작성하기

도움되는 오류 메세지 작성하기

여러가지 팁을 통해서 사용자가 오류에 대처할 수 있도록 돕는 도움이 되는 오류 메세지를 작성하도록 돕는 글입니다. 더 범용적이고, 오류 메세지 말고도 다른 UI와 합쳐서 어떻게 작성해야 하는지 가이드하는 글은 Designing Better Error Messages UX를 참고하시고, 다른 회사의 것을 참고하려면, Spotify의 글이나 토스의 글을 참고하세요.

리액트 컴포넌트 더 잘 만들기

정말 리액트 컴포넌트를 잘 만들기 위한 모든 것을 다루지는 않지만, 기본 리액트를 배운 상태에서, 기본 디자인 패턴(ex. button, input, …)을 더 잘 만들기 위한 팁을 소개하는 영상입니다. 여기서 더 나아가서 컴포넌트를 Composition으로 구성하느냐, slot 방식으로 구성하느냐와 같은 여러 디자인시스템에 적용하기 전 컴포넌트를 만들 때의 구상을 할 수도 있지만, 소개하는 팁도 훌륭합니다.

<Context.Provider>의 재렌더링을 막기 위해 부모 트리와 소유자 트리 개념을 도입해 소유자 트리를 최적화하는 글입니다. 컴포넌트로 감싸서 최적화하는 방식은 과거에 많이 나왔지만(ex. Tkdodo님의 memoization방식 소개), 부모 트리와 소유자 트리 개념을 도입하는 것은 신선하네요.

useEffect의 동작 알아보기

React의 렌더링 과정과 연결지어서 useEffect 실행 순서가 어떻게 정해지는지 소개하는 글입니다. 더 자세한 코드와 설명을 보려면, JSer의 useEffect Deep dive 글을 보시길 추천드립니다.

애니메이션을 더 좋게

간단한 애니메이션을 넣는 것만으로 UI가 멋져보일 수 있지만, 더 멋지게, 더 좋게 만들기 위한 팁을 소개하는 글입니다.

Webview를 네이티브처럼 만들기

Shopify의 Webview를 네이티브로 만들기 위해 한 노력들과 팁을 소개하는 글입니다. cached-webview 라이브러리같이 방법론만 제시한 경우도 있지만, 여러 팁은 웹뷰를 개발하는데에 좋은 팁이 됩니다.

"use client"가 하는 일

"use server"와 "use client"가 어떻게 동작하는지를 간단하게 소개하는 글입니다.

낙관적 업데이트와 동시 요청

낙관적 업데이트는 즉시 UI를 업데이트해서 사용자가 빠르다고 생각하게 할 수 있지만, 같은 업데이트가 여러번 있을 경우의 낙관적 업데이트에서는 race condition과 이상한 UX가 생길 수도 있습니다. 이를 어떻게 해결해야 할지 소개하는 글입니다.

RSC는 Promise를 직렬화 한다, 어떻게 가능한걸까?

JSON.stringify에서는 불가능한 Promise 직렬화를 React에서는 어떻게 해결했는지 밑바닥부터 구현하면서 알아보는 글입니다. 이외에도 RSC에서는 Map, Set..과 같은 자료구조도 직렬화 가능하다니 알아둬야겠네요.

Lexical Environment 시각적으로 이해하기

JS의 동작의 중심인 Lexical Environment를 코드와 함께 좋은 다이어그램으로 이해하기 쉽게 돕는 글입니다. Closure를 소개하는 javascript.info글과 같이 보면 좋습니다.

네트워크가 불안정할 때를 대비한 이미지 업로드 구현

IndexedDB와 Service Worker를 사용해서 네트워크가 불안정할 경우 로컬에 저장하고 나중에 업로드하는 로직을 구현해보는 글입니다.

주목할만한 친구들

2023년 Baseline으로 들어와 모던 브라우저에서 모두 구현된 line-height 기반 lh단위에 대해 소개하는 글입니다.

V8에서 실험적으로 JS에서 명시적으로 함수를 바로 컴파일할 것인지 이후에 컴파일할 것인지 힌트를 제공할 수 있도록 하는 기능을 추가했다는 글입니다. 보기에 흥미로운 글이지만, 청크단위로 컴파일하지 않는 이상 많이 마주치기 힘든 기능인 것처럼 보입니다.

Dockerfile같은 컨테이너 선언 파일을 기반으로 WASM 바이너리로 만들어주는 어플리케이션인 Boxer를 소개하는 영상입니다.

pnpm과 yarn이 JSR 패키지 설치를 지원한다는 소식입니다.