TOAST UI

최신 자바스크립트로 작성된 의존성 모듈과 결과물 중심으로 성능을 개선한다.

브라우저 이전/다음 페이지 버튼으로 이동할 때 페이지가 순간적으로 로드되게 최적화 해보자.

픽셀은 웹에서 의외로 복잡한 주제이다. 이제 ResizeObserverEntry에 있는 새로운 devicePixelContentBox 속성을 통해 그 정보를 알 수 있으며, <canvas>를 사용하여 픽셀 단위까지 완벽한 렌더링을 할 수 있게 되었다.

프라미스로 애니메이션을 조작할 수있고, 교체가능한 애니메이션으로 성능이 개선되었으며, 합성 모드를 사용하여 부드러운 애니메이션을 제공한다.

브라우저는 웹 페이지의 메모리를 자동으로 관리한다. 웹 페이지가 객체(object)를 만들 때마다, 브라우저는 객체를 저장하기 위해 "내부적으로" 메모리 청크(chunk)를 할당한다. 메모리는 한정된 자원이기 때문에, 브라우저는 가비지 컬랙션으로 더는 객체가 필요하지 않은 시점을 감지하고 메모리 청크를 해제한다.

이번 장에서는 NodeJS, Deno와 Electron과 같은 런타임 및 Chrome, Chromium, Brave, Opera, Microsoft Edge와 같은 웹 브라우저에서 사용되는 ECMAScript와 WebAssembly를 위한 V8 엔진의 메모리 관리 방법에 대해 살펴볼 것이다.

간단한 공유 버튼 예제로 Web Share API의 사용법과 네이티브 공유 기능의 장점을 설명한다. API를 지원하지 않는 브라우저에서는 폴백 매커니즘으로 컨텐츠 공유를 지원하는 방법도 소개한다.

좋은 기회로 2019년 구글I/O에 참석했다. 웹 기술 세션 중에는 크게 눈에 띄는 세션은 없었지만, 일부 세션에서 소개된 웹과 관련 기술 몇 가지는 흥미로웠다. Native Lazy Loading, Portals, Duplex, Rich Results 정도가 나의 관심을 끌었다. 그중 키노트에서 시작해 몇 개의 세션에서 두루두루 언급한 네이티브 레이지 로딩이 제일 기대됐다.

필자는 풀타임 개발자의 업무를 작은 회사에서 처음 맡았다. 우리는 BrowserStack을 가지고 있지 않았기 때문에 임시 변통 장치 실험실을 함께 만들었다. 부서진 1세대 iPad와 오래된 버전의 Safari로 그 웹사이트를 봤을때, 필자는 왜곡과 부서진 잔해들이 보였다. 필자는 한때 웹을 "상상할 수있는 가장 적대적인 소프트웨어 엔지니어링 환경"이라고 생각했던 Douglas Crockford의 말을 떠올렸다. 올해 초 Verge 의 광범위하게 공유 된 기사는 웹에서 볼 수있는 "Chrome에서 가장 잘 작동합니다."메시지에 대해 경고했다. 이 문제의 예가 더 있다. 널리 사용되는 메시징 앱 슬랙(Slack)은 Chrome에서만 음성 통화가 작동한다. 도움 요청에 대한 응답으로 Slack은 다음과 같이 설명했다.

몇 해 전, 필자가 대학 졸업반일 때 웹 개발 과정은 두 가지의 기술에 초점을 두었다. 한가지는 기본적인 것들 즉, HTML과 CSS, 그리고 다른 한 가지는 Adobe Flash였다. 필자는 포트폴리오에 추가하기 위해 Action Script3.0로 사용자와 상호작용하는 웹사이트를 작성하는데 많은 시간을 들였다. 대학을 졸업한 뒤 몇 개월이 지나, 필자는 Flash로 고객의 웹사이트를 만들어 주었고 그것이 처음이자 마지막이었다. Flash는 죽어가고 있었다. 그리고 필자의 이력서나 포트폴리오에서도 사용하지 않게 되었다. 그것은 바뀌는 기술의 변화 속도에 대한 첫 번째 교훈이었고, 졸업 후 이제 막 실무로 뛰어드는 사람에게는 매우 두려운 깨달음이었다. 그 후 7년 후인 지금, 필자는 Microsoft Edge팀에서 디자인을 돕고, 필자가 느꼈던 불안감을 줄여줄 도구(Sonarwhal)를 개발한다.