2020-10

링크 & 읽을거리

Introducing the New JSX Transform

JSX는 일반 JavaScript 코드로 transpile 되지 않으면, 브라우저는 이해하지 못한다. 따라서 아래 예제 코드와 같이 작성된 코드는 React.createElement를 사용하도록 변환된다.

import React from 'react';

// 작성된 코드
function App() {
  return <h1>Hello World</h1>;
}

// 변환된 코드
function App() {
  return React.createElement('h1', null, 'Hello world');
}

그러나, React.createElement의 사용은 다음의 2가지 문제가 존재한다.

• React 스코프 내에 있어야 하는 문제 (즉, React import를 필요)
• 적용된 일부 성능 향상과 단순화를 지원하지 못하는 문제

새로운 Transform은 Babel 개발팀과의 협업을 통해 다음의 이점들을 제공한다.

• React import 없이 JSX를 사용
• 번들 크기의 개선(사용자의 설정 환경에 따라 다를 수 있다.)
• 학습이 필요한 React의 개념적 부분을 감소시켜 주는 개선을 활성화한다.

새로운 Transform은 React 17(향후 0.14.x, 15.x, 16.x 들도 지원 예정)을 통해 사용할 수 있으며, 컴파일러(Babel, TS) 전용 entry point를 제공해 React.createElement 대신 특별한 함수를 자동으로 import 하고 사용하도록 변환된다.

// 작성된 코드 (React import 없이 작성)
function App() {
  return <h1>Hello World</h1>;
}

// 변환된 코드 (아래 모듈은 컴파일러를 통해 자동 import)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

We now generally consider Moment to be a legacy project in maintenance mode

Moment 라이브러리가 더 이상의 기능 추가 없이 유지 보수만 한다.

대안 라이브러리

• Luxon: Moment의 진화로 생각할 수 있다. 오랜 기간 Moment 컨트리뷰터인 Isaac Cambron이 개발하고 있다.
• Day.js: 유사한 API를 사용하여 Moment를 최소한으로 대체하도록 설계되었다.
• date-fns: Date 객체를 조작하기 위한 다양한 함수를 제공한다.
• js-Joda: JSR-310 기반의 Java SE8 java.time 패키지를 포팅 하였다.

Effective limited parallel execution in JavaScript

병렬 실행에 효과적으로 제한을 두는 방법이다.

간단한 예제를 통해서 적절하게 병렬 실행을 제한할 수 있는 방법을 알려 준다. promise-pool

The Ugly Side of React Hooks

요즘 많은 React 관련 글들이 class component보다는 hooks를 권장하는데, 제목에서 알 수 있듯, 이 글은 그와 반대이다. React 공식 문서에서 말하는 hooks의 motivation을 하나하나 집으며 비판한다.

Vue.js 3.0 "One Piece"

오랜 개발 기간 끝에 드디어 Vue 3.0(코드명 "One Piece")의 공식 릴리스가 공개되었다. Progressive framework 콘셉트를 지향하는 Vue.js의 새로운 출발을 주목해 보자.

Deno 1.4

TypeScript 런타임인 Deno의 새로운 버전인 1.4가 릴리스가 공개되었다. 이번 릴리스에는 웹소켓 지원과 개발 환경에서 사용할 수 있는 watch 모드 지원이 추가되었다. 점점 실무에서 활발한 사용이 증가할 것으로 기대된다.

튜토리얼

React Component Patterns

다양한 React Component 패턴(Compound, Flexible Compound 그리고 Provider Pattern)들을 소개하고, 각 패턴들의 사용이 어떤 경우에 적합한지 그리고 각각의 trade-offs 들을 소개한다.

React-use hooks

React에서 사용하는 사용자 정의(custom) hook 이다. 유용한 hook이 많이 있으니 개발할 때 만들기 보다 필요한 hook을 찾고 이용해 보면 좋다.

Logical assignment operators in JavaScript

논리 할당 연산자가 (EcmaScript 2021)에 추가될 예정이다. stage-4

간략하게 알아보면,

OR 연산

x ||= y;

x || (x = y)

두 표현식은 동일하다.

AND 연산

x &&= y;

x && (x = y);

두 표현식은 동일하다.

A Gentle Introduction to Code Splitting with React

React를 사용한 프로젝트에서 코드 분할 방법을 설명한다.

분할하는 방법

1. Route level

   import React, { Suspense } from 'react';
   import { Location, Router } from '@reach/router';
   
   import Loading from './components/Loading';
   
   const Home = React.lazy(() => import('./components/Home'));
   const AppointmentForm = React.lazy(() => import('./components/AppointmentForm'));
   const PreviousAppointments = React.lazy(() => import('./components/PreviousAppointments'));
   
   class App extends React.Component {
     render() {
       return (
         <Location>
           {({ location }) => (
             <Suspense fallback={<Loading />}>
               <Router location={location}>
                 <Home path="/" />
                 <AppointmentForm path="/newAppointment" />
                 <PreviousAppointments path="/previousAppointments" />
               </Router>
             </Suspense>
           )}
         </Location>
       );
     }
   }
   

2. Component level

   class PreviousAppointments extends Component {
     constructor(props) {
       super(props);
   
       this.state = { map: null };
   
       this.handleClick = this.handleClick.bind(this);
     }
   
     handleClick() {
       import('./components/Map').then(module =>
         this.setState(() => ({
           map: module.default,
         })),
       );
     }
   
     render() {
       const { map: Map } = this.state;
   
       return (
         <>
           <div>Previous Appointments</div>
           ...
           {Map ? <Map /> : <button onClick={this.handleClick}>Show Map</button>}
         </>
       );
     }
   }
   

두 분할 방법을 잘 이용해서 성능을 높이고 사용자 경험을 최적화 시키자.

Decorators

2020년 9월에 제시된 데코레이터들이다.

몇 가지만 살펴보면,

@logged

메서드의 시작과 끝에 로그를 출력한다.

import { logged } from "./logged.mjs";

class C {
  @logged
  m(arg) {
    this.#x = arg;
  }

  @logged
  set #x(value) { }
}

new C().m(1);
// starting m with arguments 1
// starting set #x with arguments 1
// ending set #x
// ending m

@tracked

필드 값을 추적(tracking)해 값의 변경이 발생되면, render 메서드를 트리거 한다.

import { tracked } from "./tracked.mjs";

class Element {
  @tracked counter = 0;

  increment() { this.counter++; }

  render() { console.log(counter); }
}

const e = new Element();
e.increment();  // logs 1
e.increment();  // logs 2

도구

Comlink

예제 코드 이미지 (클릭하면 확대해서 볼 수 있다.)

크롬 개발팀에서 공개한 아주 작은 크기(1.1kb)의 라이브러리로, WebWorkers 사용에 대한 초기 접근 장벽을 제거해 준다. 좀 더 추상적 수준에서 보자면, postMessage와 ES6 Proxies에 대한 RPC 구현이라 할 수 있다.

Webpack을 번들러로 사용하고 있다면 comlink-loader를 같이 사용해, 코드의 일부 수정(또는 없이)을 통해 사용되는 모듈들을 WebWorkers 스레드에서 실행될 수 있도록 만들 수도 있다.

GitHub CLI

GitHub의 공식 CLI 도구로 Beta 기간을 끝내고, 얼마 전 1.0 버전을 선보였다. 터미널 상에서 GitHub PR을 만들거나 관리도 할 수 있다.