계속 개발을 지속하기 위해서.

계속 개발을 지속하기 위해서.

소프트웨어를 지속적으로 개발하기 위해서 의존성을 항상 고민하고, 종종 해당 의존성이 맞는지 고민해봐야 한다는 권장부터, 여러가지 생각해볼만한 요소를 제시하는 글입니다. 이러한 고민을 항상할 수는 없겠지만, 주기적으로 해야하고 이를 위해서 항상 배워야 한다는 것은 변치 않습니다.

빌드타임 소셜 이미지 생성

단순히 OG image를 런타임 생성 대신에 빌드타임에 생성하는 방안을 소개하는 글입니다. 지엽적인 요구사항에서만 사용할 수 있는 아이디어지만, Server Component를 빌드타임에 실행하는 방법과 같이 런타임에 실행하던 과정을 빌드타임으로 옮기는 방식은 장단점을 고려해서 적용해볼만 하겠네요.

글꼴에 숨어있는 것들

주 내용은 text-box, text-edge와 같은 신 기능(뉴스레터 배포 당시 draft상태임)이 좋은 이유이지만, 글꼴에 관련된 CSS 속성(거의 line-height)에 숨은 텍스트 정렬에 대한 어려움을 아는데에 도움이 됩니다.

이제 React form 라이브러리가 필요없을지도?

React 19에서부터 useActionState, useFormStatus와 같은 폼 관련 훅을 제공합니다. 물론 react-hook-form, conform같은 라이브러리는 강력하지만, 다른 시스템과 결합하려면, 기본 기능을 기반으로 훅을 만들어볼 수도 있을 것 같네요.

React와 DOM

React에서 흔히 고려할 만한 성능이 느려지는 부분, 그리고 가장 중요한 DOM 크기에 대한 부분을 소개합니다. 이를 해결하는 방법은 글에 쓰여진 부분 외에도 원인에 따라 다르지만, 성능을 느리게 하는 원인을 찾기 위해 시작점으로 두고 시작해도 좋아보입니다.

i18n 검증하기

국제화 관련 파일이 유효한지 확인하는 방법을 추가해보는 과정을 적은 글입니다. 자신들의 패키지를 추천하는 글이지만, 아이디어는 여러 방식으로 구현해볼만 하네요.

성능 최적화를 어필하기

리팩토링이나 성능 최적화같은 작업을 정당화하기 위해 할 수 있는 작업들을 소개하는 글입니다. Lighthouse와 CrUX 데이터의 차이부터 모니터링 데이터를 쌓는 방식을 구체적으로 소개하는 글이니 성능 최적화에 들어가기 전에 보면 좋은 발표입니다. 비슷하게 web.dev에서 올린 웹 성능을 사업 지표에 연관짓기나 Core Web Vitals 쉽게 이해하기도 보면 좋습니다.

TypeScript 더 잘 쓰기

TypeScript를 더 잘 쓰는 방법을 소개하는 발표입니다. 알 수도 있는 Type Guard부터 런타임 타입 검증, never타입을 기본 값에 넣기, assert... 여러가지 TypeScript를 더 잘 사용할 수 있는 기술을 소개합니다. 모두 적용해보는 건 어렵겠지만, 알아두면 좋습니다.

모를 수도 있는 최신 API들

최근 baseline에서 지원하게 된 여러 애니메이션 관련 브라우저 API, HTML 요소, CSS 속성들을 소개하는 발표입니다. 아직 구식 브라우저에 100% 지원을 해야한다면 쓰기 어렵겠지만, 아니라면 사용해볼만합니다.