2023년 React 생태계의 변화, 그리고 앞으로의 방향성을 알 수 있는 State of React 2023이 발표되었다.
눈여겨볼 만한 조사 결과들은 다음과 같다.
컴포넌트 라이브러리- React Aria, Radix 등의 headless 접근 방식이 높은 선호도를 기록하였으며, style을 직접 제공하는 MUI, Bootstrap, Ant Design 등의 라이브러리는 사용자는 많으나 부정 경험이 높은 것으로 조사되었다.
- shadcn/ui와 같은 복사 붙여넣기로 자유롭게 커스터마이징 할 수 있는 방식도 눈여겨볼법하다.
상태 관리데이터 로딩- Tanstack Query가 여전히 인기를 이어가고 있으며, 유사한 SWR에 비해서 긍정적 사용 경험이 훨씬 높게 조사되었다.
- GraphQL쪽에서는 Apollo Client가 Relay보다 높은 긍적적 사용 경험의 비율을 보였다.
메타 프레임워크사용- Server Component, SSR, SSG 등에 대한 많은 관심에도 불구하고, 대다수의 React 사용자가 Single Page Application에서 작업하고 있다는 점이 흥미롭다. 한편, Pain Points로 React Server Component가 뽑히기도 하였다.
프런트엔드 개발자는 일반적으로 객체 지향 프로그래밍보다 함수형 프로그래밍에 더 익숙한 경향이 있어 보인다.
React로 개발하면 class 키워드를 잘 쓸 일이 없는 것도 사실이다. 하지만, class를 사용하지 않는다고 OOP를 하지 않는 것은 아니다. React의 컴포넌트나 Hook을 객체지향에서 얘기하는 객체로 바라볼 수도 있고, 모듈 분리 또한 OOP에 해당한다고 생각할 수 있다.
토스 프런트엔드 리드들의 FP와 OOP에 대한 생각을 들어보자.
모닥불은 토스에서 제작하는 프런트엔드 개발 유튜브 컨텐츠이다.
시리즈로 EP.1 토스에서 말하는 “가독성 좋은 코드” 란 무엇일까?, EP.3 프론트엔드 개발에서 테스트 자동화, 꼭 해야 할까? 에피소드도 공개되어있다.
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2024(5월)에서 발표되었던 세션이 Naver TV 및 Naver D2를 통해서 외부에 공개되었다.
타입이 추론되는 원리가 궁금한 개발자, infer 등으로 고급 제네릭을 사용해 보고 싶은 개발자에게 이 글을 추천한다.
수학적인 내용이 많아서, 이해가 어렵다면 수학적 내용이 덜어진 타입스크립트 타입 레벨 프로그래밍을 읽어보길 추천한다.
TypeScript 5.5 버전이 릴리스되었다.
눈여겨볼 만한 변화들은 다음과 같다.
Inferred Type Predicatesbird is Bird처럼 명시적으로 개발자가 작성하던 type predicate가 자동으로 추론되기 시작하였다.
Regular Expression Syntax Checking- 정규 표현식이 타입 검사 범위에 추가되었다.
Isolated Declarations- 새로운
--isolatedDeclarations옵션을 통해서 명시적인 타입을 강제할 수 있다.
- 새로운
Editor, TSServer- 여러 개선사항을 통해서 개발자가 IDE에서
Restart TS Server를 자주 수행하지 않도록 개발자 경험을 향상시켰다.
- 여러 개선사항을 통해서 개발자가 IDE에서
1Password가 내부 해커톤을 통해서 어떻게 빌드 속도를 개선했는지 소개한다.
OpenTelemetry와 Jaeger를 활용하여 전체 빌드 프로세스를 프로파일링하고, 이를 기반으로 빌드 프로세스를 개선한 방법을 설명한다.
개선에 사용된 기술들도 흥미롭지만, 해커톤을 통해서 개선을 시도하는 과정 자체도 매우 인상적이다.
긴 빌드 시간으로 고통받는 개발자들에게 도움이 되길 바란다.
카카오 FE 플랫폼 조직의 주니어 개발자가 대표 색상 추출 라이브러리를 개발한 과정을 소개한다.
광고 이미지의 대표 색상을 어떻게 정의할 것인지 문제를 정의하고, 문제를 해결하기 위해서 K-means Clustering Algorithm을 선택하여 적용하고 테스팅, 라이브러리화 하는 과정이 흥미롭다.
ECMAScript 2024가 127번째 ECMA 총회에서 승인되었다.
눈여겨볼 만한 변화들은 다음과 같다.
Map.groupBy(),Object.groupBy()- lodash의 _.groupBy() 메서드와 유사한 맵과 객체를 그룹화하는 메서드가 추가되었다.
Promise.withResolvers()- resolve하려는 Promise를 생성하는 새로운 방법을 제공한다.
- [번역] JavaScript에서 Promise를 취소하는 방법과 함께 읽으면 이해에 도움이 될 것이다.
- 새로운 정규 표현식 플래그 /v(.unicodeSets)
한글 번역으로 편하게 읽을 수 있다.
Ladybird는 SerenityOS 프로젝트의 HTML 뷰어로 시작하여, 현재는 Linux, macOS 등 다양한 Unix 계열 시스템을 지원하는 크로스 플랫폼 브라우저로 성장하였다. Chrome 기반의 다른 브라우저들과 다르게, Ladybird는 다른 브라우저의 코드를 사용하지 않는 것이 특징이다. 2026년 첫 알파 버전을 목표로 한다고 한다.
Chrome 127 버전부터 window.ai를 통해서 Gemini Nano AI 모델을 브라우저에서 사용 가능하게 제공한다고 한다. Browser에서 on-device AI의 시작이 될지, 표준화되지 못하고 끝나는 chrome의 도전이 될지 귀추가 주목된다.
openapi-typescript를 통해서 OpenAPI 스펙에 대한 타입을 생성하고, openapi-fetch를 통해서 fetcher를 생성한 후 둘을 기반으로 TanStack Query까지 타이핑하는 일련의 과정을 소개한다.
tRPC와 유사하게 백엔드의 스펙 변경이 클라이언트에 자동으로 타이핑되는 DX를 원하는 개발자에게 이 글을 추천한다.
radix-ui에서는 React Component Composition을 지원하기 위해 asChild props을 사용한다.
필자는 해당 패턴을 render delegation로 소개하며 이를 직접 구현하는 방법에 대해 소개한다.
React의 Suspense는 16.6.0 버전부터 지원된 오래된 기능이다. 그러나, React.Lazy, Suspense가 지원되는 라이브러리를 제외하고는 잘 사용되지 않는것이 사실이다.
공식문서에 Suspense API는 제대로 문서화 되어있지 않고, Suspense사용을 위해서 Suspense가 지원되는 라이브러리 사용을 유일한 방법으로 소개한다.
필자는 Suspense가 지원되는 라이브러리를 직접 만들며 문서에 소개되지 않은 Suspense의 뒷면을 드러내준다.
use hook, Tanstack Query의 useQuery hook과 유사한 구현체를 만드는 과정이 흥미롭다.
한글 번역으로 편하게 읽을 수 있다.
GraphQL 쿼리를 TypeScript 코드에서 바로 타입 지원을 받으며 작성할 수 있도록 도와주는 라이브러리이다.
🎥 Matt Pocock - Everyone's talking about gql.tada
짧은 소개 영상을 함께 보기를 추천한다.
Jest의 대체제로 사랑받고 있는 Vitest가 Browser Mode와 함께 2.0 버전을 릴리스했다.
Browser Mode는 Playwright를 기반으로 동작하고 iframe 내부에 컴포넌트들을 렌더링하기 때문에, 더이상 브라우저 api를 모킹하지 않아도 되며 실제 브라우저 동작을 테스트할 수 있다. unit tests와 E2E 테스트 사이의 빈 공간을 채워줄 수 있을것으로 기대된다.
Rspack 1.0 alpha가 릴리스되었다. 1.0 stable 버전은 8월에 출시될 예정이며, 이는 webpack의 주요 기능 및 API이 구현됨을 의미하는 중요한 마일스톤이다.
webpack을 개선하기 위한 노력으로 turbopack, esbuild 등 수많은 번들러들이 존재하지만, rspack은 webpack과의 호환성을 통해 webpack의 기존 생태계를 재사용할 수 있다는 점을 강점으로 내세운다.
높은 성능과 작은 번들 사이즈, 강력한 타입을 자랑하는 현대적인 JavaScript 유틸리티 라이브러리로 토스에서 개발했다.
WebVM은 HTML5/WebAssembly에서 완전히 클라이언트 측으로 실행되는 서버 없는 가상 환경이다. Linux ABI와 호환되도록 설계되었고, 많은 기본 개발 도구 체인을 포함하여 수정되지 않은 Debian 배포를 실행한다.