JSer.info #419 - Node 개발 버전 v11.7.0을 릴리스했습니다.
zlib 모듈에서 brotli의 압축과 해제를 지원합니다.
또, 포함하고 있는 npm을 6.5.0으로 갱신했습니다. 이 버전에서는 지금까지 --experimental-worker를 붙여 사용했던 Worker Thread를 기본적으로 활성화 했습니다.
LightHouse 4.0.0을 릴리스 했습니다.
PWA 카테고리를 변경했습니다. 최적화 돼 있는지를 스코어가 아닌 아이콘으로 표현합니다.
speed-index 점수를 속도 조절(throttling)에 대응하여 채점하도록 변경했고 스코어가 만점 일때의 표현을 추가했습니다.
Porting 30K lines of code from Flow to TypeScript는 Flow를 이용해 타입을 작성한 JavaScript를 TypeScript로 이전한 이유와 방법에 대해 이야기합니다.
본래 tcomb을 이용해 실시간 검증하던 코드를 Flow로 이전하고 다시 TypeScript로 타입 시스템을 이전한 경위을 소개합니다.
Babel 7에서 지원하는 @babel/preset-typescript를 이용하고 TypeScript의 tsc를 타입 검증 도구로 사용하는 등 Flow에서 TypeScript로 이전하는 과정과 접근법에 대해 작성돼 있습니다.
Flow에서 TypeScript로 이전하는 방법, Flow가 나았던 부분, 서드 파티의 타입 정의 파일 커버리지 차이, Lint나 테스트 등 다양한 주제에 대해 이야기합니다.
비슷한 주제의 글도 있으니 함께 읽어보면 좋을 거 같습니다.
- Why every new web app at PayPal starts with TypeScript
- 개인 OSS 라이브러리를 Flow에서 TypeScript로 전면 이전한 이유와 소감 - 코코퐁 노트(일본어)
헤드라인
Release Workbox v4.0.0-beta.1 · GoogleChrome/workbox
github.com/GoogleChrome/workbox/releases/tag/v4.0.0-beta.1
Workbox 4.0.0 β1을 릴리스했습니다.
웹페이지의 컨텍스트(전역 범위)에서 사용할 수 있는 workbox-window 패키지를 추가했고 workbox-cli에 --watch 인수를 추가했습니다.
비호환적 변경으로 workbox-precaching을 재작성했으며 skipWaiting과 clientsClaim을 workbox.core.*로 옮겼습니다.
The future of TypeScript on ESLint - ESLint - Pluggable JavaScript linter
eslint.org/blog/2019/01/future-typescript-eslint
ESLint의 TypeScript 대응과 향후 전략에 대해 이야기합니다.
typescript-eslint라고 하는 통합 프로젝트에서 TypeScript의 파서와 규칙을 개발할 예정입니다.
- typescript-eslint/typescript-eslint: Monorepo for all the tooling which enables ESLint to support TypeScript
- The Future of eslint-plugin-typescript · Issue #290 · bradzacher/eslint-plugin-typescript
Node v11.7.0 (Current) | Node.js
nodejs.org/en/blog/release/v11.7.0/
Node.js 11.7.0을 릴리스 했습니다.
zlib 모듈에서 brotli를 지원하고 npm 6.5.0로 갱신했습니다. 6.5.0은 Worker를 기본적으로 활성화한 버전입니다.
Prettier 1.16: HTML improvements and better CRLF handling · Prettier
prettier.io/blog/2019/01/20/1.16.0.html
Prettier 1.16을 릴리스했습니다.
CRLF 대응을 개선했고 babel(js) 파서 갱신했습니다. 또, 테스트에 이용할 수 있는 --check 플래그를 추가했습니다.
Release 4.0.0 (2019-01-16) · GoogleChrome/lighthouse
github.com/GoogleChrome/lighthouse/releases/tag/v4.0.0
LightHouse 4.0.0을 릴리스했습니다.
PWA 카테고리에서 스코어를 제거했습니다. speed-index 점수를 속도 조절(throttling)에 대응하여 측정하도록 변경했고 스코어가 만점일 때의 표현을 추가했습니다.
7.3.0 Released: Named capturing groups, private instance accessors and smart pipelines · Babel
babeljs.io/blog/2019/01/21/7.3.0
Babel 7.3.0을 릴리스했습니다.
proposal-private-methods의 getter 스펙을 지원하며 proposal-pipeline-operator 스펙 변경과 Named capturing groups를 대응했습니다.
또, TypeScript Parser에서 import type과 bigint를 지원합니다.
아티클
ikyu.com 호텔 페이지의 모바일 버전에서 jQuery 의존을 제거하기 위해 한 일 - ikyu.com Developers Blog
user-first.ikyu.co.jp/entry/goodbye-jquery
jQuery 의존을 제거하기 위한 리팩터링 방법에 대해 이야기합니다.
jQuery와 같은 역할을 하는 기능의 구현 방법과 제거 했을 때 성능 차이점에 대해 소개합니다.
Web Page Usability Matters - DEV Community 👩💻👨💻
dev.to/addyosmani/web-page-usability-matters-3aok
웹페이지의 성능을 측정할 때의 각 지표에 대해 소개합니다.
크게 4 단계로 나눠 각 계측 정보(metrics)에 대해 이야기합니다.
Porting 30K lines of code from Flow to TypeScript
davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/
약 3만 줄의 Flow 코드를 TypeScript로 이전한 경험을 소개합니다.
본래 tcomb를 이용한 실시간 검증에서 Flow로 이전하고 이후 Babel 7 + TypeScript preset으로 이전한 경위를 시작으로
tsc를 타입 검증 목적으로 사용하고, 어떻게 Flow에서 TypeScript로 전환했는지 이야기합니다. 또, 이전 한 결과 서드 파티의 타입 정의 개선 효과와 같이 타입 커버리지가 향상된 부분에 대해서도 소개합니다.
Callback을 박멸하자 - Yahoo! JAPAN Tech Blog(일본어)
techblog.yahoo.co.jp/javascript/nodejs/callback-to-promise/
콜백 스타일의 비동기 코드를 Promise 인터페이스로 변경하는 방법과 이유를 소개합니다.
How to start a Node.js project | Phil Nash
philna.sh/blog/2019/01/10/how-to-start-a-node-js-project/
npm에서 배포한 명령줄 도구를 사용해 Node.js 프로젝트를 설정하는 방법을 이야기합니다. 라이센스, gitignore, CoC 파일 작성, package.json를 작성하는 커맨드를 소개합니다.
슬라이드, 영상
분위기 있는 사람을 위한 Redux 재입문 - Speaker Deck(일본어)
speakerdeck.com/jmblog/fen-wei-qi-deyatuteruren-xiang-kefalse-redux-zai-ru-men
Redux의 컨셉과 상태 관리 방법을 소개하는 슬라이드입니다.
Store/State, Action과 dispatch, Reducer, Middleware의 각 역할이나 동작 흐름을 소개합니다.
사이트, 서비스, 문서
CSS Feature Toggles - Chrome 웹스토어
chrome.google.com/webstore/detail/css-feature-toggles/aeinmfddnniiloadoappmdnffcbffnjg
CSS의 특정 기능을 끌 수 있는 브라우저 확장 기능입니다.
Grid, Flexbox, Sticky, Transform, Shapes, @supports 등의 효과를 끌 수 있습니다.
소프트웨어, 도구, 라이브러리
npm/libnpm: programmatic npm API
npm API를 조작할 수 있는 라이브러리입니다.
패키지와 Registry 관련 API를 조작할 수 있습니다.
wpk-cli/wpk: a friendly, intuitive, intelligent, and unofficial CLI for webpack
webpack을 랩핑한 CLI 도구입니다.
webpack의 설정 파일 작성이나 변경, 빌드, 개발 서버 실행, webpack-bundle-analyzer를 사용한 bundle 해석 등 다양한 명령어를 제공합니다.
lukeed/sockette: The cutest little WebSocket wrapper! 🧦
WebSocket를 다루는 작은 사이즈의 라이브러리입니다.
자동 재접속과 이벤트 핸들링 API를 제공합니다.
crubier/code-to-graph: Transforms JS code 🙈into mermaid flowchart 🐵
github.com/crubier/code-to-graph
JavaScript 코드에서 제어 흐름을 graphviz, mermaid flowchart 등의 그래프로 변환해주는 도구입니다.
도서
JavaScript 코드 레시피집 | 이케다 야스노부, 카노 소오 | 책 | 통신 판매 | Amazon
www.amazon.co.jp/dp/4297103680/
2019년 1월 25일 출간 예정인 JavaScript 코드 레시피 도서입니다.
