2024-08

📚 링크 & 읽을 거리

State Of React 2023

2023년 React 생태계의 변화, 그리고 앞으로의 방향성을 알 수 있는 State of React 2023이 발표되었다.

눈여겨볼 만한 조사 결과들은 다음과 같다.

컴포넌트 라이브러리
- React Aria, Radix 등의 headless 접근 방식이 높은 선호도를 기록하였으며, style을 직접 제공하는 MUI, Bootstrap, Ant Design 등의 라이브러리는 사용자는 많으나 부정 경험이 높은 것으로 조사되었다.
- shadcn/ui와 같은 복사 붙여넣기로 자유롭게 커스터마이징 할 수 있는 방식도 눈여겨볼법하다.
상태 관리
- useState를 넘어서 긍정적 경험을 선사한 라이브러리는 Zustand였다. Redux는 여전히 많은 사용자를 보유하고 있지만, 사랑받지는 못하고 있다.
데이터 로딩
- Tanstack Query가 여전히 인기를 이어가고 있으며, 유사한 SWR에 비해서 긍정적 사용 경험이 훨씬 높게 조사되었다.
- GraphQL쪽에서는 Apollo Client가 Relay보다 높은 긍적적 사용 경험의 비율을 보였다.
메타 프레임워크
- Next.js에 대해서 불평하는 사람들이 많지만, 여전히 높은 시장 지배력을 유지하고 있다. Astro와 Remix가 그 뒤를 따르고 있다.
사용
- Server Component, SSR, SSG 등에 대한 많은 관심에도 불구하고, 대다수의 React 사용자가 Single Page Application에서 작업하고 있다는 점이 흥미롭다. 한편, Pain Points로 React Server Component가 뽑히기도 하였다.

모닥불 | EP.2 함수형 프로그래밍, 프런트엔드 개발에 진짜 도움 될까?

프런트엔드 개발자는 일반적으로 객체 지향 프로그래밍보다 함수형 프로그래밍에 더 익숙한 경향이 있어 보인다.

React로 개발하면 class 키워드를 잘 쓸 일이 없는 것도 사실이다. 하지만, class를 사용하지 않는다고 OOP를 하지 않는 것은 아니다. React의 컴포넌트나 Hook을 객체지향에서 얘기하는 객체로 바라볼 수도 있고, 모듈 분리 또한 OOP에 해당한다고 생각할 수 있다.

토스 프런트엔드 리드들의 FP와 OOP에 대한 생각을 들어보자.

모닥불은 토스에서 제작하는 프런트엔드 개발 유튜브 컨텐츠이다.

시리즈로 EP.1 토스에서 말하는 “가독성 좋은 코드” 란 무엇일까?, EP.3 프론트엔드 개발에서 테스트 자동화, 꼭 해야 할까? 에피소드도 공개되어있다.

infer, never만 보면 두려워지는 당신을 위한 타입 추론 - 기초 타입 이론

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2024(5월)에서 발표되었던 세션이 Naver TV 및 Naver D2를 통해서 외부에 공개되었다.

타입이 추론되는 원리가 궁금한 개발자, infer 등으로 고급 제네릭을 사용해 보고 싶은 개발자에게 이 글을 추천한다.

해당 글은 기초 타입 이론, 고급 타입 추론, 응용 문제 편으로 나뉘어 작성되었다.

수학적인 내용이 많아서, 이해가 어렵다면 수학적 내용이 덜어진 타입스크립트 타입 레벨 프로그래밍을 읽어보길 추천한다.

Announcing TypeScript 5.5

TypeScript 5.5 버전이 릴리스되었다.

눈여겨볼 만한 변화들은 다음과 같다.

Inferred Type Predicates
- bird is Bird처럼 명시적으로 개발자가 작성하던 type predicate가 자동으로 추론되기 시작하였다.
Regular Expression Syntax Checking
- 정규 표현식이 타입 검사 범위에 추가되었다.
Isolated Declarations
- 새로운 --isolatedDeclarations 옵션을 통해서 명시적인 타입을 강제할 수 있다.
Editor, TSServer
- 여러 개선사항을 통해서 개발자가 IDE에서 Restart TS Server를 자주 수행하지 않도록 개발자 경험을 향상시켰다.

How we used esbuild to reduce our browser extension build times by 90%

1Password가 내부 해커톤을 통해서 어떻게 빌드 속도를 개선했는지 소개한다.

OpenTelemetry와 Jaeger를 활용하여 전체 빌드 프로세스를 프로파일링하고, 이를 기반으로 빌드 프로세스를 개선한 방법을 설명한다.

개선에 사용된 기술들도 흥미롭지만, 해커톤을 통해서 개선을 시도하는 과정 자체도 매우 인상적이다.

긴 빌드 시간으로 고통받는 개발자들에게 도움이 되길 바란다.

주니어 FE 개발자의 색상 추출 라이브러리 개발기

카카오 FE 플랫폼 조직의 주니어 개발자가 대표 색상 추출 라이브러리를 개발한 과정을 소개한다.

광고 이미지의 대표 색상을 어떻게 정의할 것인지 문제를 정의하고, 문제를 해결하기 위해서 K-means Clustering Algorithm을 선택하여 적용하고 테스팅, 라이브러리화 하는 과정이 흥미롭다.

Ecma International approves ECMAScript 2024: What’s new?

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년 첫 알파 버전을 목표로 한다고 한다.

AI on Chrome

Chrome 127 버전부터 window.ai를 통해서 Gemini Nano AI 모델을 브라우저에서 사용 가능하게 제공한다고 한다. Browser에서 on-device AI의 시작이 될지, 표준화되지 못하고 끝나는 chrome의 도전이 될지 귀추가 주목된다.