어떻게 컴포넌트를 만드는가

어떻게 컴포넌트를 만드는가

Existential React questions and a perfect Modal Dialog

My step-by-step process for implementing a new feature from an idea to a production-ready solution using Modal Dialog as an example.

심윤섭: 리액트에서 가장 어려운 부분인 "컴포넌트를 잘 만드는 법"을 과정을 단계를 밟아가며 소개하는 글입니다. 물론 잘 만드는 법의 정의는 아니지만, 이 과정을 반복하다보면 더 나은 컴포넌트를 만드는데 도움이 됩니다. 글의 5단계에서 라이브러리를 소개하듯이, 여러 UI 라이브러리들은 여러 엣지 케이스와 여러 요구사항에 맞춰 생긴 결과물들입니다. 물론 UI 라이브러리들의 코드베이스는 광대하기에 라이브러리의 모든 기능을 가져올 수는 없겠지만, 내가 마주친 요구사항정도는 분석해서 적용하거나 많은 사람에게 검증된 인터페이스를 적용해볼 수 있을 것입니다. 추상화에 대한 글은 여러가지 글(가장 최근 뉴스레터에서 소개된 추상화와 간접적인 레이어의 차이를 참고하세요)이 있지만, 자신만의 요구사항을 분석하는 방법을 만들어보는게 좋아보입니다. 제가 생각하는 관점은 제가 발표한 동영상을 참고하세요 😅

Island Architecture로 리코드 대신 통합하기

The anatomy of a React Island | Swizec Teller

A coworker asked how React Islands work and I realized it's a technique I've been using to modernize monolithic web codebases for years, but never wrote down how it works.

심윤섭: 기존 시스템에서 기반 라이브러리나 프레임워크를 바꾸는 것은 오랜 시간이 걸립니다. 이에 해결책으로 기존 시스템과 통합할 수 있는 Island Archtecture를 React를 기반으로 구축하는 과정을 보여주는 글입니다. 이 글에서는 React + Vite로 구현하였지만, Webpack + Preact로도 구현할 수 있으며, 여러 환경에 따라 다르게 구현하기 때문에 사용하려는 라이브러리나 프레임워크의 특성을 알아야 합니다.

AutoScrollList 컴포넌트 만들기

AI 챗봇용 AutoScrollList 컴포넌트를 구현하면서 마주친 여러 문제를 해결하는 과정을 소개한 글입니다. ref를 선언할 때 useCallback을 사용하면 리액트 컴파일러에서 오류가 발생한다는 점이 인상적이네요.

브라우저 fallback을 다루는 방식

새로운 JS, CSS 문법을 사용할 때, 서비스에서 간단하게 고려해볼만한 것을 정리한 글입니다. 서비스에 따라 모든 환경에서 최대한 똑같은 경험을 제공해야 하는 경우도 있고, 글에 따라 소수의 환경에서는 다른 경험을 제공해야 하는 경우가 있으므로, 전략을 잘 세워야겠네요. 경우에 따라 UA에 따른 polyfill을 제공하거나, 트랜스파일을 통해 옛날 문법으로 치환할 수도 있습니다.

Tanstack Start..

Why TanStack Start is Ditching Adapters | TanStack Blog

Nitro HeaderTo “adapter” or not? Building a new front-end Javascript framework is a daunting task, as I’ve been learning with building TanStack Start, my new TanStack-powered full stack framework. There’s so many...

첫 글은 Tanstack Start가 Vinxi를 기반으로 만들어져 다양한 환경을 지원한다는 글이고, 두번째 글은 Tanstack Router를 소개하는 시리즈 글로 프레임워크만의 특징을 잘 짚어줍니다.

Spring animation과 직관적 접근 방식

Effortless UI Spring Animations: A Two-Parameter Approach

Creating smooth UI spring animations shouldn’t be so complex. Using parameters like mass, stiffness, and damping can be both time-consuming and unintuitive. In this post, I’ll introduce a simpler method that uses just two parameters—bounce and perceptual duration—to make crafting spring animations easier and more intuitive.

매력적인 어플리케이션을 만들 때 사용되는 Spring 애니메이션을 접근할 때 물리학적인 관점인(질량/강성/감쇠) 대신 다른 접근 방식으로 애니메이션을 설정하는 방식을 소개합니다.

테스트 작성할 때 거짓 양성 방지하기

대부분 자주 실수할만한 테스트 방식 오용이나 매칭 메소드를 잘못 사용하는 경우에 관한 글입니다.

브라우저와 로딩 매커니즘

YouTube

When browsers load a Web page and its subresources, A LOT happens under the hood. They need to take into account render/parsing blocking resources, use a pre...

브라우저마다 로딩 매커니즘이 어떻게 다른지와 우선순위에서 적용되는 개념인 tight mode를 소개하는 발표 영상입니다. fetchPriority와 Speculation Rules API, rel="preload"와 연결짓는 중요한 자료이므로, API를 사용하신다면 보시는 것이 좋습니다.

RN을 쓰면서 배운 교훈

I learned React Native as a web developer, and I got everything wrong

Mistakes I made building with React Native.

RN을 사용하면서 배운 교훈을 간단하게 쓴 글입니다. 일관성있는 UI보다 Android/iOS에 특화된 UI가 더 인기 있다는 점은 흥미롭네요.

새로운 친구

Vite 6.0 is out! | Vite

Next Generation Frontend Tooling

React Router v7 | Remix

React Router v7 brings all the great things you love from Remix back to React Router

Vite 6와 Vite 기반으로 이루어진 React Router(Remix) 7이 등장했습니다.