2022-09

링크 & 읽을거리

A JavaScript V8 engine walkthrough

V8 JavaScript 엔진의 동작을 상황(기본, 오류, 스택오버플로, 비동기)에 따라 어떻게 단계별로 동작하는지를 시각화된 자료를 통해 확인해 볼 수 있다.

Oven

새로운 런타임인 Bun이 공개된 후, 온라인에서 많은 관심과 주목을 이끌어 내고 있다. 투자사인 Kleiner Perkins가 주도하고, Vercel의 창업자인 Guillermo Rauch 그리고 Y Combinator 등이 참여한 펀딩을 통해 7백만 달러의 투자를 유치했다.

이로 인해 Bun을 개발하고 발전시켜나갈 새로운 Oven이라는 회사가 설립되었고, 채용을 진행하고 있다.

What Are K, T, and V in TypeScript Generics?

Mastering TypeScript시리즈의 첫 글로
TypeScript의 개념을 애니메이션 이미지를 이용하여 쉽게 설명한 글이다.
TypeScript의 다양한 타입들의 실행 흐름도 함께 보여주어 빠르게 이해하기 좋다.
위의 주제 외에도 아래와 같은 글들이 있고, 계속 업데이트 되고 있다.

The James Webb Space Telescope runs JavaScript, apparently

1989년 시작된 제임스 웹 우주 망원경 프로젝트는 오랜 시간의 개발 끝에 드디어 지난 21년 12월 발사되어 놀라운 우주 사진을 보내오고 있다는 사실을 한 번쯤은 들어봤을 것이다.

그리고 이러한 작업들은 대부분 JavaScript로 작성된 코드를 통해 제어가 되고 있다는 사실이다.

WHY YOUR WEBSITE SHOULD BE UNDER 14KB IN SIZE

웹사이트의 크기가 14KB일 경우, 15KB인 경우보다 621ms가 더 빠를 수밖에 없는지를 설명하는 글이다. 이유는 바로 TCP의 slow start 알고리즘 때문인데, 왜 그러한 알고리즘을 사용하는지와 그에 따라 무엇을 신경 써야 하는지를 다룬다.

이는 HTTP/2에서도 동일하게 적용되며, UDP 기반의 HTTP/3에서도 동일하게 적용된다.

How we use Typescript with React

Imerso라는 회사에서 87,000줄의 React 기반의 프로그램을 TypeScript로 전환하면서 정한 가이드의 일부를 글로 작성하였다.
가이드는 일관성을 높이고, 코드의 의도를 쉽게 전달하기 위해 작성되었다.

It’s 2022, Don’t Just Use React Anymore

다소 자극적으로 보일 수 있는 이 글의 타이틀은 친구가 Vue.js에 익숙하지 않아 인터뷰에 실패한 것을 동기로 이 글이 작성되었기 때문이다.
이 글은 Vue를 이용해서 React의 일부 기능을 예를 들어 설명한다.
React에는 익숙하지만 Vue.js를 모른다면 짧은 시간에 파악하기 좋다.

JSON Creator Douglas Crockford Interview

Douglas Clockford가 evrone이라는 업체와 인터뷰 전문이다.
Douglas Clockford는 JS의 어떤 변경이 가장 중요한지 묻는 질문에, 최선의 방법은 JavaScript를 사용 중지하는 것이라고 답했다.
JavaScript는 다른 언어와 마찬가지로 공룡 언어가 되어 발전을 막는 언어가 되었고, 다음 언어에 집중해야 한다는 말도 덧붙였다.

Top layer support in Chrome DevTools

레이어를 문서 내의 최상위에 위치하도록 만들기 위해 z-index:1000를 사용하는 것이 일반적이었다. 그러나 <dialog> 요소를 "modal" 형태로 열게 되면 브라우저 뷰포트 내의 document 상위에 위치하는 "top layer"와 같이 동작하기 때문에, 더 이상 수동적인 z-index 값의 조정을 하지 않아도 된다. 또한 pseudo-element인 ::backdrop을 통해 배경을 스타일링 할 수 있다.

<!-- <dialog> 요소를 modal로 여는 간단한 예제 -->
<main>
  <button onclick="window.dialog.showModal();">Open Dialog</button>
</main>
<dialog id="dialog"></dialog>

Chrome 105 버전부터는 개발자 도구에서 top layer에 대한 기능이 추가되어 다음과 같이 확인할 수 있다.

DevTools Tips: How to speed up your workflow with Console shortcuts

크롬 devtools에서 유용하게 사용할 수 있는 console shortcut에 대한 내용이다.
DOM을 쉽게 셀렉팅하고 object를 table로 보기쉽게 만드는 등 devtools를 좀 더 스마트하게 쓸 수 있는 다양한 방법들을 영상을 통해 확인할 수 있다.
아마 평소 관심을 갖지 않았다면 접해보지 못한 유틸리티가 많을 것이다.