2023-11

📚 링크 & 읽을 거리

The State of Vite

지난 10월 5일 진행된 ViteConf에서 발표한 내용으로, 장기적으로 rollup과 esbuild를 대체하는 것에 대한 계획을 발표했다. 이를 위해 Rollup의 Rust 포트인 "Rolldown"이라는 프로젝트를 개발하고 있다고 한다.

[참고] 다음의 내용들과 같이 참고해 보면 좋다.

• 요약 트윗
• 발표 슬라이드

The State of WebAssembly 2023

2023년 영국의 소프트웨어 컨설팅 회사 Scott Logic에서 WebAssembly 조사를 실시하였다.

• Rust, JavaScript의 사용은 꾸준히 증가 중이지만, 더 눈에 띄는 것은 Swift와 Zig의 채택률이 증가이다.
• WASM을 Web에서도 많이 사용되지만, Serverless와 Plugin 환경으로도 지속적으로 증가하고 있다.

더 자세한 내용이 궁금하다면, 읽어보기를 추천한다.

The Saga of the Closure Compiler, and Why TypeScript Won

한글 번역 포스트로 편하게 읽을 수 있다.

Google은 큰 JavaScript Application을 만들기 위해 과거 타입을 체크하는 Closure Compiler를 만들었다고 한다.
좀 더 설명하자면, Closure Compiler는 JSDoc 스타일의 코멘트를 통해 타입을 추가하는 것이다.

/**
 * @param {number} a
 * @param {number} b
 * @return {number}
 */
function max(a, b) {
  return a > b ? a : b;
}

Clouser Compiler와 TypeScript의 경쟁에서 왜 TypeScript가 승리하게 되었는지 다룬다.

An Interactive Intro to CRDTs

한글 번역 포스트로 편하게 읽을 수 있다.

CRDT는 “Conflict-free Replicated Data Type”(충돌 방지 복제 데이터 타입)의 약자로 대표적인 예로 협업 앱(Google Docs, Figma 등)에서 네트워크 요청 없이도 자체 상태를 업데이트할 수 있게 만들어 주는 개념이다.
이 글에서는 Last Write Wins Register, Last Write Wins Map의 개념을 알아본다.
이 글은 시리즈의 첫 번째 글로 현재는 아래 두 개의 글이 더 발간되었다.

• Building a Collaborative Pixel Art Editor with CRDTs
• Making CRDTs 98% More Efficient

The Internals of Deno

Deno는 잘 알다시피, Node.js를 만들었던 Ryan Dhal로부터 새롭게 시작되었고 더디지만 런타임 영역에서 존재감을 키워가고 있다.
Deno의 내부는 어떻게 구성되어 있고, 어떻게 동작할까? 이 책은 이러한 궁금증을 해소시켜 줄 수 있을 것이다.

[참고] 추가로 다음 영상도 Deno 내부를 이해하는 데 도움 될 수 있다.

• Deno internals - how modern JavaScript runtime is built

CommonJS에서 ESM으로 전환하기

카카오의 서비스 성능을 분석하는 서비스(lighthouse 기반)의 ESM 전환을 다루는 글로, lighthouse의 CJS -> ESM 전환에 따라 서비스도 ESM 으로 전환하게 되었다고 한다.
CommonJS 환경에서 운영하던 서비스를 ESM 환경으로 전환하는 과정을 다루고, 그 과정에서 다양한 팁들을 제공해 준다.

HTTP/3 Performance for JS Developers

HTTP/3는 ’22/6월, 표준화된 이래, 빠르게 채택되고 있으며 HTTP/1을 넘어섰다. FE 관점에서 이러한 프로토콜의 변화의 의미는 무엇일까?

첫 네트워크 왕복(Round Trip)에 대한 JS 로딩 최적화, 브라우저가 다른 리소스 유형 대비, JS 우선순위를 정하는 방법 등을 소개한다. 또한 프로토콜과 fetch()의 통합을 살펴보고, 곧 출시될 WebTransport에 대해서도 이야기한다.

[참고] HTTP/3의 채택률은 빠르게 상승하고 있으며, 아래 링크를 통해 21~23년간 HTTP 버전에 따른 사용량 지표를 확인할 수 있다.

• H/3 Adoption Grows Rapidly

300ms Faster: Reducing Wikipedia's Total Blocking Time

Wikipedia 모바일 사이트의 페이지 로딩 속도를 어떻게 개선했는지 소개하는 글이다.
처음 페이지를 로드할 때 600ms 이상 걸리는 JS 작업이 있었는데, 두 단계에 거쳐 개선하였고, 그 결과 로딩 시간(TBT, Total Blocking Time)을 300ms 정도 줄일 수 있었다고 한다.

The Negative Impact of Mobile-First Web Design on Desktop

많은 최신 웹사이트들은 모바일 접근에 친화적, 우선적으로 설계되어오고 있지만, 이러한 페이지가 데스크톱 환경에서 렌더링 될 때 콘텐츠가 지나치게 크고 길게 표시될 수 있다. 화면을 가리는 이미지, 크고 부풀려진 텍스트, 과도한 공간으로 인해 페이지가 길어지고 모든 콘텐츠를 소비하기 위해 더 많은 스크롤이 필요하기도 하다. 이러한 디자인 트렌드를 콘텐츠 분산(content dispersion)이라 부른다.

세계적인 사용자 인터페이스 컨설팅 회사인 닐슨 노만에서 작성한 이 글은 오늘날의 모바일 퍼스트 웹디자인의 사용성이 오히려 사용자에게 부정적인 영향을 전달해 내용을 이해하기 어렵게 만드는 '콘텐츠 분산'에 대한 내용을 다룬다.

Next.js 14

Next.js 14버전이 공개되었다. 주요 변경사항은 다음과 같다.

• Server Actions (Stable)
  • 13 버전에서 실험적으로 공개된 Server Actions가 14버전에서 Stable로 변경되었다.
• turbopack (unstable)
  • 53% 빠른 개발(로컬) 서버 시작, 94% 빨라진 코드 반영
  • next dev --turbo 명령으로 사용 가능
  • 터보팩은 아직 90%의 next dev integeration test만 통과한 상태이며, 추후 100% 통과 시 stable로 변경될 예정이다.
• Partial Prerendering (Preview)
  • 기본 응답 데이터와 스트리밍 동적 컨텐츠 전달 기능을 React 의 Suspend 기반 위에서 구현.
• Metadata Improvements
  • server component에서 viewport object와 generateViewport function을 export해서 사용할 수 있다.
  • 다른 기존의 metadata 옵션은 유지된다.

The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark()

라이트 모드 또는 다크 모드 사용 여부에 따라 색상 변경을 적용하기 위해 일반적으로 prefers-color-scheme 미디어 쿼리를 사용한다.

:root {
  --text-color: #333; /* Value for Light Mode */
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #ccc; /* Value for Dark Mode */
  }
}

이 작업을 더 쉽게 하기 위해 CSS Color Module Level 5에 새로운 light-dark()라는 유틸리티 함수가 추가되었다. 이 함수는 두 가지 색상 값을 인수로 받고, 사용 중인 색 구성표에 따라 첫 번째 또는 두 번째 색상 값을 활용하게 된다.

:root {
  /* light-dark() 함수 사용을 위해 color-scheme 선언이 필요하다. */
  color-scheme: light dark;
}

:root {
  /* In Light Mode = return 1st value. In Dark Mode = return 2nd value. */
  --text-color: light-dark(#333, #ccc); 
}

아직은 Firefox 120+에서만 지원된다.

🕹 튜토리얼

Making Sense of React Server Components

한글 번역 포스트로 편하게 읽을 수 있다.

지난 2020년 12월 React Server Components가 소개된 이후로 여전히 사람들은 동작 방식에 대해서 혼란스러워한다.
이 글은 그런 사람들을 위해 인포그래픽을 통해 좀 더 쉽게 설명을 시도한다.

Back/forward cache

지난 9월 Yahoo! JAPAN에서 bf Cache 적용으로 비즈니스적인 성과를 가져왔다고 소개했었다.
이 글은 실제로 bfCache를 적합성을 확인하는 팁과 실제로 테스트하는 방법 등을 알려준다.

📦 코드와 도구

React Agent

ReactAgent는 GPT-4 언어 모델을 사용해 사용자 스토리에서 React 컴포넌트를 생성하고 구성하는 실험적인 에이전트로 자신을 소개하고 있다.

React, TailwindCSS, Typescript, Radix UI, Shandcn UI 및 OpenAI API를 활용해 코드를 생성한다.

Lit React 1.0

import React from 'react';
import {createComponent} from '@lit/react';
import {MyElement} from './my-element.js';

export const MyElementComponent = createComponent({
  tagName: 'my-element',
  elementClass: MyElement,
  react: React,
  events: {
    onactivate: 'activate',
    onchange: 'change',
  },
});

구글의 Web Components Framework Lit이 v3.0을 릴리스했다.

여러 변경사항 중 가장 두드러지는 변화는 @lit/react이다. @lit/react는 Web Components를 리액트 컴포넌트로 래핑하며 생기는 여러 가지 문제를 해결해 준다.

patch-package

오픈소스 라이브러리를 수정해서 사용할 수 있게 해준다.
라이브러리 자체에 버그가 있어서 신속한 수정이 필요하거나 라이브러리에서 지원하지 않는 기능을 추가하고 싶을 때 사용한다.

BlockNote

Notion처럼 블록 기반으로 동작하는 확장 가능한 Text Editor이다.
데모 페이지에서 테스트해 볼 수 있다.