TOAST UI

이번 시간에는 에러와 스택 트레이스를 조작하는 방법에 대해 이야기하려 한다. 때때로 사람들은 이런 세부 사항에 대해 신경쓰지 않지만, 테스트나 에러와 관련된 어떤 라이브러리를 작성하려고 할 때 이 지식들은 굉장히 유용할 것이다.

자바스크립트는 객체 지향 언어이자 함수를 1급 객체로 취급하기 때문에 함수형 프로그래밍도 가능한 멀티 패러다임 언어이다. 자바스크립트를 조금이라도 다뤄봤던 사람이라면 익히 알고 있겠지만 자바스크립트에는 클래스란 개념이 없어 객체 생성이나 상속이 다른 언어와 다르고 특히 OOP는 주로 프로토타입이란 메커니즘을 통해 이루어진다. 검색을 조금만 해보면 프로토타입을 다룬 아티클들은 많이 찾아볼 수 있다. 하지만 여기서는 프로토타입에서도 상속을 구현하는 핵심 메커니즘인 포로토타입 체인에 대해 집중적으로 다룬다.

새해가 되면서 새로 배워야 할 것들이 많이 늘었다. 올해 CSS에 채택된 새로운 기능들이 많지만, 필자는 다음 3가지 기능이 가장 흥미롭다. 1. 기능질의 얼마 전, 필자는 실제로 필자가 원했던 CSS 기능 중 하나인 기능 질의에 대해 썼다. 하지만 지금은 기본적으로 지원된다!

async 함수는 크롬55 버전부터 사용할 수 있다. 이 함수는 프로미스 기반의 코드들을 메인 스레드의 블로킹 없이 동기화 형식으로 사용할 수 있게 한다. 비동기 코드를 "덜 영리하게"하고 읽기 쉽게 만들어준다.

몇 주 전에 나는 일 때문에 공항을 이용했는데 여기서 GitHub의 성능에 이상한 점을 발견했다. 링크를 클릭하는 것 보다 새 창으로 접속하는 것이 더 빨랐던 것이다. 아래는 영상으로 그 현상을 캡쳐한 것이다. 영상에서 나는 링크를 클릭하고 바로 주소를 새 탭에 붙여넣었다. 링크를 더 일찍 클릭했지만 새 탭으로 연 페이지의 내용이 더 빨리 보였다.

2021년 8월 21일 오전 9시 18분. 당신은 막 아침을 먹었다. 당신은 Omni Consumer Products의 웹 유지 보수를 담당하고 있다. 한 시간 뒤 당신의 마지막 변경이 적합성 테스트에서 부적합 판정을 받았음을 발견했고, 이 문제는 "RedactSelect"의 버그로 발견되었다. 이는 당신이 사용하는 오픈소스 "multiselect" 웹 컴포넌트다. 이 컴포넌트는 업데이트 된 지 1년은 넘은 것 처럼 보이고, 성숙하고 안정적이라 생각되었다. 당신은 속으로 '문제없어, fork 해서 고쳐야겠군.'이라고 생각하고 고치기 시작했다.

타임라인은 웹페이지를 로드할때나 혹은 유저 인터렉션 등으로 인해 브라우저에서 발생하는 동작들을 레코딩하고 타임라인 형태로 시각화해주는 도구다. 시간의 흐름에 따라 브라우저의 이벤트(여기서의 이벤트는 DOM상의 이벤트가 아닌 브라우저 내부의 동작, 물론 DOM이벤트를 발생시키는 이벤트도 있다)뿐 아니라 CPU, 메모리, 네트워크 사용량과 FPS까지 확인 가능하다. 이벤트에 스택 트레이스 형태로 자바스크립트의 함수 콜 스택도 확인이 가능해 어떤 자바스크립트 코드가 성능에 영향을 주고 있는지도 쉽게 확인할 수 있다. 두가지의 성능 측정 예를 통해 타임라인의 기능을 살펴본다.

어느 멋진 일요일 Bushwick, Brooklyn의 한 책방에서 John Maeda가 쓴 "Design by Numbers"라는 책을 보았다. 이 책은 DBN 프로그래밍 언어(90년대 말 MIT 미디어 연구소에서 시각적인 방법으로 프로그래밍 개념을 소개하도록 고안된 언어)를 차근 차근 설명했다.

React는 Facebook에서 개발해 Facebook과 Instagram, Airbnb 등에서 사용하고 있는 오픈소스 UI 프레임웍이다. 사용자 액션에 따라 DOM을 일일이 다루었던 과거 개발 방식(jQuery와 같은 라이브러리만을 사용하는)과는 달리 개발자가 DOM을 직접 다루지 않고 React가 데이터 상태에 따라 자동으로 UI를 관리하기 때문에, 개발자는 단순히 특정 상태에 대한 뷰의 변화만 구현하면 된다.

Vue.js는 Evan You가 만들었으며, 2014년 릴리즈를 시작으로 꾸준히 발전하고 있는 자바스크립트 프레임워크이다. 앞서 소개된 Angular나 React보다 덜 알려져 있으나, 최근 Vue.js 포럼에 한국어 카테고리가 추가될 정도로 인지도에 상승 곡선을 그리는 추세이다. Vue.js를 접하는 사람들의 반응은 두 가지이다. 낯설거나 혹은 친절하거나. 전자는 (현재 이 글을 읽고 있는 당신을 포함하여) Vue.js를 처음 접하는 사람일 것이고, 후자는 단 한 번이라도 Vue.js의 가이드를 읽어보거나 사용해보고 싶다는 생각을 한 사람일 것이다.