UI 라이브러리, 써야 하나요 만들어야 하나요?

What is a Component Library and Should You Build Your Own?

Before diving into building you're own component library from scratch, let's have a look at the different types of component libraries out there, and the benefits and drawbacks of using them.

심윤섭: UI 컴포넌트 라이브러리의 역사와 장단점을 소개합니다. 추천하는 방식을 단계별로 설명하고 있어 컴포넌트 라이브러리를 선택하는 방식을 알아볼 수 있는 글입니다. 관련 상태(State machine)이나 구조(Headless Component pattern)만 제공해주는 라이브러리도 존재하며, CSS 스타일만 제공하는 라이브러리 또한 존재합니다. 라이브러리를 사용해서 사용자의 경험을 일관되게, 빠르게 구성할 수 있지만, 벤더 락인과 같이 변경하기 어려운 부분도 존재하기 때문에 잘 조합해서 시스템을 만들어야겠네요. UI 컴포넌트 외에도 모듈화한 라이브러리들이 많이 존재하기 때문에, E18E에 대해 살펴보면 좋습니다.

김대관: UI 컴포넌트 라이브러리는 사용자에게 일관된 경험을 제공한다는 장점이 있지만, 특정 컴포넌트에 종속될 경우 다양한 UI 변경에 어려움이 따를 수 있습니다. 자신이 직면한 문제에 가장 적합한 UI 컴포넌트 라이브러리를 선택하기 위해 다양한 기술을 탐색해보는 것이 좋습니다.

일반적인 메모리 누수 원인

Common Causes of Memory Leaks in JavaScript

Identify and fix common JavaScript memory leaks (Node.js and Deno.js)

심윤섭: V8에서 설명하는 메모리에 대한 전반적인 설명과 일반적으로 생기는 메모리 누수 원인을 소개하는 글입니다. 많은 경우에 클로저에 관련되어 있으므로 변수 사용하는 방식에 대해서 주기적인 모니터링이 필요해보입니다. (예시- NodeJS에서 setTimeout 메모리 누수, React에서의 메모리 누수)

김대관: 장기간 실행되는 서버 애플리케이션에서 메모리 누수는 성능 저하와 시스템 불안정의 주요 원인 중 하나로 작용할 수 있음을 인지해야합니다. 이를 해결하기 위해서는 단순히 코드를 작성하는 것을 넘어, 글에 있는 메모리 누수 패턴을 이해하고 주기적으로 이를 검토하는 습관이 필요합니다.

SPA에서 chunk 프리로딩 설정으로 성능 향상

Optimizing SPA load times with async chunks preloading | Matteo Mazzarolo

Improve the performance of client-side rendered SPAs by avoiding the waterfall effect caused by route-based lazy-loading.

심윤섭: React.lazy를 사용하면 발생하는 waterfall 로딩 문제와 이를 해결하기 위해 프리로딩 스크립트를 삽입하는 방식을 webpack에서 적용하는 방법을 설명하는 글입니다. @tanstack/query으로 서버 데이터를 프리로딩하는 방식도 있으니 여러가지를 고려해야겠네요.

CSS 스타일 Cascading 단계와 웹 컴포넌트 활용법 알아보기

HTML Web Components Can Have a Little Shadow DOM, As A Treat | Scott Jehl, Web Designer/Developer

심윤섭: Shadow DOM을 통해 스타일 적용 단계를 활용해서 사용자 정의 스타일링과 컴포넌트 기본 스타일이 충돌이 안나도록 만드는 방법에 대해 제안하는 글입니다. 웹 컴포넌트라 많은 경우에 적용되지 않지만 연관 글의 Cascading 단계는 나중을 위해 알아두는 것은 나쁘지 않네요.

타입스크립트 검사 벤치마크 과정

An approach to optimizing TypeScript type checking performance | EdgeDB Blog

A process for measuring and optimizing TypeScript type checking performance

타입스크립트에서 타입 검사가 많은 파일을 거치게 되면 많은 시간이 걸릴 때도 있습니다. 그러면 CI/CD나 IDE 수정에서 시간이 많이 걸릴 수도 있기 때문에 타입 검사 벤치마크를 하는 것은 때에 따라 중요할 수 있습니다. 그것이 아니더라도 타입 검사를 빠르게 하는 팁도 제공하기 때문에 한 번 가볍게 보는 것도 나쁘지 않습니다.