React에서 INP 개선하기

React에서 INP 개선하기

How To Improve INP: React⚛️ | Jacob 'Kurt' Groß

All-in-one guide for improving Interaction-to-Next-Paint (INP) Core Web Vital in React applications. Introduces the useAfterPaintEffect hook.

이전에 소개했던 INP를 개선하기 위한 패턴 저자의 React에서 INP를 개선하기 위한 기술을 소개하는 글입니다. use*Effect이 언제 실행되는지에 대한 글(useInsertionEffect는 어떻게 동작하는가)도 같이 보면 이해에 도움이 됩니다.

try...catch 최대한 쓰지 마세요

Try...Catch As Little As Possible | Goldblog

This is a general explainer for pull request reviews where a try...catch statement is used more than I think it needs to be.

try...catch로 검증하는 부분을 최소한으로 유지해야 하는 이유를 설명하는 글입니다. 비슷하게, React의 <Errorboundary>또한 적절한 경계를 같고 있어야 합니다. Fault tolerance 개념을 바탕으로 <Errorboundary>의 적절한 경계의 예시를 풀어내는 글 또한 추천드립니다.

TypeScript 도입 시간 단축하기

A leap in the evolution of Airtable’s codebase: Scaling TypeScript to thousands of projects | by Michael Mitchell | The Airtable Engineering Blog | Dec, 2024 | Medium

We previously wrote about how Airtable migrated its codebase from Flow to TypeScript. A few years and several TypeScript versions later, TypeScript is still a critical tool for preventing bugs early…

TypeScript의 isolationDeclaration기능과 여러 툴(모노레포, AI…)을 사용해서 타입스크립트 도입을 빠르게 진행한 예시를 보여줍니다.

Tailwind 4에 대한 의견

Thoughts on Tailwind 4

Some thoughts on the latest Tailwind release

Tailwind 4에 도입된 여러 기능에 대한 의견을 말하는 글입니다. 글 마지막에 적혀있듯 근본적인 문제점을 많이 해결하지는 못했지만, 이전에 비해 지원 범위가 늘어난 것은 주목할만 하네요.

오프라인 수정 지원과 협업 기능의 충돌

Lies I was Told About Collaborative Editing, Part 1: Algorithms for offline editing / Moment devlog

In early 2024, I began investigating

협업 기능과 오프라인 수정 기능과 충돌이 자주 일어나는데, 알고리즘(CRDT, OT)의 문제보다는 UX의 문제일 수도 있다는 재밌는 관점을 제시하는 글입니다. Ycombinator 댓글에 적힌 충돌 관리(와 다른 여러 기능을 다룬) 논문이나 CRDT와 Postgres의 특징으로 인프라 부하를 조심해야 한다는 댓글이 눈에 띄네요.

ts-blank-space와 트랜스파일 개선

London TypeScript Community Meetup (10/02/24): Faster TypeScript Compilation - YouTube

On Wednesday, October 2, 2024, Bloomberg hosted our first TypeScript Community Meetup at the company's London Office.Unlike Porffor, most JavaScript engines ...

라이브러리 소개 발표이지만, 트랜스파일 과정을 소개하는 것과 제한적인 상황에서 모던 타입스크립트 방식 코드는 다른 언어로 작성된 트랜스파일러와 비슷한 속도를 보여줄 수 있다를 소개하는 것은 크게 다가오네요. 비슷하게 Polyfill은 필요할때만이라는 글도 같이 보면 좋습니다.

프론트엔드와 가독성

Washing your code: don’t make me think by Artem Sapegin

All the different ways programmers like to write clever code, and why we should avoid clever code as much as possible.

원라인 코드나, 보편화된 API를 사용하지 않는 코드…. JS에서의 가독성을 해치는 여러 패턴을 살펴봅니다. 몇 가지는 흔히 볼 수 있는 코드는 아니지만, 내가 사용하는 코드 패턴이 있는지 되돌아보기 위해 볼만 하네요.

CSS만으로 범위 input 만들기

Native dual-range input · Muffin Man

Two native range inputs and fifty lines of JavaScript to make them work together.

CSS와 간단한 JS로 범위 input을 어떻게 만들었는지 소개하는 글입니다.

타입만 가져오기

Sharing Types and Code Between the Server and Client

Usually you want to treat the server and client as completely separate worlds, but sometimes it's convenient to share code between them.

타입만 가져오기 위한 타입만 가져오는 기능을 소개하는 짧은 글입니다. 타입만 사용하는데 타입만 가져오지 않는 경우 컴파일 크기에 큰 영향을 끼치니 주의해야 합니다.

backdrop-filter 살펴보기

Next-level frosted glass with backdrop-filter • Josh W. Comeau

Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to create the most realistic lush frosted glass anywhere on the internet.

Frosted Glass from Games to the Web - tyleo.com

Crafting beautiful HTML glass UI inspired by AAA game development.

두 글 모두 backdrop-filter속성을 이용해 유리와 같은 효과를 주기 위한 구현해보는 글입니다. 두 글이 구현 방식이 다르므로 CSS 접근 방식을 살펴보는 것도 좋겠네요.

새로운 친구들

Astro 5.0 | Astro

Astro 5.0 brings exciting new features like the Astro Content Layer for seamless content loading from any source, and Server Islands for effortlessly combining static and dynamic personalized content.

React v19 – React

Vite 6와 Content Layer, server island…가 추가된 Astro 5버전과 여러 훅과 새로운 기능이 포함된 React 19가 출시되었습니다.

번외. AI와 개발 기술

The 70% problem: Hard truths about AI-assisted coding

A field guide and why we need to rethink our expectations

Why AI Makes Dev Skills More Valuable

AI isn't replacing devs, it's making them more valuable. Let's look at how the job of devs is evolving and how it impacts teams

번외로 AI가 프로토타이핑, 반복작업에는 능해도 복잡한 히스토리/요구사항이 담긴 문제를 해결하기는 힘들다는 관점이 담긴 글입니다. 나중에는 바뀔지도 모르겠지만, 적절한 관점이라 생각해 가져왓습니다.