동시성, 병렬성을 JavaScript 내에서 이해하기

동시성, 병렬성을 JavaScript 내에서 이해하기

심윤섭: CS지식에서 많이 헷갈리는 개념인 동시성, 병렬성을 소개하고 NodeJS에서 어떤 방식으로 두 개념을 구현하는지 소개하는 글입니다. 브라우저 API, 또는 Web Worker 개념도 비슷하게 적용 가능하니 보시길 추천드립니다.

김대관: 동시성과 병렬성에 대한 개념을 NodeJS에서 예제를 통해 구분을 보여주는 부분에서 많은 이해가 되는 글이었습니다. 비동기 처리에 있어서 동시성과 병렬성에 대한 React 코드 작성을 고민하신다면 토스에서 발표한 비동기 처리 영상을 보시는 것을 추천드립니다.

Tanstack Router의 TypeScript 성능 최적화하기

A milestone for TypeScript Performance in TanStack Router | TanStack Blog

TanStack Router pushes the boundaries on type-safe routing. The router's components such as ` and its hooks such as useSearch, useParams, useRouteContext and useLoaderData, infer from the route definitions to offer great type-safety. It's common for applications using TanStack Router to use external dependencies with complex types for validateSearch, context, beforeLoad and loader` in their route definitions.

심윤섭: 타입스크립트 검사 벤치마크 과정과 비슷하게 타입 체크 과정을 추적하고 최적화과정을 담은 글입니다. 타입스크립트 유형 추론 병목은 매우 지엽적인 부분이지만 병목 현상을 찾기 위해 분리하고 해결하기 위해 해결하는 여러 방법을 모두 생각해보는 방식은 여러 방면으로 적용할만합니다.

React 추상화에서 가장 많이 실수하는 부분

Using callbacks to achieve better component decoupling in React | Dario's Blog

Decouple React components effectively by passing functions the right way, creating more testable and maintainable code.

심윤섭: setState를 직접 전달하지 말라는 간단한 글이지만, 처음 React를 접했을 경우 많이 실수하는 부분입니다. setState를 전달하면 props는 줄어들지만, 결합성은 증가해 수정하기 어려워지기도 합니다.

height: auto;가 애니메이션 작동이 안되요

Animate to height: auto; (and other intrinsic sizing keywords) in CSS  |  CSS and UI  |  Chrome for Developers

Animate to and from intrinsic sizing keywords with `interpolate-size` and `calc-size()`

심윤섭: 자주 마주치는 상황이며, 키워드 글입니다. interpolate-size라는 새로운 기능을 소개하는 글이지만, CSS 삽입이나, JS animation API로도 구현할 수 있고, 최신 API이기 때문에 polyfill 구현은 필요해보이네요.

React 19 치트시트

React 19 Cheat Sheet | Epic React by Kent C. Dodds

Get Extremely Good at React

React 19의 신 기능들을 한 눈에 볼 수 있는 치트시트입니다. React 16.8 그 이후 글이나 Vercel의 React 19 소개 글도 같이 보면 좋습니다.

RTT가 무엇이고, 어떻게 대응해야 하죠?

Optimising for High Latency Environments – Harry Roberts – Web Performance Consultant

We can’t do much to change latency, so how can we work around it?

심윤섭: 생소한 개념인 RTT(왕복 시간)에 대해 소개하고, 해결하는 방법과 기술들을 소개를 하는 글입니다. 지표는 단순하게 하나지만, TTFB 최적화 가이드와 같이 인프라와 어플리케이션의 여러 부분을 살펴봐야 하므로, 지표를 인지하고 여러 방식을 생각하는 것이 좋아보입니다.

SPA에게 지연로딩은 좋은가?

심윤섭: SPA에서 지연 로딩은 번들 크기를 줄인다는 점에서 좋지만, 상황에 따라서 좋지 않은 경우가 생깁니다. 이 글은 loader를 같이 사용할 경우 병렬로 로딩되지 않는다는 점에서 좋지 않다는 것을 설명하지만, 이외에도 다른 상황에서 waterfall이 발생할 수 있으므로 적절하게 사용해야 합니다.

김대관: SPA에서 지연 로딩을 통해 번들 크기를 줄일 수 있지만, loader와 일부 컴포넌트의 분리를 통해 병렬 로딩을 처리해야 한다는 인사이트를 얻을 수 있습니다. 지연 로딩에 대해서 성능적으로나, 사용자 경험에서 반드시 필요한지를 잘 검토하고 사용해야합니다.

Remix의 복잡한 라우팅 작동 방식

How Remix's Flat File-Based Routing Works

Learn how Remix's flat file-based routing generates routes from file names.

Remix는 라우팅의 방식은 여러 설정방식이 있고, 대규모로 발전되면 어떤 컨벤션을 사용하든 혼란스러워진다는 것을 강조합니다. 그리고 Flat 파일 기반 라우팅 방식은 직관적이지 않습니다. 이 글은 이 방식을 쉽게 이해할 수 있도록 돕는 글입니다.

TypeScript에서 배열 안 객체의 프로퍼티의 타입 얻기

This Crazy Syntax Lets You Get An Array Element's Type | Total TypeScript

Learn how to extract the type of an array element in TypeScript using the powerful `Array[number]` trick.

여러 군데에서 사용할 수 있는 좋은 트릭인 배열 안 객체의 프로퍼티의 타입을 얻는 방법을 설명한 글입니다.

Infinite Query는 어떻게 동작하는가

How Infinite Queries work | TkDodo's blog

A serious bug report about infinite queries led me to question it's architecture, but it all turned out fine in the end ...

Tanstack Query는 어떻게 동작하는가에 이어 Infinite Query의 동작과정과 가지고 있던 버그를 수정하는 과정을 소개하는 글입니다. 버그는 간단한 클로저 선언 문제였지만, Tanstack Query의 계층을 한번 더 상기할 수 있는 좋은 글입니다.

JavaScript to C API의 역사

C 프로그램을 컴파일하고 JS에서 실행하려는 역사를 소개하는 글입니다. bun 기능을 소개하는 글이지만, 초반 부의 역사는 읽을만 하네요!

JS로 차 해킹하기

Hacking cars in JavaScript (Running replay attacks in the browser with the HackRF) | Charlie Gerard | Senior frontend developer & Creative Technologist Charlie Gerard | Senior frontend developer & Creative Technologist

Collection of side projects, conference talks and blog posts experimenting with frontend technologies and human-computer interaction

WebUSB API와 자동차 키의 작동 방식을 간단하게 설명하는 흥미로운 글입니다. 가볍게 읽어보기 좋습니다.

더 나은 try...catch구문 만들기

Cleaner JavaScript promises with safe-await

Explore how the safe-await pattern can simplify handling JavaScript promises, making code cleaner and more maintainable.

try...catch구문이 유지보수하기 어려운 이유와 (다른 언어의 오류 처리 패턴을 통해) 라이브러리를 통해 오류 처리를 보기 쉽게 만드는 방법을 소개합니다. 간단한 라이브러리이므로 오류처리에 대해 어려움을 겪는 경우 선택지 중 하나가 될 수 있습니다.

새로운 제품 소식?

Astro 5.0 Beta Release | Astro

The first beta for Astro 5.0 beta is now available for you to try!

WebKit Features in Safari 18.0 | WebKit

MDX in Next.js - Space Jelly

Learn how to set up and configure MDX in a Next.js App Router app with next/mdx and Next MDX Remote.

첫번째는 Astro가 5버전 베타 릴리즈했다는 소식입니다. 타입 안정성을 강화하고 컨텐츠를 잘 가져올 수 있는 Content Layer를 추가했네요. 두번째 글은 Safari 18버전 출시 소식인데, "주의 제어 기능"(Distraction Control)을 주목할 만하다고 생각합니다. 모달로 이벤트를 나타내는 건 좋은 UX가 아니니까요. 세번째 글은 @next/mdx가 frontmatter에 대한 지원을 하지 않는 것을 소개하고 이를 보완한 라이브러리인 next-mdx-remote을 소개하는 글입니다.