Fork me on GitHub

2020-12-01: Workbox v6.0.0, TS auto mock, TypeScriptToLua

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #516 - Service Worker 라이브러리 Workbox 6.0.0 릴리스

workbox-webpack-plugin에 webpack 과의 호환성 향상을 위해 webpack 5가 대응됐고 버그가 수정됐으며 이번 릴리스에 함께 포함된다.
큰 변경으로 workbox-strategies의 전략 정의 방식(Strategy / Plugin 구조)이 변경됐다.
커스텀 Stragegy를 만들 경우 Strategy 기반 클래스를 상속받아 작성하게 된다. 그리고 이에 맞춰 라이플 사이클 메서드도 추가됐다.

또, Workbox의 레시피를 라이브러리로 이용할 수 있는 workbox-recipes 패키지가 추가됐다.

그 외로 Workbox의 skipWaiting이 비권장됐고 대신 Service Worker의 self.skipWaiting()을 사용을 권장한다.


Typescript-TDD/ts-auto-mock

TypeScript의 타입 정의를 토대로 목(mock) 데이터를 생성하는 도구.

TypeScript의 타입은 Runtime에 존재하지 않으므로 TypeScript 컴파일러를 감싼 ttypescriptts-patch 등을 함께 사용 한다.

또, 같은 구조를 Jasmine이나 Jest 환경에서 쓸 수 있도록 jasmine-ts-auto-mockjest-ts-auto-mock 라이브러리도 제공한다.


TypeScriptToLua

TypeScript 코드를 Lua로 변환하는 툴킷.

TypeScript로 작성한 코드를 Lua로 변환하며 Lua 개발 시 TypeScript나 JavaScript의 에코 시스템을 이용할 수 있도록 하는데 목적이 있다.
TypeScript 타입 정의 파일을 사용하여 이전의 Lua 코드와도 연계할 수 있다.

  • Lua Types
    • Lua의 Starndard Library 타입 정의

구조를 설명하자면 TypeScript의 AST로 부터 Lua AST로 변환하고 이 AST로 Lua 코드를 생성한다.
또, Array.prototype.concat와 같은 JavaScript 빌트인 객체도 Self Host로 구현돼 있다.
Playground에서 한번 시험해보면 알겠지만 [1].concat(2)와 같은 코드를 사용하면 __TS__ArrayConcat와 같은 Lua 용 polyfill을 활용하여 변환하는 것을 알 수 있다.

Plugins 등도 TypeScript로 작성할 수 있도록 제공한다.


헤드라인


Release v5.0.0 · typicode/husky

github.com/typicode/husky/releases/tag/v5.0.0

JavaScript git Tools ReleaseNote

git hook 관리 도구 husky 5.0.0 릴리스. npm install husky@next로 설치할 수 있다.
라이선스를 MIT에서 License Zero Parity + MIT로 변경됐다.

Git 2.9+의 core.hooksPath를 사용해 Git Hook 구조로 변경, 설치 시 Hook을 자동으로 활성화하지 않고 husky install를 이용하여 명시적으로 활성화 하도록 변경됐다.


Storybook 6.1

storybook.js.org/blog/storybook-6-1/

JavaScript UI Tools ReleaseNote React Angular

Storybook 6.1 릴리스.
빌드 성능 개선, Asynchronous loaders 추가, React 17 대응, Angular 11 대응


Node v12.20.0 (LTS) | Node.js

nodejs.org/en/blog/release/v12.20.0/

node.js ReleaseNote

Node.js 12.20.0 릴리스.
Node.js 14에서의 backport가 주된 내용.
fs.FSWatcherref()unref() 추가, http.Agentscheduling 옵션 추가, package.json에서 exports patterns 지원.


Release 3.8.0 - 2020.11.26 · zloirock/core-js

github.com/zloirock/core-js/releases/tag/v3.8.0

JavaScript polyfill library ReleaseNote

core-js 3.8.0 릴리스.
Array#at, Number.range, Array.filterOut, Array#uniqueBy 추가.


Release Workbox v6.0.0 · GoogleChrome/workbox

github.com/GoogleChrome/workbox/releases/tag/v6.0.0

ServiceWorker ReleaseNote JavaScript library

Workbox 6.0.0 릴리스.
webpack 5 대응, Strategy / Plugin 구조 변경, workbox-recipes 패키지 추가 등.
Workbox의 skipWaiting는 비권장됐으며 Service Worker의 self.skipWaiting()을 사용할 것을 권장.


아티클


How To Secure Node.js Applications with a Content Security Policy | DigitalOcean

www.digitalocean.com/community/tutorials/how-to-secure-node-js-applications-with-a-content-security-policy

node.js CSP article

Node.js 애플리케이션에서 CSP를 실현하는 방법을 소개하는 튜토리얼 글.
CSP 설정 방법, 폰트나 이미지 등의 취득을 제한하는 예제, Nonce 설정, CSP Reporting API와 레포트를 전달 받는 방법 등이 소개돼 있다.


사이트, 서비스, 문서


Operator Lookup - Search JavaScript operators

www.joshwcomeau.com/operator-lookup/

JavaScript search ECMAScript Tools

JavaScript 연산자의 의미를 찾아볼 수 있는 사이트.


funbox/harold: Compares frontend project bundles

github.com/funbox/harold

JavaScript Tools

프로젝트의 프런트엔드 관련 파일 크기 등의 스냅샷을 찍고 그 스냅샷 끼리 비교할 수 있는 도구.
프로젝트의 파일 크기나 빌드 시간에 대한 변화를 측정할 수 있다.


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


Typescript-TDD/ts-auto-mock: Typescript transformer to unlock automatic mock creation for interfaces and classes

github.com/Typescript-TDD/ts-auto-mock

TypeScript plugin test

TypeScript 타입 정의에서 자동으로 목 데이터를 만드는 TypeScript Plugin.
ttypescript와 ts-patch를 경유하는 식으로 TypeScript의 transform 동작.


optoolco/tonic: A Low Profile Component Framework. Stable, Minimal, Auditable, and Build-Tool-Free.

github.com/optoolco/tonic

WebComponents library

Web Components 프레임워크
html 메서드로 JSX 스러운 템플릿 구조 제공, Props로 값 전달, State와 라이프 사이클 이벤트를 갖고 있다.
빌드 없이 사용할 수 있다.


Package Phobia

packagephobia.com/

JavaScript node.js npm webservice

npm 패키지의 의존을 포함한 설치 시의 파일(패키지) 크기와 배포 시의 크기 정보를 제공하는 웹 서비스.


lukeed/uvu: uvu is an extremely fast and lightweight test runner for Node.js and the browser

github.com/lukeed/uvu

node.js JavaScript browser testing library

빠른 실행 속도를 목적으로 한 테스트 프레임워크.
테스트 파일 자체를 실행할 수 있으며 Native ES Modules 지원, 브라우저에서도 실행할 수 있다.
testsuite메서드 uvu/assert 모듈을 갖고있다.


FormidableLabs/urql: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.

github.com/FormidableLabs/urql

GraphQL JavaScript library

GraphQL 클라이언트 라이브러리.
GraphQL 요청, 캐시, React 등 라이브러리에 대응하고 있다.
Exchanges라는 확장 구조나 디버깅 용 개발자 도구도 제공한다.


panva/jose: Universal "JSON Web Almost Everything" - JWA, JWS, JWE, JWT, JWK with no dependencies

github.com/panva/jose

JWT JavaScript library

Universal한 JWA, JWS, JWE, JWT, JWK 구현 라이브러리.
브라우저 에서는 Web Cryptography API를 사용한다.


TypeScriptToLua

typescripttolua.github.io/

TypeScript Lua Tools

TypeScript를 Lua 코드로 변환하는 도구.
기존 Lua 코드는 형 정의 파일로 대응하며 TypeScript를 사용한 타입 안전한 환경와 풍부한 IDE 기능을 활용하여 Lua 코드를 작성할 수 있다.


talentlessguy/tinyhttp: ⚡ 0-legacy, tiny & fast web framework as a replacement of Express

github.com/talentlessguy/tinyhttp

express JavaScript library

express와 비슷한 API를 제공하는 Node.js 웹 프레임워크.
express middleware와 호환성이 있고, async function을 지원한다.


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