Fork me on GitHub

2019-07-30: mithril.js 2, Electron 6, React 입문 가이드

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #446 - 싱글 페이지 애플리케이션 용 자바스크립트 프레임워크인 Mithril 2가 릴리스됐습니다.

비호환적 변경 사항으로 m.redraw()가 기본적으로 비동기로 동작하며 대신에 m.redraw.sync()가 추가됐습니다.
이 외로 m.withAttr가 삭제됐으며 m.request가 반환하는 Promise가 서버 에러인 경우에도 reject 되지 않도록 변경됐고 IE10 이하 지원이 종료됐습니다.
또, m.request에서 timeout이나 responseType을 지원하는 등의 기능 추가도 이뤄졌습니다.


Electron 6.0.0이 릴리스됐습니다.

Chromium 76로 갱신됐으며 Cookies API에서 Promise를 지원합니다. macOS에서 Touch ID로 인증할 수 있는 SystemPreferences.promptTouchID()가 추가됐습니다.
또, sandboxed renderers 내에서 사용이 비권장된 fschild_process 등을 직접 require할 수 있는 동작이 삭제됐습니다.
대신 명시적으로 remote.require를 사용합니다.

- require('fs');
+ require('electron').remote.require('fs')

React 입문자 용 가이드 문서 The Complete Introduction to React가 공개됐습니다.
기본적인 React의 개념, JSX, 컴포넌트, Hooks API 등 샘플 코드를 실행해보며 학습할 수 있도록 작성돼 있습니다.


헤드라인


Release v2.0.1 · MithrilJS/mithril.js

github.com/MithrilJS/mithril.js/releases/tag/v2.0.1

JavaScript library ReleaseNote

mithril.js 2.0이 릴리스됐습니다.
비호환적 변경 사항으로 m.redraw()가 기본적으로 비동기로 동작하며 대신해 사용할 수 있는 m.redraw.sync()가 추가됐으며 m.withAttr가 삭제됐습니다.
또, m.request에서 timeoutresponseType을 지원하며 IE10 이하 버전 지원을 종료했습니다.


Node v12.7.0 (Current) | Node.js

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

node.js ReleaseNote

Node v12.7.0이 릴리스됐습니다.
npm 6.10.0으로 갱신, pkg-exports Proposal 실험적 지원, Policy를 검증하는 --policy-integrity=sri 옵션 추가.
또, Docker의 Memory 제한(linux cgroups의 설정)을 정확하게 가져올 수 있도록 수정됐습니다.


Release v5.2.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v5.2.0

Chrome performance ReleaseNote

Lighthouse 5.2.0이 릴리스됐습니다.
Chrome 77에 탑재 될 예정입니다. 서드 파티 스크립트의 성능 영향을 표시할 수 있고 메인 스레드의 총 블로킹 시간을 측정할 수 있습니다.


Release v4.38.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v4.38.0

webpack ReleaseNote

webpack v4.38.0이 릴리스됐습니다.
ProgressPlugin의 성능이 개선됐고, chunk graph 생성 시 부모 자식 관계를 추적하는 식으로 인크리멘탈 빌드 시의 chunk 생성 성능이 개선됐습니다.


Release v2.0.0 · vuetifyjs/vuetify

github.com/vuetifyjs/vuetify/releases/tag/v2.0.0

Vue UI library ReleaseNote

Vue의 Material Design UI 라이브러리 Vuetify 2.0이 릴리스됐습니다.
Material Design 2에 대응하고 새로운 컴포넌트가 추가됐습니다.
1.5에서의 마이그레이션 가이드도 함께 공개됐습니다.


Release electron v6.0.0 · electron/electron

github.com/electron/electron/releases/tag/v6.0.0

Electron ReleaseNote

Electron 6.0.0이 릴리스됐습니다.
Chromium 76으로 갱신, Cookies API에서 Promise 지원, macOS에서 Touch ID로 인증할 수 있는 promptTouchID()가 추가됐습니다.
sandboxed renderers에서 사용이 비권장 됐던 require('fs') 등 require 할 수 있는 동작 삭제됐으며 대신 명시적으로 remote.require 를 사용해야합니다.


아티클


What's New In DevTools (Chrome 77)  |  Web  |  Google Developers

developers.google.com/web/updates/2019/07/devtools

Chrome debug article

Chrome 77 개발자 도구 변경 사항이 정리돼 있습니다.
요소의 스타일을 복사할 수 있으며 Layout Instability 가시화 기능이 추가됐고 Lighthouse 5.1로 갱신, 네트워크 패널에 Prefetch cache가 출력되도록 개선됐습니다.
또, Push 통지 등을 Application 패널에서 확인할 수도 있습니다.


Understanding service worker life cycle - Vipul Nema - Medium

medium.com/@vipulnema2610/understanding-service-worker-life-cycle-b6580aa4eb50

ServiceWorker article

Service Worker의 라이프사이클을 설명하는 글입니다


Keeping things fresh with stale-while-revalidate  |  web.dev

web.dev/stale-while-revalidate/

browser HTTP article performance

Chrome 75와 Firefox 68에서 지원하는 stale-while-revalidate HTTP 헤더 지원에 대해서 작성돼 있습니다.
일정 시간은 캐시를 이용하지만 동시에 백그라운드에서 갱신를 갱신하도록 합니다.

글에선 Cache-Control: max-age=1, stale-while-revalidate=59의 동작 원리도 설명하며 유즈케이스를 소개합니다.


Modern Script Loading

jasonformat.com/modern-script-loading/

JavaScript article

scirpt 요소에서 ES Module에 대응한 모던 빌드와 legacy 빌드를 반별하는 방법이 소개돼 있습니다.


The npm Blog — Monorepos and npm

blog.npmjs.org/post/186494959890/monorepos-and-npm

npm article

npm와 lerna를 이용한 monorepo 관리에 대해 이야기합니다.


The Complete Introduction to React

jscomplete.com/learn/complete-intro-react

React document tutorial

React 초심자 용으로 작성된 가이드 문서입니다.
React의 기본적인 작성법, JSX, 컴포넌트, Hooks API, 사용자 입력을 다루는 방법, 사이드 이펙트 관리 등에 대해 설명돼 있습니다.


슬라이드, 영상


Scrapbox의 ServiceWorker와 Cache 활용 - daiiz(일본어)

scrapbox.io/daiiz/Scrapbox%E3%81%A7%E3%81%AEServiceWorker%E3%81%A8Cache%E3%81%AE%E6%B4%BB%E7%94%A8

ServiceWorker slide browser JavaScript

Service Worker를 사용한 캐시 전략을 소개합니다.
request.destination을 사용한 요청 판별법, Quota의 용량과 사용량, X-Serviceworker-Cache 응답 헤더로 인한 캐시 판정, 캐시의 갱신 등에 대해 작성돼 있습니다.


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


cube-js/cube.js: 📊 Cube.js - Open Source Analytics Framework

github.com/cube-js/cube.js

JavaScript 데이터베이스 library

Analytics 프레임워크 입니다.
분석 데이터를 저장할 수 있으며 해석을 담당하는 백엔드와 분석한 데이터를 그래프로 출력하는 기능 그리고 검색을 위한 프런트엔드를 제공합니다.
데이터베이스는 MySQL, Postgres, BigQuert, redshift 등을 대응하고 있습니다.


도서


입문 Node.js 프로그래밍(저: JonathanWexler, 저: 요시카와 쿠니오, 역: 요시카와 쿠니오) | 상영사 책(일본어)

www.shoeisha.co.jp/book/detail/9784798158624

node.js book JavaScript 翻訳

2019년 09월 25일 출간 예정인 Get Programming with Node.js의 번역서입니다.
ES2015를 기반으로 한 Node.js 입문 도서입니다.


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