JSer.info #524 - webpack 5.17.0 릴리스
experiments.lazyCompilation 옵션이 실험적으로 추가됐다.
experiments.lazyCompilation은 webpack dev server 등의 로컬 서버와 함께 동작하는 옵션으로 Dynamic Import하고 있는 모듈(chunk)을 시작 시에 빌드하지 않고 불러오는 시점에 빌드하는 지연 컴파일 구조다.
첫 빌드시 Dynamic Import 하고 있는 모듈은 lazyCompilation을 위해서 Proxy 모듈로 빌드 된다. 이 모듈은 lazyCompilation의 client가 되며, 불러올 때 Server Sent Event를 사용해 lazyCompilation의 backend 측에 불러옴을 통지한다.
lazyCompilation의 backend는 client로 부터 통지를 받으면 실제 모듈을 빌드하여 반환하는 방식으로 동작한다.
이 client와 backend도 각각 experiments.lazyCompilation 옵션으로 독자적인 방식을 정의할 수 있다. 기본값으로는 webpack dev server에서 동작하는 코드로 작성돼 있다.
첫 동작 시 컴파일 범위를 축소하여 개발 서버의 시작 속도를 개선하는 데 주 목적이 있다.
Deno 1.7 릴리스
Deno 1.6에서 지원한 deno compile의 크기 개선, 크로스 컴파일 대응.
Data URL의 import 지원, deno fmt에서 Markdown 지원.
또, Steram API를 WHATWG에 맞춰 수정, Web Worker에 permissions 옵션으로 Deno의 독다적인 퍼미션을 지정할 수 있게 됐다.
그 외로는 --location 플래그를 사용해 상대 URL의 Fetch 대응, Fetch 요청 body에 Stream을 지정 가능하게 됐다.
비호환 변경 사항으로 unstable한 Deno APIs가 일부 변경됐고 Deno.resolveDns를 Unstable API로서 지원한다.
Open Web Docs라는 MDN 등의 웹 플랫폼 문서를 개선해 나가기 위한 프로젝트가 시작됐다.
2020년 8월 Mozilla 레이오프 영향으로 MDN의 Writer 관련 팀이 축소 됐다.
- Changing World, Changing Mozilla - The Mozilla Blog
- An Update on MDN Web Docs - Mozilla Hacks - the Web developer blog
Open Web Docs는 MDN 등의 웹 플랫폼에 관한 문서를 컨트리뷰션 하고 관리하는 조직이다. Open Web Docs의 멤버로는 Mozilla, Google, Microsoft, W3C 등이 있다.
당면한 목표로는 MDN의 새로운 아키텍처로의 이전 및 지원, 브라우저 호환성 데이터, 자바스크립트 문서 개선 등이 있다.
헤드라인
IPFS Support in Brave
Brave가 P2P 프로토콜인 IPFS(InterPlanetary File System)를 지원한다.
1.19.x 이후로 Brave는 게이트웨와 로컬 노드를 사용한 IPFS URI을 지원한다.
Release v5.17.0 · webpack/webpack
github.com/webpack/webpack/releases/tag/v5.17.0
webpack 5.17.0 릴리스.
실험적인 기능으로 Dynamic Import 하고 있는 모듈을 불러오는 시점에 빌드하는 experiments.lazyCompilation 옵션 추가.
동작 시 모든 것을 빌드하지 않는 방법으로 첫 동작 성능을 개선한다.
- liximomo/lazy-compile-webpack-plugin: Boost webpack startup time by lazily compiling dynamic imports
The Node.js Runtime | Cloud Functions Documentation | Google Cloud
cloud.google.com/functions/docs/concepts/nodejs-runtime#nodejs_14_public_preview
Cloud Function이 Node.js 14를 public preview로 지원한다.
Deno 1.7 Release Notes
Deno 1.7 릴리스.
deno compile 크기 개선, 크로스 컴파일 대응, Data URL의 import 지원, deno fmt에서 Markdown 지원.
Steram API를 WHATWG에 맞춰서 수정, Web Worker에 permissions으로 Deno 독자 퍼미션을 지정 가능하도록 개선.
--location 플래그를 사용해 상대 URL의 Fetch 대응, Fetch 요청 body에 Stream을 지정 가능하게 됐다.
비호환 변경 사항으로 Deno APIs가 일부 변경됐고 Deno.resolveDns를 Unstable API로서 지원한다.
Open Web Docs - Open Collective
opencollective.com/open-web-docs/updates/introducing-open-web-docs
MDN와 같은 웹 플랫폼 문서를 장기적으로 관리해 나가기 위한 프로젝트. Mozilla 등의 브라우저 벤더와 W3C 등이 멤버로 구축.
당분간은 MDN에 중점적으로 컨트리뷰션 해나갈 것으로 보인다.
- Supporting Open Web Docs to deliver web developer documentation - Microsoft Edge Blog
- Introducing Open Web Docs
- Welcoming Open Web Docs to the MDN family - Mozilla Hacks - the Web developer blog
- Open Web Docs | Igalia
- Welcome to Open Web Docs! | W3C Blog
- project/membership-expectations.md at main · openwebdocs/project
아티클
How to Solve the Infinite Loop of React.useEffect()
dmitripavlutin.com/react-useeffect-infinite-loop/
React의 useEffect 내에서 State를 갱신할 경우 왜 무한 루프가 발생하는지 또, 그 문제를 해결하는 방법을 소개한다.
Migrating Puppeteer to TypeScript | Web | Google Developers
developers.google.com/web/updates/2021/01/puppeteer-typescript
JavaScript에서 TypeScript로의 기반 코드 이전을 어떻게 계획하고 있는지 정리돼 있다.
The Secret Parameter, LFR, and Potential RCE in NodeJS Apps
blog.shoebpatel.com/2021/01/23/The-Secret-Parameter-LFR-and-Potential-RCE-in-NodeJS-Apps/
Express에서 hbs(handlebars)를 사용하고 있을 때 res.render의 두 번째 인수에 사용자 인수를 그대로 전달할 경우 layout 속성에 의해 임의의 파일을 읽어들이는 문제에 대해.
또, Handlerbars 4.0.14 미만 버전에 있는 취약성과 합쳐지면 RCE(Remote Code Execution)로 발전할 수 있는 문제도 다루고 있다.
슬라이드, 영상
브라우저 만드는 방법 - Speaker Deck(일본어)
speakerdeck.com/keiya01/burauzafalsezuo-rifang
Let's build a browser engine!을 참고해 브라우저 렌더링 엔진을 만들면서 HTML이나 CSS가 어떤 경로로 어떻게 렌더링되는지 소개한다.
- keiya01/kamaitachi: `kamaitachi` is a simple browser.
- Let's build a browser engine! Part 1: Getting started
사이트, 서비스, 문서
JSitor - JavaScript, HTML, CSS, online editor
jsfiddle과 같이 HTML/CSS/JS를 작성하고 실행해 볼 수 있는 Playground 서비스.
에디터는 Monaco Editor를 사용해 만들어 졌으며 자동 완성 기능을 제공한다.
소프트웨어, 도구, 라이브러리
forgojs/forgo: An ultra-light UI runtime
JSX로 작성할 수 있는 UI 라이브러리.
React와는 다르게 컴포넌트 내에서도 DOM API를 다루는 형태로 돼 있고, 재렌더링도 수동으로 실시.
파일 크기가 작고, 프레임워크의 추상적인 부분도 적으며 DOM API만 알고 있으면 쉽게 쓸수 수 있도록 하는 데 목적이 있다.
Nodepack
Node.js 웹 프레임워크.
프로젝트를 관리하기 위한 CLI와 이를 확장할 수 있는 플러그인 시스템을 제공한다.
