JSer.info #522 - @sindresorhus에 의한 Node.js 라이브러리의 ESM(ECMAScript Module) 대응에 관한 discussions이 만들어졌다.
@sindresorhus는 다양한 Node.js 라이브러리를 만들고 있기 때문에 Node.js의 ESM 대응과 관계가 있다.
2021년 4월 30일에 Node.js 10 LTS가 종료되며 Node.js 12 이상만 논의의 대상이 된다.
Node.js 12.x에는 ECMAScript modules(.mjs이나 "type": "module" 등)의 대응이 포함돼 있다.
- nodejs/Release: Node.js Release Working Group
- Modules: ECMAScript modules | Node.js v15.5.1 Documentation
Node.js(12 이후)에서는 ESM을 네이티브로 다룰 수 있기 때문에 기존 패키지를 ESM에 대응하는 계획에 대해서 논의가 시작된 것.
Node.js의 ESM 대응은 아직 개발 중인 부분이고 실제 마이그레이션 사례가 정해져있지 않기 때문에 어떻게 마이그레이션 하는지에 대한 참고가 되는 정보가 정리되고 있다.
@sindresorhus에 의한 라이브러리는 기본적으로 Node.js 용으로 만들어져 있어서 이 대응이 진행되면 Node.js를 ESM으로 네이티브하게 다룰 수 있는 범위가 넓어질 것.
Check your JS with TS에는 TypeScript와 JSDoc를 사용해 JavaScript 타입을 검사하는 방법이 작성돼 있다.
JSDoc 타입 작성법, tsc나 VSCode를 사용해 JSDoc 타입 검사, JavaScript에서 .d.ts 타입 정의 파일을 사용하는 방법 등에 대해서 다룬다.
헤드라인
Release v7.4.0 · npm/cli
github.com/npm/cli/releases/tag/v7.4.0
npm 7.4.0 릴리스.
--foreground-scripts 추가, npm publish --dry-run 수정 등
js-yaml/CHANGELOG.md at master · nodeca/js-yaml
github.com/nodeca/js-yaml/blob/master/CHANGELOG.md#400---2021-01-03
js-yaml 4.0.0 릴리스.
safe{Load,LoadAll,Dump} 등을 load / loadAll / dump로 이름 변경하고 safe 메서드를 기본으로 변경.
unsafe한 동작은 외부 패키지인 js-yaml-js-types로 이동, number의 파서를 YAML 1.2에 근거해 변경, dump의 출력 일부 변경 등.
그 외로는 .mjs 지원, prototype pollution와 관련한 동작 수정 등이 있다.
- js-yaml/migrate_v3_to_v4.md at master · nodeca/js-yaml
- nodeca/js-yaml-js-types: Extra js types for js-yaml
The ESM move · Discussion #15 · sindresorhus/meta
github.com/sindresorhus/meta/discussions/15
sindresorhus 패키지의 "type":"module"에 의한 ESM의 네이티브 대응 계획에 관한 이슈
아티클
phodal/clean-frontend: Clean Frontend Architecture：整洁前端架构(중국어)
github.com/phodal/clean-frontend
프런트엔드에서의 클린 아키텍처를 주제로 한 글.
UI 프레임워크에서의 로직 편중, 클린 아키텍처의 개념 설명 및 구현 가이드.
crossorigin 속성 사양을 파헤치다(일본어)
nhiroki.jp/2021/01/07/crossorigin-attribute
CORS에 관한 request mode와 credentials mode의 행동을 지정하는 crossorigin 속성 설명.
<img>, <script>, <link rel=preconnect>에서의 crossorigin 속성 지정으로 인한 동작.
Fetch API에서의 표현 방법.
Check your JS with TS
whistlr.info/2021/check-js-with-ts/
JSDoc과 TypeScript를 사용해 JavaScript 코드를 타입 검사하는 방법.
tsconfig.json 설정, JSDoc에서의 타입 정의, JavaScript에서 .d.ts 파일을 import하여 타입 정의 정보를 JSDoc으로 사용하는 방법 등.
Slowfil.es – Demonstate and observe slow-loading resources
지연(latencty) 현상을 재현하거나 리소스 전송을 테스트할 수 있는 서비스.
script 요소의 async 속성이나 defer 속성의 동작을 테스트 하는 등 리소스 지연에 관한 성능 테스트에 활용할 수 있다.
- slowfil.es – a service for slow assets with high priority | Stefan Judis Web Development
- Oh The Scripts We'll Load - A Performance Talk by Tim Kadlec - YouTube
An additional non-backtracking RegExp engine · V8
v8.dev/blog/non-backtracking-regexp
V8에 백트랙 하지 않는 정규 표현 엔진을 플래그를 붙여 구현했다.
백트랙에 의한 ReDos와 같은 지수함수적으로 매치되는 문제가 알려져 있어 이를 해결하기 위해 백트랙을 사용하지 않는 알고리즘을 구현.
사이트, 서비스, 문서
byte-js/byte: A easy JavaScript Runtime Engine that aims towards productivity
간단한 커멘트 라인 도구를 만드는 것을 목적으로 한 V8과 Rust를 사용한 JavaScript 런타임 도구
Nx: Extensible Dev Tools for Monorepos
JavaScript의 monorepo 프로젝트를 다루는 개발 도구
목적에 맞는 monorepo 생성, task runner 관리, VSCode 확장을 사용한 UI 제공.
의존 그래프를 사용한 캐시, 증분 빌드, Nx Cloud를 사용한 원격 캐시 등.
Checka11y.css - CSS stylesheet to quickly highlight a11y concerns
CSS로 HTML의 접근성을 체크하는 스타일시트.
비슷한 도구로는 a11y.css가 있다.
cloudfour/lighthouse-parade: A Node.js command line tool that crawls a domain and gathers lighthouse performance data for every page.
github.com/cloudfour/lighthouse-parade
Lighthouse로 크롤링하여 성능 측정한 결과를 CSV로 정리하는 도구
여러 페이지의 측정 결과를 Spreadsheet 등에 모아서 분석하고자 제작
소프트웨어, 도구, 라이브러리
menduz/typed-url-params: TypeSystem based parser for url parameters
github.com/menduz/typed-url-params
path-to-regexp와 같이 라우팅 문자열에 관한 타입 추론을 Template Literarl Type으로 다룰 수 있는 라이브러리.
mistlog/react-peg: A react style parser generator based on PEG.js
PEG.js 구문 정의를 JSX로 작성할 수 있는 라이브러리.
TypeScript의 TSX를 사용하여 구문에 관한 타입 검사와 동시에 구문 정의를 컴포넌트 처럼 하는데 목적이 있다.
