JSer.info #594 - 메인터넌스가 중단된 후 Nx사에 권한이 인계된 이후의 첫 업데이트인 Lerna 5.0.0 릴리스.
Node.js 12 이하 지원 종료, audit 시 문제가 발생하던 패키지 업데이트가 진행됐다.
또, 다음 버전에서는 lerna run 시 내부적으로 Nx를 사용하는 옵션이 추가될 예정이다.
TypeScript 4.7이 릴리스 됐다.
TypeScript 4.7에서는 꽤 많은 변경이 이뤄졌다.
변경 내용은 크게 Node.js ESM 대응과 타입 관련 개선, 구문 추가로 나눌 수 있다.
Node.js의 ECMAScript Module을 지원, .mts/.cts라는 확장자 지원 추가, moduleDetection 옵션 추가가 이뤄졌다.
타입 개선 관련해서는 Compuated 프로퍼티에 대한 조작 흐름 분석 개선, 객체 내의 함수(메서드) 타입 추론 개선, Generics의 타입을 지정하여 일종의 alias를 선언할 수 있는 Instantiation Expressions 지원, infer에 대한 extends 시의 추론 조건 추가 방법을 지원한다.
또, 모든 타입에 붙이는 건 권장하지 않지만 타입이 공변(in, covariant) / 반변(out, contravariant) / 불변(in out, invariant) 인지를 지정할 수 있는 애너테이션 추가, 모듈 해결자 탐색 방법을 사용자 정의할 수 있는 moduleSuffixes 옵션 추가 등도 포함됐다.
헤드라인
Release v5.0.0 · lerna/lerna
github.com/lerna/lerna/releases/tag/v5.0.0
lerna v5.0.0 릴리스.
Nx 사로 메인터넌스가 이관된 이후의 첫 릴리스.
Node.js 12 이하 지원 종료, audit 문제가 발생한 패키지 일괄 갱신.
Announcing TypeScript 4.7 - TypeScript
devblogs.microsoft.com/typescript/announcing-typescript-4-7/
TypeScript 4.7 릴리스.
Node.js의 ECMAScript Module 지원, .mts / .cts 지원.
moduleDetection 옵션 추가, Computed 속성에 대한 조작 흐름 해석(추론) 개선, 객체 내의 함수(메서드) 타입 추론 개선.
Generics의 타입을 지정하여 일종의 alias를 선언할 수 있는 Instantiation Expressions 지원, infer에 대한 extends 시의 추론 조건 추가를 지원.
타입이 공변(in, covariant) / 반변(out, contravariant) / 불변(in out, invariant) 인지를 지정할 수 있는 애너테이션 추가, 모듈 해결자 탐색 방법을 사용자 정의할 수 있는 moduleSuffixes 옵션 추가
import type / import() / Reference Comment로 resolution-mode를 지정할 수 있도록 개선
Release v10.8.0 · TypeStrong/ts-node
github.com/TypeStrong/ts-node/releases/tag/v10.8.0
ts-node v10.8.0 릴리스.
TypeScript 4.7에 추가된 ECMAScript Modules in Node.js 지원.
import 시의 확장자를 맵핑하는 experimentalResolver 옵션 추가.
Node.js의 --experimental-specifier-resolution 플래그에 해당하는 experimentalSpecifierResolution 옵션 추가
Release v8.11.0 · npm/cli
github.com/npm/cli/releases/tag/v8.11.0
npm v8.11.0 릴리스.
npm birthday를 비권장.
npm pkg 명령어가 있으므로 npm set-script도 비권장.
--global과 --local 플래그도 각각 비권장 됐으며 대신 --location=global/local 사용을 권장한다.
Parcel v2.6.0
Parcel 2.6.0 릴리스.
React의 Error overlay에 대응, HMR과 Source Map이 함께 동작하도록 수정.
CSS 모듈에 지역 스코프 변수 개념을 추가, 사용하지 않는 CSS 변수를 트리쉐이크 하도록 개선.
var(--name from "./vars.modulecss")와 같이 파일에서 변수를 import 하는 자체 구문 추가.
그 외로는 import 시 glob 지정자를 사용하여 여러 파일을 가져올 수 있는 기능을 제공한다.
Ember 4.4 Released
blog.emberjs.com/ember-released-4-4/
Ember 4.4 릴리스.
{{unique-id}} 활성화, ember generate로 생성되는 테스트 템플릿의 모듈을 변경할 수 있도록 개선, hasListeners를 공개 API로 변경.
Chromium Blog: Chrome 103 Beta: Early Navigation Hints, a Host of Completed Origin Trials, and More
blog.chromium.org/2022/05/chrome-103-beta-early-navigation-hints.html
Chrome 103 Beta 릴리스.
Origin Trial로 Federated Credentials Management 지원.
103 Early Hints HTTP 지원, AbortSignal.timeout() 지원, Element 인터페이스에 aria* 속성 추가.
deflate-raw 압축 형식 지원, Form 요소에서 rel 속성 지원.
샌드박스 처리된 iframe(Sandbox iframe)에서 커스텀 프로토콜 네비게이션을 차단(blocking) 하고 allow-top-navigation-to-custom-protocols 속성 추가
Release v1.0.0-alpha.1 · axios/axios
github.com/axios/axios/releases/tag/v1.0.0-alpha.1
axios v1.0.0-alpha.1 릴리스.
Release v5.0.0 · mdn/browser-compat-data
github.com/mdn/browser-compat-data/releases/tag/v5.0.0
browser-compat-data 5.0.0 릴리스.
ESM 대응, TypeScript 대응.
matches 삭제, __meta 객체 추가, upstream 필드 추가, impl_url 추가 등.
아티클
Migrating millions of lines of code to TypeScript
stripe.com/blog/migrating-to-typescript
Airtable의 codemod를 기반으로 FlowType에서 TypeScript로 전환한 과정을 담은 글.
마이그레이션 스크립트 및 린트와 테스트를 사전에 준비해 코드-락 한지 하루만에 코드 베이스를 정리 / 이전 했다고 한다.
Avoiding Puppeteer Antipatterns
serpapi.com/blog/puppeteer-antipatterns/
Puppeteer의 안티 패턴을 정리 및 소개하는 글.
The balance has shifted away from SPAs | Read the Tea Leaves
nolanlawson.com/2022/05/21/the-balance-has-shifted-away-from-spas/
페이지 이동 시의 문제가 브라우저 측에서 (충분히) 개선되고 있기 때문에 네비게이션 문제를 해결하기 위한 SPA라면 필요성이 낮지 않을까? 라는 고찰.
Paint holding이나 BF Cache 등 브라우저 구현에 의해 MPA로도 문제 없이 빠르게 네비게이션이 가능하다는 점을 근거로 들고 있다(MPA가 더 좋다는 뜻은 아니다. 더 이상 과거와 같은 이유로 꼭 SPA 여야만 한다는 게 아니라는 것. 이어지는 후속 기사에서 SPA의 장점과 개선에 대한 생각도 정리하고 있다).
또, 최근에는 SPA를 기반으로 하는 프레임워크가 주류 였으나 Astro나 Qwik 등 MPA를 기반으로 하는 프레임워크도 속속 나타나고 있기 때문에 선택이 달라지지 않을까 하는 생각.
- More thoughts on SPAs | Read the Tea Leaves
- State is hard: why SPAs will persist | Read the Tea Leaves
사이트, 서비스, 문서
Component toolkit for creating live-running code editing experiences | Sandpack
CodeSandbox에서 제공하는 브라우저 내에서 라이브 코딩 용 샌드박스 환경(에디터 / 프리뷰)을 만들 수 있는 라이브러리.
React 용 컴포넌트 뿐 아니라 여러 라이브러리 용 템플릿이 준비돼 있으며 작성한 코드를 CodeSandbox에서 여는 기능도 제공한다.
google/wireit: Wireit upgrades your npm scripts to make them smarter and more efficient.
Turborepo 처럼 npm run-scripts의 의존 관계를 정의하고, 실행 결과를 캐시할 수 있는 도구.
차이가 있을 때(차분: 差分)만 실행하는 증분(incremental) 빌드, 파일 변경을 감시하여 실행하는 빌드 시스템을 제공하며 CI 에서의 캐시 영속화 구조를 갖고 있다.
소프트웨어, 도구, 라이브러리
Shopify/remote-ui
UI를 정의하는 코드를 Web Worker 등의 UI 스레드 외 환경에서 수행하고 메시지 통신을 통해 수신 받은 객체부터 렌더링 하는 방식으로 Sandbox에 이용할 수 있는 툴 킷.
DOM을 닮은 API 와 React / Vue 용 API가 준비돼 있으며, 사용자에게 UI 트리를 정의 받고 그것을 렌더링하는 호스트 환경을 별도로 구현할 수 있다.
Shopify나 Stripe Apps에서 사용되고 있다.
