Fork me on GitHub

2022-05-03: Node.js 12은 EOL이 되어 지원 종료, pnpm v7.0.0, Mocha v10.0.0, Cypress 9.6.0

Translator: Daewon Seo Edit on GitHub See Revisions

JSer.info #590 - pnpm 7.0.0가 릴리스 됐다.

커맨드라인 플래그의 변경이나 디폴트 값의 변경 등 임팩트 있는 변경이 중심이 됐다.

Node.js 12의 지원 종료, root package는 pnpm -r exec 등 대상으로부터 디폴트로 제외 되도록 변경.
--filter가 glob을 지원하며, @types/*를 자동적으로 hoist 하지 않도록 하는 변경이 포함됨.

그 외에도, strict-peer-dependencies이 디폴트로 유효하도록 하는 변경이 포함됨.


Mocha 10.0.0가 릴리스 됐다.

Mocha 역시 지원 종료된 기능을 삭제하도록 하는 파괴적 변경이 중심이 됐다.

Node.js 12의 지원 종료, IE11의 지원 종료, AMD/RequireJS의 지원 종료, Growl 지원 종료, bin/mochabin/mocha.js을 다시 명명하는 등 변경이 포함됨.

pnpm과 Mocha 모두 Node.js 12의 지원을 종료한 이유는, Node.js 12가 2022-04-30 자로 EOL(End of Life)가 되어 공식적인 지원이 종료되었기 때문임.


Cypress 9.6.0가 릴리스 됐다.

Cypress는 브라우저 내에서 테스트를 실행하기 때문에, 로그인 화면이 다른 도메인에 있는 경우 등의 멀티 도메인에 관련된 테스트는 Same Origin Policy에서 제대로 실행되지 않는 경우가 있었음.
이것을 해결하기 위해 cy.origin API가 플래그 지정 버전으로 구현되었음.

상세한 구성이나 제한에 관해서는 기사나 동영상 해설 참조


헤드라인


Release 4.18.0 · expressjs/express

github.com/expressjs/express/releases/tag/4.18.0

node.js express library ReleaseNote

express 4.18.0의 릴리스.
res.downloadroot옵션 추가, cookie에 priority 옵션 추가.
또한, res.status에 Number 이외를 전달하는 케이스를 Deprecated한 변경 등


Chromium Blog: Chrome 102: Window Controls Overlay, a Host of Finished Origin Trials, PWAs as File Handlers and More

blog.chromium.org/2022/04/chrome-102-window-controls-overlay-host.html

Chrome ReleaseNote

Chrome 102 beta 릴리스.
Window Controls Overlay, inert속성, Navigation API, hidden=until-found의 지원.
Origin Private File System extension(OPFS)의 AccessHandle API의 지원
WebHID에 exclusionFilters 옵션 추가, Private IP로의 서브 리소스 요청 시에 Preflight의 발생과 경고가 나오도록WebRTC의 SDP Plan B를 삭제.


Remotion 3.0 | Remotion

www.remotion.dev/blog/3-0

React library ReleaseNote

React에서 동영상을 만드는 Remotion 3.0 릴리스.
인코딩 퍼포먼스를 개선하고, 동영상을 렌더링할 수 있도록하는 renderMedia API, 에러 표시의 개선, React 18의 지원 등


Release 18.1.0 (April 26, 2022) · facebook/react

github.com/facebook/react/releases/tag/v18.1.0

React ReleaseNote

React v18.1.0 릴리스.
버그 수정이 주요 변경점.
use-subscription의 shim 구현이 use-sync-external-store를 래핑하는 방식으로 구현이 변경됨.


Release v7.0.0 · pnpm/pnpm

github.com/pnpm/pnpm/releases/tag/v7.0.0

pnpm ReleaseNote

pnpm v7.0.0 릴리스.
Node.js 12 のサポート終了, root package는 pnpm -r exec 등의 대상으로 부터 디폴트에서 제외되도록 변경.--filter가 glob을 지원, @types/*을 자동적으로 hoist 않도록 하는 등.


Release v3.0.0 · capricorn86/happy-dom

github.com/capricorn86/happy-dom/releases/tag/v3.0.0

DOM library ReleaseNote

Happy DOM 3.0.0 릴리스.
Target을 ES5에서 ES2022로 변경, Window를 VM context로 되도록 변경


Release v8.8.0 · npm/cli

github.com/npm/cli/releases/tag/v8.8.0

npm ReleaseNote

npm v8.8.0 릴리스.
file:에서 지정된 프로젝트 외부의 의존을 symlink가 아닌 복사본으로 설치가 가능한 --install-links 플러그가 추가됨.


Cypress 9.6.0: Easily test multi-domain workflows with cy.origin

cypress.io/blog/2022/04/25/cypress-9-6-0-easily-test-multi-domain-workflows-with-cy-origin/

browser testing library ReleaseNote

Cypress 9.6.0 릴리스.
Cypress는 브라우저 내에서 테스트를 실행하기 위한 멀티도메인에 관한 테스트를 Same Origin Policy에서 잘 동작하지 않는 케이스가 있었음.
이것을 해결하기 위해 cy.origin API가 플래그 지정 버전으로 구현되었음.


Release v10.0.0 · mochajs/mocha

github.com/mochajs/mocha/releases/tag/v10.0.0

JavaScript testing library ReleaseNote

Mocha v10.0.0 릴리스.
Node.js 12 지원 종료, IE11 지원 종료, AMD/RequireJS 지원 종료, Growl 지원 종료, bin/mochabin/mocha.js로 다시 명명 등


아티클


Non-interactive Elements with the inert attribute | WebKit

webkit.org/blog/12578/non-interactive-elements-with-the-inert-attribute/

browser HTML article

inert속성에 관한 해설 기사.
지금까지 focus 는 tabindex, 클릭은 pointer-events, 선택 범위는user-select, aria-hidden 등의 각종 대응을 필요로 했지만, 이들을 한번에 비활성화하는 설정이 가능한 속성


“Tao of Node - Design, Architecture & Best Practices” 일본어 번역

jqk.life/tao-of-node-japanese

node.js article translate

https://alexkondov.com/tao-of-node/ 의 번역


Node.js 18 Introduces Prefix-Only Core Modules

fusebit.io/blog/node-18-prefix-only-modules/

node.js article

node:test처럼 node prefix 을 추가한 코어 모듈을 다루는 이유에 관한 해설 기사.
새로운 이름을 추가하는 등의 대응 비용, Typosquatting 같은 공격을 회피하기 위함.


사이트, 서비스, 문서


The State of Frontend 2022

tsh.io/state-of-frontend/

Survey web JavaScript CSS document

The Software House에서 실시한 프런트엔드에 관련 앙케이트 결과.
프레임워크 라이브러리, TypeScript, SSG, 호스팅, Microfrontend, 테스트, 접근성, 퍼포먼스, SEO 등 각종 항목에 관한 앙케이트 결과가 공개됨.


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


shuding/tilg: A magical React Hook that helps you debug components.

github.com/shuding/tilg

React debug library

React Componnet의 렌더링 등 라이프 사이클을 디버그 할 수 있는 Hooks 라이브러리.
컴포넌트의 Props 등 State의 변화를 로그에 나타내, 리렌더링 되는 이유를 볼 수 있는 라이브러리


tdewolff/minify: Go minifiers for web formats

github.com/tdewolff/minify

HTML JavaScript JSON SVG golang Tools

Go 언어로 구현된 HTML/JSON/JS/SVG/XML의 minify 도구.
Python 및 Node.js 와의 바인딩이 가능


frouriojs/notios

github.com/frouriojs/notios

npm Tools debug

npm run-scripts를 인터랙티브하게 여러번 실행하고, 그 실행 상황이나 로그를 확인할 수 있는 CUI를 제공하는 도구.
npm-run-all의 래퍼이기 때문에 npm-run-all와 같은 커맨드를 제공.


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