당신이 Remix를 사용해야 하는 이유

당신이 Remix를 사용해야 하는 이유(어그로 끄는 유튜브 톤으로)

심윤섭: NextJS에서 Remix로 마이그레이션한 과정을 담은 글입니다. Remix가 NextJS보다 나은 점은 웹 표준에 가까운 API, 어느 한 인프라와 무관하게 다양한 어댑터를 제공하는 점(NextJS는 vercel에 강력하게 묶여있음), 다양한 세팅 방식을 제공하는 점에 있습니다. 위의 마이그레이션 글과 ChatGPT의 마이그레이션 소식을 보면 마이그레이션을 조건에 맞는 경우 고려해볼 수도 있겠네요. Remix에서 코드 기반 라우팅 업데이트, 모든 JS환경에서 사용할 수 있는 외부 패키지 제작도 진행하고 있으니 관심가지고 있어야 겠네요.

상태는 모두, 유한 상태 기계을 본뜬 것

심윤섭: 필요한 상태를 모두 분리하지 않고 union타입으로 현재 상황과 필요한 값을 정의하는 방식을 도입하는 과정을 소개한 글입니다. 유한 상태 기계라는 개념을 바닐라 JS로 구현하는 과정을 소개합니다. Flux패턴보다 제한을 두며 쉽게 과정을 제어할 수 있는 유한 상태 기계라는 개념을 이해하고 XState라이브러리를 사용하면 좋습니다. XState 튜토리얼을 원하시면, 이 가이드를 참고하세요.

대체 언제부터 ES5를 쓰지 않았다고 착각한거지?

심윤섭: 웹에서 순수 ES6+ 문법을 얼마나 사용하고 있는지에 대한 데이터, 번들러에서 제공하는 트랜스파일 기본값, 라이브러리의 ES6+ 문법을 사용하고 있는지를 기반으로 ES5 문법의 사용 현황을 알려줍니다. 그리고 권장사항도요. ES6+를 사용하는 것은 유지보수에서 시작해서 크게는 성능 최적화, 코드 구조에도 영향이 갈 수 있으니 ES6+를 사용하되 트랜스파일 과정과 지원 QA과정을 확인해야겠네요.

setTimeout() vs setImmediate()

setImmediate() vs setTimeout() in JavaScript

both setImmediate() and setTimeout() are used for scheduling tasks, but they work differently.

setTimeout()와 setImmediate()의 차이를 이벤트 루프와 함께 소개하는 글입니다. 타이밍을 정확히 제어하기 위해 봐야한다고 생각합니다. 추가로 NodeJS에서 setTimeout() 누수 이슈도 있으니 확인하고 사용해야 할 것입니다.

:has()소개, 그리고 사용처

The Undeniable Utility Of CSS :has • Josh W. Comeau

Of all the latest and greatest CSS features, the “:has” pseudo-class wasn’t exactly at the top of my wishlist. Once I started using it, however, I kept discovering incredible things I could do with it. It’s now become a core part of my toolkit! In this blog post, I'll show you some practical real-world problems I solved using “:has”, as well as some wild experiments that blew my mind!

Replacing React code with CSS :has selector

Looking into what the new CSS :has selector is and how it can be used to improve our React code. Includes practical and beautiful examples.

심윤섭: :has()는 최근에 추가된 유용한 의사 클래스 중 하나입니다. 두 글은 어디에 사용되면 좋은지 코드와 함께 소개합니다. 하지만 비교적 최근에 추가되었으므로 이전 버전에 대한 지원이 필요한 경우 더 신중하게 사용해야겠네요.

오픈소스에서 제품 관리하는 방법 배우기

Managing Angular · Minko Gechev's blog

Angular의 PL로 있으면서 목표 설정, 데이터 수집, 의사결정에 대해 간단하게 설명한 글입니다. 간단하게 설명한 글이라 정수를 담은 글은 아니겠지만 엔지니어로서 제품을 만드는데 접근하는 방식을 배울 수 있는 좋은 글이라 생각하여 가져왔습니다.

Svelte가 Signal로 반응성 문제를 어떻게 해결했는가

Svelte 5에서 이전부터 있는 반응성 문제를 Signal을 도입함으로써 해결한 과정을 소개하는 글입니다. Signal은 SolidJS에서 도입되어 Preact, Angular, Svelte까지 메인 상태관리로 도입되었으므로 한 번 주목해볼만 합니다.

Github 우승!

Why GitHub Actually Won

How GitHub _actually_ became the dominant force it is today, from one of it's cofounders.

Git이 시장을 지배하게 된 이야기와, Github가 그 기반으로 진짜로 형상관리의 지배자가 된 이야기를 풀어낸 글입니다. 운이 많은 것을 지배한 이야기지만, Github가 커뮤니티에 진정성 있는 일원이였다는 것은 여러가지를 생각하게 만드네요.

React 데이터 받아오기의 역사

가볍게 useEffect를 데이터를 받아오면 안되는 이유와 useLoaderData(), RSC에 대해 소개합니다.

RN

This Week In React #200: Remix, React Universe, Next.js dynamicIO, :has, Redwood, MDX, Atomic-CRM, NewArch, Fusebox, Hermes, Gesture Handler, TypedGPU, Firebase, Vite, Express, TypeScript, Rsbuild... | This Week In React

Hi everyone!

RN 컨퍼런스의 중요 부분을 잘 소개해서 뉴스레터 부분을 직접 가져왔습니다. 파편화된 디버깅 툴을 크롬 디버깅 툴 기반 디버깅 도구인 퓨즈박스로 대체할 것이라는 발표와, Static Hermes의 현상황을 소개하는 발표를 정리한 글입니다.

TypeScript 5.6 소개

Announcing TypeScript 5.6 - TypeScript

가장 중심이 되는 조건부 구문에 실수를 줄이는 오류를 새로 뱉도록 하는 기능부터 iterator 지원 강화, DX강화 등이 있습니다.

간단한 팁들

How to Show Task Sequence Progress with React Suspense and RSC in Next.js | Nico's Blog

Without useState, useEffect, client side fetch, or any other networking library

Sticky Headers And Full-Height Elements: A Tricky Combination — Smashing Magazine

Sticky positioning is one of those CSS features that’s pretty delicate and can be negated by a lot of things, so here’s another one to add to your mental catalog: Sticky elements don’t play nicely if they have to coordinate with other elements to make up a combined height, like `100vh`. Philip Braunen explores why this happens and presents a solution to fix it.

첫번째는 RSC에서 waiting 상태 표시하는 방법을 소개하는 글이고, 두번째는 position: sticky;헤더와 최대 높이를 채우는 요소를 CSS로만 해결하는 트릭을 소개하는 글입니다.

display: contents;설명회

CSS display contents

Learn how to use display contents to build more fluid layouts.

현재 요소만을(하위 요소 제외) element tree에서 제거하는 기능인 display: contents;를 소개하는 글입니다.