JSer.info #566 - Node.js의 개발 버전인 17.1.0이 릴리스됐다.
현재 ECMAScript Proposal의 Stage 3인 Import Assertions을 사용한 JSON 파일 import를 지원한다.
import fooData from './foo.json' assert { type: 'json' };
Lighthouse 9.0.0이 릴리스됐다.
Node 12 지원 종료, 의미가 없어진 audit이 삭제 됐다.
또, 페이지 전환을 포함하는 Audit을 얻을 수 있는 Audit User Flows를 프리뷰 기능으로 지원한다.
Reconstructing TypeScript, part 0: intro and background에서는 TypeScript를 사용해 타입 기반 언어의 타입을 체크하는 도구를 만드는 과정을 연재하고 있다.
Union types, Intersection types, narrowing 등 TypeScript와 같은 타입 구조에 대한 타입 체커를 구현하는 내용이다.
구현 방식으로는 Babel을 사용해 TypeScript 코드를 파싱하고, 그렇게 얻은 AST와 타입 정보를 하나하나 체크해 나가는 방식으로 진행한다.
실제로 동작하는 타입 체커를 구현해 가는 내용으로 구성돼 있으니 타입 구현에 흥미가 있는 분이라면 읽어보길 바란다.
헤드라인
Node v17.1.0 (Current) | Node.js
nodejs.org/uk/blog/release/v17.1.0/
Node.js 17.1.0 릴리스.
ES Modules의 Import Assertion을 이용한 JSON import가 가능하다.
import fooData from './foo.json' assert { type: 'json' };
Release eslint-config-airbnb-v19.0.0 · airbnb/javascript
github.com/airbnb/javascript/releases/tag/eslint-config-airbnb-v19.0.0
eslint-config-airbnb 19.0.0 릴리스.
ESLint 8을 지원한다.
Release Notes for Safari Technology Preview 135 | WebKit
webkit.org/blog/12040/release-notes-for-safari-technology-preview-135/
Safari Technology Preview 135 릴리스.
CSS의 accent-color 지원, flex-basis: content 지원.
loading 속성을 사용한 이미지 지연 로드 지원.
120Hz 디스플레이에서는 120Hz로 스크롤 애니메이션으로 동작하도록 개선.
wrangler 2.0 — a new developer experience for Cloudflare Workers
blog.cloudflare.com/wrangler-v2-beta/
Cloudflare Workers의 CLI 도구인 wrangler 2.0 릴리스.
wrangler dev <filename>로 설정 없이 디플로이, 개발가능 하도록, --public <path>로 정적 에셋을 지정할 수 있도록 지원.
--local로 Miniflare 기반으로 오프라인에서 동작하는 로컬 모드를 지원.
Release 0.6.0 – Info sections, bailouts, state change locations, open in editor and more · lahmatiy/react-render-tracker
github.com/lahmatiy/react-render-tracker/releases/v0.6.0
React에서 의도하지 않은 렌더링을 찾는데 사용하는 디버깅 도구 react-render-tracker 0.6.0 릴리스.
Electron 16.0.0 | Electron
www.electronjs.org/blog/electron-16-0
Electron 16.0.0 릴리스.
Chromium 96, Node.js 16.9.1, V8 9.6로 업데이트.
WebHID API 지원, native modules를 빌드하기 위해 node-gyp를 사용하고 있는 프로젝트에서는 --force-process-config를 설정하도록 변경됐다.
Announcing Serverless Framework v3 Beta
www.serverless.com/blog/serverless-framework-v3-beta
Serverless Framework v3 Beta 릴리스.
serverless 커맨드의 실행 상황을 보여주는 출력 방식 개선, --verbose 지원, 앞서 비권장 된 API가 삭제됐다.
Release v9.0.0 · GoogleChrome/lighthouse
github.com/GoogleChrome/lighthouse/releases/tag/v9.0.0
Lighthouse v9.0.0 릴리스.
Node 12 지원 종료, 몇 개의 audit을 삭제.
페이지 전환을 포함하는 Audit을 얻을 수 있는 Audit User Flows 지원 등.
아티클
Reconstructing TypeScript, part 0: intro and background
jaked.org/blog/2021-09-07-Reconstructing-TypeScript-part-0
TypeScript의 타입 체커를 구현해보면서 TypeScript의 타입에 대해서 학습할 수 있는 연재 글.
파서로는 Babel을 사용하며 파싱한 AST를 이용해 타입 정보를 체크하는 타입 체커를 만들어 볼 수 있다.
Mastering TypeScript Template Literal Types | by Jose Granja | Nov, 2021 | Better Programming
betterprogramming.pub/mastering-typescript-template-literal-types-f4131a94ffb1
Typescript 4.1에서 추가된 Template Literal Type을 주제로한 설명 글.
기본적인 사용 방법, 제한, Utility Type, infer와 조합한 타입을 추론하는 작성 방법, Mapped Types과 조합하는 방법 등을 다룬다.
SharedArrayBuffer와 과도기적 cross-origin isolation 이야기(일본어)
blog.agektmr.com/2021/11/cross-origin-isolation.html
SharedArrayBuffer나 높은 해상도의 Timer를 이용하기 위해서는 cross origin isolation한 상태가 요구된다.
cross origin isolation한 상태로 만들기 위해 HTTP 헤더를 구성하는 방법과 해설.
Copy CSS as JavaScript - Chrome DevTools - Dev Tips
umaar.com/dev-tips/249-copy-css-as-js/
Chrome의 개발자 도구에서 CSS 속성을 CamelCase로 구성된 속성으로 이뤄진 JavaScripts 객체로 복사할 수 있다.
쉽게 말해서 CSS 패널을 통해 CSS in JS의 Obejct Styles로 복사가 가능하다.
Less Absolute Positioning With Modern CSS - Ahmad Shadeed
ishadeed.com/article/less-absolute-positioning-modern-css/
CSS의 position: absolute를 사용하지 않고서도 동일한 표현을 할 수 있는 방법 소개.
Grid를 사용한 요소의 중첩, order를 사용한 표시 순서 변경, aspect-ratio를 사용한 이미지 형태 비율 지정 등.
또, position: absolute를 사용한 방법이 더 좋은 사례 등도 함께 다루고 있다.
사이트, 서비스, 문서
Bundle Scanner - Identify NPM libraries included in Javascript files
지정한 URL에서 어떤 JavaScript 파일을 사용하고 있고 그 JavaScript 파일에서 사용하고 있는 npm 모듈을 추출할 수 있는 도구.
소프트웨어, 도구, 라이브러리
niksy/node-stdlib-browser: Node standard library for browser.
github.com/niksy/node-stdlib-browser
Node.js Core Modules를 브라우저에서 사용할 수 있도록 Polyfill을 구현한 라이브러리.
koskimas/kysely: A type-safe typescript SQL query builder
TypeScript로 작성한 SQL 쿼리 빌더.
PostgreSQL와 MySQL에 대응한 쿼리를 작성하고 실행할 수 있다.
Schema를 타입으로 정의하고 그 타입을 기반으로 쿼리를 구축할 수 있다.
gajus/liqe: Lightweight and performant Lucene-like parser and search engine.
검색 연산자 파서 라이브러리. 작은 크기를 갖는 루씬 느낌의 파서.
