2021-08

링크 & 읽을거리

An Introduction to WebAssembly for JavaScript Developers

이 문서는 JavaScript WebAssembly 인터페이스에 대한 소개 글로 JavaScript 코드가 wasm과 어떻게 상호작용하는지와 함께 래퍼(Emscripten 도구 등을 통해 생성된)를 통한 구현 방식에 대해도 설명한다.

wasm에 관심이 생겼다면, 이어서 15k 라인의 C++ 코드로 작성된 렌더링 엔진을 wasm 변환기 글도 재미있게 읽을 수 있을 것이다.
Porting a C++ Rendering Engine to WebAssembly

ESM doesn't need to break the ecosystem

오랜 시간 동안 npm 패키지를 다루는 환경에서 개발해 왔다면 모듈 사용과 관련해선 CommonJS(require()) 문법이 ESM 보다 더 친숙할 것이다. 그러나 CommonJS는 표준 영역에 속하지 않으며, ESM 등장 이후로 전체 생태계는 점진적으로 ESM으로 전환이 이뤄질 것이다.

이 글은 CommonJS 패키지를 순수 ESM 패키지로 전환하는 방법과 생태계 호환성을 위한 Dual CJS/ESM 모듈 패키지를 어떻게 만들 수 있는지 설명한다.

순수(Pure) ESM 패키지가 무엇인지, 그리고 현실적 이슈들에 대해 궁금하다면 다음 링크를 추가로 참고하라.
Pure ESM package

How to use finite state machines in React?

Finite state machines(유한 상태 기계)는 시스템의 상태(행위)를 기술하는데 사용되는 수학적 모델이다. 주어진 객체가 가질 수 있는 모든 상태와 상태 간의 전환을 다루며, 기본 규칙은 상태 시스템은 한 번에 하나의 상태에만 있을 수 있다는 것이다. (현실 세계에서의 예는 신호등을 떠올려 볼 수 있다.)

이 글은 React 프로젝트의 일반적 상태 관리에서 finite state machine을 사용으로 전환하는 예제를 통해 보다 안정성 높은 코드를 작성하는 방법을 소개한다.

OpenJS World 2021

지난 6월, 리눅스 재단 산하의 OpenJS 재단이 해마다 주최하는 콘퍼런스로 총 6개 트랙의 다양한 양질의 JavaScript 생태계 관련 세션들을 확인해 볼 수 있다.

Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ...

패키지 관리자인 Yarn의 차기 메이저 릴리스인 3.0에 대한 작업이 시작되었고, 어떤 기능들이 포함될지를 소개하는 글이다.

Yarn 1 → 2로의 마이그레이션 과정에서의 불편함을 제거해, 모든 버전에서 3으로의 마이그레이션을 쉽게 만들고, Node 10+ 이상의 버전을 지원할 계획이라고 밝히고 있다.

[참고] yarn berry 적용기

A Visual Guide to React Rendering - It Always Re-renders

React 애플리케이션 구조와 상탯값 변경에 따라 컴포넌트별 재 렌더링이 발생하는 과정을 시각적 예제를 통해 보여주고, React.memo를 통해 불필요한 재 렌더링을 방지할 수 있는지 설명한다.

상탯값에 이어, props를 다룬 글도 이어서 보면 좋다.
A Visual Guide to React Rendering - Props

Deep JavaScript: Theory and techniques

언어(JavaScript)를 보다 잘 다룰 수 있는 실용적인 기법들과 ECMAScript 스펙에 기반한 언어적 측면에서의 동작과 그 이유에 대해 설명하는 책이다. (HTML 버전은 무료로 제공된다.)

프레임워크나 도구 환경 등이 아닌 JavaScript를 보다 깊게 이해하고 잘 다루고 싶은 이에게 큰 도움이 될 것이다.

Vite: Rethinking Frontend Tooling

Vite는 Vue.js 개발자인 Evan You가 새롭게 개발한 빌드 도구로, 개발 시에는 번들링을 수행하지 않고 ESM을 통해 필요한 모듈만 로딩하고 이후 프로덕션 빌드는 Rollup을 사용한다.

Evan You는 온라인 세션을 통해 프로젝트의 자세한 배경(기술적 세부사항 및 설계 과정)을 소개하며, Vite를 통해 무엇을 해결하는지 왜 빠른지 그리고 JS 도구 영역에 왜 더 적합한지 설명한다.

RenderingNG

Chrome 개발팀은 지난 8년여의 작업을 통해 Chromium의 Blink 렌더링 엔진을 새롭게 재설계한 아키텍처인 RenderingNG(Next Generation)를 공개했다.

RenderingNG은 보다 안정적인 렌더링 성능을 구현하는 것에 있으며, 예측 가능하고 신뢰할 수 있는 성능, 하드웨어 기능 사용의 극대화, 표시되는 내용에 필요한 작업만을 수행, 렌더링 비용을 관리할 수 있는 개발자 APIs 제공, 비주얼 콘텐츠 최적화 등의 작업이 포함된다.

RenderingNG는 다양한 주요 프로젝트들(CompositeAfterPaint, LayoutNG, 등)로 구성되어 있으며, 이들에 대해서는 이어지는 시리즈 글을 통해 자세한 내용을 공개할 예정이라고 한다.

보다 자세한 아키텍처는 이어지는 다음 시리즈 글을 참고하라.
Overview of the RenderingNG architecture

RenderingNG에 대한 간략한 요약은 다음을 참고하라.
Chromium이 발표한 RenderingNG가 무엇인가?

The future of CSS: Nesting Selectors

CSS 전처리기인 LESS/SASS 등을 사용해 본 경험이 있다면, 중첩 규칙을 통해 상위 선택자와 매칭할 수 있는 & 규칙에 대해 잘 알고 있을 것이다.

이를 별도의 도구를 통해 변환 없이 네이티브에서 사용할 수 있게 하는 "Nesting Selector"(CSS Nesting Module) 스펙에 대한 제안으로, 기본적 문법과 사용 예시 등을 소개한다.

table.colortable {
  & td {
    text-align: center;
    &.c { text-transform: uppercase }
    &:first-child, &:first-child + td { border: 1px solid black }
  }
  & th {
    text-align: center;
    background: black;
    color: white;
  }
}

CSSWG은 2021/7/7, 관련 제안에 대해 Public Working Draft 발행에 동의해 표준화를 향한 여정이 시작되었다.

CSS 표준화 프로세스에 대해서는 다음을 참고하라.
An Inside View of the CSS Working Group at W3C

Next Gen CSS: @container

Containment Level 3 spec의 일원인 @container 속성은 부모 컨테이너의 크기를 기준해 요소를 스타일링 할 수 있게 한다.

사용을 위해선 최신 Chrome(v91+)에서 다음 플래그를 활성화해야 한다.
chrome://flags/#enable-container-queries

Building A Dynamic Header With Intersection Observer

뷰 영역에서 특정 요소가 스크롤 됨에 따라 동적으로 반응하는 UI를 구현하려고 할 때 Intersection Observer API를 활용할 수 있다. 이 글에서 제공하는 데모를 확인해 본다면 Intersection Observer를 더 쉽게 이해할 수 있을 것이다.

• #Intersection Observer 시각화 도구
• #동적 헤더 구현

JS books

무료로 다운로드하거나 읽을 수 있는 다양한 JavaScript 서적들에 대한 목록을 제공한다.

튜토리얼

Journey of a web page 🛣️ - How browsers work

사용자가 브라우저에서 웹 주소를 입력하고, 그 결과로 출력되는 웹 페이지 사이에는 어떤 일들이 발생할까?

브라우저가 동작하는 방식에 대해선 많이 다뤄져 왔지만, 네트워크 레벨에서의 과정과 이후 브라우저에서의 처리 과정들을 순차적 흐름에 따라 내용을 이해할 수 있도록 설명하고 있어 보다 넓은 시각에서 웹을 이해할 수 있도록 도와주는 글이다.

How to write unit tests in JavaScript with Jest

단위 테스트는 매우 중요하지만, 또한 많은 경우 간과되는 영역이기도 하다. 좋은 품질을 갖는 코드에 대한 이점은 확실히 부정적인 면보다 크지만, 별도의 시간을 들여 단위 테스트를 작성하는 것은 항상 부담스러운 영역이기도 하다.

아직 단위 테스트 코드 작성에 익숙치 않다면, 이 튜토리얼을 통해 단위 테스트 작성을 시작해 보자.

코드와 도구

Windows 11 in React

웹 표준 기술(React)을 사용해, 웹에서 Windows 11 데스크톱 버전을 경험해 볼 수 있도록 복제한 프로젝트다.

https://win11.blueedge.me/

Vanilla로 구현한 Windows 7 프로젝트도 참고해 보라.
https://desk.glitchy.website/

Abracadabra

VS Code에서 제공하는 기본적 리팩토링에 더해 리팩토링을 빠르고 안전하게 수행할 수 있는 추가적 기능을 제공하는 플러그인이다.

리팩토링 자동화를 위해 제공되는 전체 기능 목록은 다음을 참고하라.
List of available refactorings

slinky

Slinky는 Scala로 React 애플리케이션을 작성할 수 있는 프레임워크다.

solid

Solid는 사용자 인터페이스를 만들 수 있는 선언적이며, 유연한 라이브러리다.

VDOM을 사용하지 않고 템플릿을 통해 실제 DOM으로 컴파일하며, 상태에 종속된 코드만이 업데이트 되도록 래핑 된다.

// solid로 작성된 간단한 카운터 증가 예제 코드
import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = () => setCount(count() + 1);

  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}

render(() => <Counter />, document.getElementById("app"));

직접 solid 애플리케이션을 작성하고 테스트 해볼 수 있다.
Solid Playground

solid의 보다 자세한 내용은 다음 글을 참고하라.
SolidJS Official Release: The long road to 1.0