Fork me on GitHub

2021-03-09: Gatsby 3, Electron 12, 브라우저의 라이프 사이클 변화

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #530 - Gatsby v3 릴리스.

로컬에서 실제 접근한 페이지만 빌드하는 등 전체를 재구축하지 않고 빌드하는 방식을 기본으로 적용. 따라서 필요한 페이지만 빌드하기 때문에 개발 시의 빌드 대기 시간이 줄었다.

비호환 변경으로는 Node.js 12 미만 지원 종료, React 17 / webpack 5 / ESLint 7으로 갱신, 전역 graphql 대신 import 하여 사용하도록 변경, API 변경이 있다.

마이그레이션 방법은 다음 문서를 통해 친절히 설명하고 있다.


Electron 12.0.0리 릴리스 됐다.

Chromium 89, V8 8.9, Node.js 14.16(12.x에서)으로 갱신.
exposeInMainWorld가 객체 이외의 형식을 지원, webFrameMain API 추가.

Electron 12.0.0에서는 contextIsolationworldSafeExecuteJavaScript가 기본적으로 true로 변경됐다.
Context Isolationpreload 스크립트와 webContents 스크립트의 실행 문맥을 분리하는 것으로 XSS 등의 피해 범위를 축소하는 구조다.

또, 단계적으로 폐지되고 있는 remote 모듈이 비권장 됐고 @electron/remote 라는 외부 모듈로 이전 중이다.


브라우저 라이프 사이클이 변화하고 있어 관련하여 몇 가지 소식을 정리해 소개.

현재 6주 마다 릴리스하고 있는 크롬이지만 2021년 Q3 즉, 크롬 94부터 릴리스 사이클을 4주로 단축한다고 발표했다.

Microsoft Edge Legacy의 폐지 일정이 공개됐다.
Microsoft Edge Legacy는 2021년 3월 9일로 지원 종료된다. 또, 2021년 4월 13일에 릴리스되는 보안 업데이트를 통해 삭제되고 동시에 새로운 크로미움 기반의 MS Edge가 설치된다(대체됨).

Internet Explorer(IE) 폐지는 Edge와는 다른 라이프 사이클을 갖기 때문에 아직 남았지만,
IE에서 접속했을 경우 사이트의 호환 여부에 따라서 MSEdge로 리다이렉트하는 등의 이전이 이뤄지고 있다.

NeedEdge 호환 목록에 작성된 사이트를 IE로 접속하면 MS Edge를 사용할 것을 가이드하는 리다이렉트 팝업이 제공된다.
호환 목록에 추가돼 있는 사이트는 점차 늘어나고 있다.
이와 별개로 IE 지원 종료를 선언한 사이트는 다음 문서에 정리돼 있으니 참고한다.


헤드라인


Gatsby v3 Incremental Builds in OSS, new Gatsby Image, and more | Gatsby

www.gatsbyjs.com/blog/gatsby-v3/

React GraphQL ReleaseNote

Gatsby 3.0 릴리스.
비호환 변경으로는 Node.js 12 미만 지원 종료, webpack 5 / ESLint 7으로 갱신, 전역 graphql 대신 import 하여 사용하도록 변경, API 변경 등이 있다.
로컬 환경에서 전체를 재구축하지 않고 실제 접속한 페이지만 빌드하는 방식이 적용됐다.


jQuery 3.6.0 Released! | Official jQuery Blog

blog.jquery.com/2021/03/02/jquery-3-6-0-released/

jQuery JSON ReleaseNote

jQuery 3.6.0 릴리스.
JSONP 요청 시 에러 응답으로 JSON을 반환했을 경우의 동작 변경.
.focus()의 버그 수정.


Deno 1.8 Release Notes

deno.land/posts/v1.8

deno ReleaseNote

Deno 1.8.0 릴리스.
WebGPU API를 실험적으로 지원.
ICU를 대응하는 ECMA i18n API인 Intl 객체 등 지원, DENO_AUTH_TOKENS로 모듈을 가져올 때 인증 토큰 지원, Exit sanitier를 Deno.test에 추가, deno fmt가 JSON을 지원, TypeScript 4.2으로 갱신.
Import Map, Deno.permissions, Deno.link, Deno.symlink API가 각각 Stable API로 변경됐다.


New Microsoft Edge to replace Microsoft Edge Legacy with April’s Windows 10 Update Tuesday release - Microsoft Tech Community

techcommunity.microsoft.com/t5/microsoft-365-blog/new-microsoft-edge-to-replace-microsoft-edge-legacy-with-april-s/ba-p/2114224

MSEdge news

Microsoft Edge Legacy는 2021년 3월 9일 지원 종료.
이어 2021년 4월 13에 Legacy를 삭제함과 동시에 새로운 크로미움 기반 MS Edge를 설치하는 보안 업데이트가 실행될 예정


Chromium Blog: Speeding up Chrome's release cycle

blog.chromium.org/2021/03/speeding-up-release-cycle.html

Chrome news

Chrome의 릴리스 주기를 6 주에서 4주로 단축.


Announcing the New TypeScript Handbook | TypeScript

devblogs.microsoft.com/typescript/announcing-the-new-typescript-handbook/

TypeScript document

TypeScript Handbook 개편.


Electron 12.0.0 | Electron Blog

www.electronjs.org/blog/electron-12-0

Electron ReleaseNote

Electron 12.0.0 릴리스.
Chromium 89, V8 8.9, Node.js 14.16으로 갱신.

exposeInMainWorld가 객체 이외의 형식을 지원, webFrameMain API 추가.

Electron 12.0.0에서는 contextIsolationworldSafeExecuteJavaScript가 기본적으로 true로 변경, remote 모듈이 비권장 됐고 @electron/remote 라는 외부 모듈로 이전 중이다.


Release v6.0.0 · pixijs/pixi.js

github.com/pixijs/pixi.js/releases/tag/v6.0.0

JavaScript game library ReleaseNote canvas WebGL

pixi.js 6.0.0 릴리스.
TypeScript의 타입 개선, Deprecated 됐던 API 삭제, alpha 옵션의 기본값을 true로 변경, FAIL_IF_MAJOR_PERFORMANCE_CAVEAT의 기본 값을 false로 변경


Google Developers Blog: Announcing Flutter 2

developers.googleblog.com/2021/03/announcing-flutter-2.html

Flutter ReleaseNote

Flutter 2 릴리스.
Web 및 데스크탑 안정적(Stable) 지원, Dart 2.12 지원.
iOS에서 Autocomplete와 ScaffoldMessenger 지원 등.


아티클


Mini apps - web.dev

web.dev/mini-apps/

article

Mini apps의 에코시스템에 대한 글


Hiding Content Responsibly | Kitty Giraudel

kittygiraudel.com/2021/02/17/hiding-content-responsibly/

HTML CSS accessibility article

컨텐츠를 숨김 처리하는 CSS와 WAI-ARIA 속성이 각각 접근성 측면에서 어떻게 동작하는지 정리.
데이터, 비주얼, 레이아웃, 시멘틱스, 컨텐츠, 키보드, 포인터, 스타일 등의 상태 등을 소개.


소프트웨어, 도구, 라이브러리


serverless-stack/serverless-stack: Serverless Stack (SST) is a framework that makes it easy to build serverless apps.

github.com/serverless-stack/serverless-stack

serverless aws

AWS CDK를 사용한 serverless 관리 및 개발 도구.
Lambda 개발, 디플로이, 빌드나 Lint 설정. 각종 AWS 스택과의 연동을 포함한다.


NightlyCommit/twing: First-class Twig engine for Node.js

github.com/NightlyCommit/twing

template JavaScript library

템플릿 엔진인 Twig의 자바스크립트 구현 라이브러리.


JakePartusch/serverlessui: A command-line utility for deploying serverless applications to AWS. Complete with custom domains, deploy previews, TypeScript support, and more.

github.com/JakePartusch/serverlessui

aws serverless Tools

AWS에서 serverless 애플리케이션을 디플로이 하기 위한 도구.
CDK를 사용해 정적 사이트와 lambda 등의 디플로이을 일괄 처리.


nanojsx/nano: 🎯 SSR first, lightweight 1kB JSX library.

github.com/nanojsx/nano

jsx React library

JSX를 사용한 SSR first한 UI 라이브러리.
지정한 컴포넌트만을 Hydrate, Lazy Hydrate 할 수 있으며 Router나 Head 관련 컴포넌트를 내장으로 제공한다.
React 스러운 라이프 사이클 메서드와 Hooks 구조도 제공.


Pull Request to this article
JSer.info Slackに参加する