2022-06

링크 & 읽을거리

Web at IO 2022

구글의 개발자 연례 행사인 Google I/O 2022가 지난 5월 11~12일 진행되었으며, Web at IO 2022는 이들 중 23개의 웹 세션들에 대한 재생 목록이다. 웹 플랫폼, 개발자 도구, 반응형 페이지의 현주소, 성능, PWA 등 다채로운 새로운 소식들로 가득 차 있다. 웹의 최신 동향을 알고 싶다면 살펴보기를 추천한다.

[참고] 재생 목록에는 포함되어 있지 않지만, 이어서 State of CSS도 함께 살펴보면 좋다.

Meta Open Source is transferring Jest to the OpenJS Foundation

지난 FE News '22/3월 소식을 통해서 수년간 Jest에 기여하는 메타 소속 개발자들이 없었다는 소식을 공유한 바 있었는데, 그 소식에 이어 지난 5월 11일, Meta는 Jest 프로젝트를 OpenJS 재단으로 이관을 진행한다는 소식을 발표했다.

Jest의 개발은 기존과 같이 현재의 코어 팀에 의해 리딩 되며, 이관에 따라 크게 달라지는 것은 없을 것이라고 밝혔다. 향후 몇 달간 Jest의 자산(도메인, 저장소, 웹사이트 등)이 이관되며, 이관에 따른 새로운 정책 등을 수립할 계획임을 밝히고 있다.

New from Anaconda: Python in the Browser

Anaconda가 PyCon US 2022에서 PyScript 프로젝트를 발표하였다.

PyScript는 Python 애플리케이션을 웹에서 실행할 수 있도록 해주는 프레임워크이다. JS에서 Python, Python에서 JS로 양방향 커뮤니케이션이 가능하다고 한다. 즉, Python이 DOM을 참조하는 것 등이 가능하다.

다음은 간단히 Pi 값을 계산해 화면에 출력하는 예시이다:

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
      <py-script>
print("Let's compute π:")
def compute_pi(n):
    pi = 2
    for i in range(1,n):
        pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
    return pi

pi = compute_pi(100000)
s = f"π is approximately {pi:.3f}"
print(s)
      </py-script>
  </body>
</html>

더 많은 예시는 https://pyscript.net/examples/ 에서 확인할 수 있다.

React may be getting a new hook — useEvent

지난 5월 4일, useEvent로 명명된 새로운 훅에 대한 제안이 RFC로 제출되었으며, 항상 안정적(always-stable)인 함수 아이덴티티를 갖는 이벤트 핸들러를 정의할 수 있게 한다.

// 이벤트 핸들러에서 state/props를 읽으면 최적화가 중단된다.
function Chat() {
  const [text, setText] = useState('');

  // 1) 재렌더링시, 이벤트 핸들러의 아이덴티티는 매번 달라진다.
  const onClick = () => {
    sendMessage(text);
  };

  // 2) `text`의 값이 변경되면, 이벤트 핸들러의 아이덴티티도 달라진다.
  const onClick = useCallback(() => {
    sendMessage(text);
  }, [text]);

  return <SendButton onClick={onClick} />;
}

// useEvent Hook
function Chat() {
  const [text, setText] = useState('');

  // 항상 동일한 함수가 제공된다. (`text`가 변경되어도 그러하다)
  const onClick = useEvent(() => {
    sendMessage(text);
  });

  return <SendButton onClick={onClick} />;
}

How to use Decorators in JavaScript

데코레이터(@)를 적용한 JavaScript 코드는 어렵지 않게 찾아볼 수 있다. 하지만, 보통은 데코레이터 관련 라이브러리들(e.g. core-decorators.js) 혹은 프레임워크에 내장된 데코레이터를 사용하기에 직접 데코레이터를 만들어 본 경험은 생각보다 흔치 않을 것이다.

본 글에서는 데코레이터에 대한 설명부터 어떻게 직접 만들 수 있는지 설명한다.

다음은 필드의 재할당을 막아주는 locked 데코레이터 예시이다:

function locked(target, key, descriptor) {
  return {
    ...descriptor,
    writable: false,
  };
}

class Data {
  @locked
  password = 'mypwd';
}

참고로, 현재 JavaScript에서 데코레이터 사용이 가능한 것은 babel과 같은 transpiler의 힘을 빌렸기 때문에 가능한 것이다. 즉, 현재로서는 표준이 아니다.

최근 데코레이터를 표준으로 지정하고자 하는 프러포절이 stage 3까지 올라왔다. 본 글은 해당 프러포절과 다소 구현의 차이가 있을 수 있으니 참고하길 바란다.

Announcement: Passing the torch

Lerna 프로젝트의 리드 엔지니어인 Daniel Stockman은 프로젝트 공지를 통해 5월 5일부로 번아웃으로 인해 모든 책임에서 물러날 것이라고 밝혔다. 그리고 프로젝트의 오너십을 또 다른 유명한 모노레포 도구인 Nx의 개발사이기도 한 Nrwl로 이전한다고 밝혔다.