구글의 개발자 연례 행사인 Google I/O 2022가 지난 5월 11~12일 진행되었으며, Web at IO 2022는 이들 중 23개의 웹 세션들에 대한 재생 목록이다. 웹 플랫폼, 개발자 도구, 반응형 페이지의 현주소, 성능, PWA 등 다채로운 새로운 소식들로 가득 차 있다. 웹의 최신 동향을 알고 싶다면 살펴보기를 추천한다.
[참고] 재생 목록에는 포함되어 있지 않지만, 이어서 State of CSS도 함께 살펴보면 좋다.
지난 FE News '22/3월 소식을 통해서 수년간 Jest에 기여하는 메타 소속 개발자들이 없었다는 소식을 공유한 바 있었는데, 그 소식에 이어 지난 5월 11일, Meta는 Jest 프로젝트를 OpenJS 재단으로 이관을 진행한다는 소식을 발표했다.
Jest의 개발은 기존과 같이 현재의 코어 팀에 의해 리딩 되며, 이관에 따라 크게 달라지는 것은 없을 것이라고 밝혔다. 향후 몇 달간 Jest의 자산(도메인, 저장소, 웹사이트 등)이 이관되며, 이관에 따른 새로운 정책 등을 수립할 계획임을 밝히고 있다.
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/ 에서 확인할 수 있다.
지난 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} />;
}
데코레이터(@)를 적용한 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까지 올라왔다. 본 글은 해당 프러포절과 다소 구현의 차이가 있을 수 있으니 참고하길 바란다.
Lerna 프로젝트의 리드 엔지니어인 Daniel Stockman은 프로젝트 공지를 통해 5월 5일부로 번아웃으로 인해 모든 책임에서 물러날 것이라고 밝혔다. 그리고 프로젝트의 오너십을 또 다른 유명한 모노레포 도구인 Nx의 개발사이기도 한 Nrwl로 이전한다고 밝혔다.
Front-end 문제로 이루어진 챌린지이다. HTML + CSS + Vanilla JS를 이용해 풀어야 한다. Front-end 개발자라면 한번 도전해 보아도 좋을 듯하다.
Web Audio API를 통해 데이터를 인코딩하고 디코딩 해, 결과적으로 시그널을 통한 데이터 전송이 가능한 모뎀의 구현 방법을 소개한다.
저자는 인터넷을 사용할 수 없는 업무 환경에서 데이터를 손쉽게 전송할 수 있는 방법을 고안하기 위해 만들게 되었으며, 데이터 인코딩은 Web Audio API의 OscillatorNode를 통해, 그리고 디코딩 AnalyserNode를 활용해 구현되었다.
모던 JavaScript(ES6 이후)를 배우고 싶다면 이 사이트를 추천한다. 체계적으로 분류되어 있으며, 한글화도 잘 되어 있어 따라 하면서 이해하기 쉽다.
OpenJS 재단에서 직접 운영하고 있는 nodejs 튜토리얼 사이트이다. nodejs의 다양한 기능들에 대해 쉽게 따라갈 수 있도록 잘 구성되어 있다.
이 글에서는 재즈 피아노 튜토리얼 사이트에서 JavaScript와 MIDI로 피아노 애니메이션을 개발한 방법을 소개한다.
피아노 키보드를 그리는 데에는 SVG를 사용하고, MIDI를 JSON 형식으로 바꾸는 부분은 브라우저에서 인터랙티브한 음악을 만들 수 있는 웹 오디오 프레임워크인 Tone.js를 사용했으며, 오디오를 다루는 부분은 Howler.js를 사용했다고 한다.
해당 CodeSandbox에서 데모와 코드를 볼 수 있다.
NPM 스크립트를 더 스마트하고 효율적으로 사용할 수 있도록 해주는 툴이다.
눈에 띄는 특징으로는 Cross-package dependencies, Parallelism, Incremental build 등이 있다.
package.json의 스크립트를 조금만 수정하면 기존 npm run 커맨드도 그대로 사용할 수 있다.
TypeScript 에러를 사람이 읽기 쉬운 문장으로 바꾸어 주는 VSCode extension이다.
Meta에서 새로 만든 텍스트 에디터이다. 이전에 React를 기반으로 만들었던 에디터 Draft.js와 달리, 바닐라 JS로 만들었다.
개발자를 위한 UI, 디자인 리소스들을 큐레이션 해 둔 Github 저장소이다. 폰트, 아이콘, 스톡 사진, 웹 템플릿, CSS 프레임워크, 크롬 익스텐션 등 많은 리소스를 찾아볼 수 있다.
개발자라면 누구나 알고 있는 스택오버플로우의 디자인 시스템이다.