Fork me on GitHub

2019-02-12: Vue 2.6(v-slot), React 16.8(Hooks), Next.js 8(serverless)

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #422 - Vue 2.6.0이 릴리스 됐습니다.

Slots의 새로운 구문으로써 v-slot 디렉티브가 추가됐습니다.
라이프사이클 Hook이 Rejected된 Promise를 반환할 경우 에러 핸들링할 수 있도록 변경됐고 컴파일 에러를 출력 방식이 개선됐습니다.
또, npm 패키지에 ES Module 용 빌드가 포함됐습니다.

ES Module를 지원하는 브라우저에서 http://unpkg.com/와 같은 CDN을 사용해 아래와 같이 Vue를 불러올 수 있습니다.

<script type="module">
import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'

new Vue({
  // ...
})
</script>

React 16.8을 릴리스 됐습니다.

Functional Components 내에서 상태나 라이프사이클을 다룰 수 있는 구조인 Hooks이 추가됐습니다.
또, Hooks 테스트 용으로 ReactTestUtils.act()도 추가됐습니다.

Hooks에 관해서는 공식 문서에 동기(motivation)부터 사용 방법까지 정리돼 있으니 참고해주세요.


Next.js 8을 릴리스 됐습니다.

Serverless 모드가 추가돼 페이지 마다 serverless function을 만들어낼 수 있도록 변경 됐습니다. 이 serverless function은 의존 사항을 bundle한 형태로 돼 있어 Node.js에서 불러와 http 서버와 연결하여 페이지 컨텐츠를 응답할 수 있습니다.

또, 빌드 시 메모리 사용량이 개선됐고 next.config.jsenv로 환경 변수를 정의할 수 있으며 출력되는 HTML 파일 사이즈 개선이 이뤄졌습니다.


헤드라인


Lightning-fast templates & Web Components: lit-html & LitElement - Polymer Project

www.polymer-project.org/blog/2019-02-05-lit-element-and-lit-html-release

WebComponents JavaScript library ReleaseNote

lit-html 1.0과 LitElement 2.0이 릴리스 됐습니다.
lit-html은 Tagged Template을 사용한 HTML 템플릿이며 LitElement는 Web Component 기반의 클래스 라이브러리입니다.


Vue 2.6 released! – The Vue Point – Medium

medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e

Vue ReleaseNote

Vue 2.6이 릴리스 됐습니다.
v-slot 디렉티브가 추가됐고 Dynamic Directive Arguments를 지원합니다.
라이프사이클 hook이 Rejected된 Promise를 반환한 경우 에러 핸들링 가능하도록 변경됐고 컴파일 에러 출력 방식이 개선됐습니다.
또, ES Module 용 빌드가 패키지에 포함됐습니다.


React v16.8: The One With Hooks – React Blog

reactjs.org/blog/2019/02/06/react-v16.8.0.html

React ReleaseNote

React 16.8이 릴리스 됐습니다.
Hooks이 기본적으로 활성화 됐습니다.
또, Hooks 테스트 용으로 ReactTestUtils.act()도 추가됐습니다.


New Release: 2.10.0

jshint.com/blog/2019-02-05/release-2-10-0/

JavaScript Tools ReleaseNote

JSHint 2.10.0이 릴리스 됐습니다.
esversion 옵션이 추가돼 7, 8, 9를 지정할 수 있습니다.
async function 등의 문법을 지원합니다.


Chromium Blog: Chrome 73 Beta: Constructable stylesheets, a new RegExp function, and passive mouse events

blog.chromium.org/2019/02/chrome-73-beta-constructable.html

Chrome ReleaseNote

Chrome 73 Beta이 릴리스 됐습니다.
CSSOM를 조작하는 Constructable Stylesheet Objects, String#matchAll, ::part를 지원합니다.
wheel 이벤트가 기본적으로 passive가 되도록 변경됐습니다.


Release v7.0.0 · h5bp/html5-boilerplate

github.com/h5bp/html5-boilerplate/releases/tag/v7.0.0

HTML5 template ReleaseNote

웹 페이지 템플릿 프로젝트 html5-boilerplate 7.0.0이 릴리스 됐습니다.
IE9 / 10과 관련한 구문 삭제됐고 theme-color meta 태그가 추가 됐습니다. 그리고 secutiry.txt와 관한 내용이 추가 됐습니다.


TestCafe v1.0.0 Released | TestCafe

devexpress.github.io/testcafe/blog/testcafe-v1-0-0-released.html

testing JavaScript library ReleaseNote

TestCafe 1.0.0이 릴리스 됐습니다.
테스트의 실행을 영상으로 녹화할 수 있으며 .testcaferc.json 설정 파일이 추가됐습니다. 또, Live mode가 통합됐고 타입 정의 파일이 추가됐습니다.


Blog - Next.js 8 | Next.js

nextjs.org/blog/next-8

React library ReleaseNote

Next.js 8이 릴리스 됐습니다.
Serverless 모드 추가됐고 빌드 시 메모리 사용량 개선됐으며 env로 환경 변수에 대해서 정의할 수 있도록 변경됐고 출력한 HTML 파일 사이즈 개선이 이뤄졌습니다.
또, <Head> 컴포넌트의 중복 문제가 해결됐고 crossOrigin 객체 추가, CSP 대응 등이 이뤄졌습니다.


Introducing swc 1.0 · swc

swc-project.github.io/blog/2019/02/08/Introducing-swc-1.0

Rust bundler ReleaseNote JavaScript

Rust로 개발한 JavaScript Transpiler / Compiler인 swc 1.0가 릴리스 됐습니다.
ECMAScript 2019, JSX, TypeScript를 지원합니다.


What’s next for SemVer

words.steveklabnik.com/what-s-next-for-semver

news

npm이나 Cargo 등과 관련된 사람을 중심으로 GitHub Team을 구성해 SemVer의 미흡한 부분과 통일성을 책정하는 프로젝트가 시작됐습니다. 프로젝트는 RFC 프로세스로 운영합니다.


아티클


Making wheel scrolling fast by default  |  Web  |  Google Developers

developers.google.com/web/updates/2019/02/scrolling-intervention

Chrome JavaScript article

Chrome 73부터 wheel 이벤트가 기본적으로 { passive: true }가 됩니다.


사이트, 서비스, 문서


Webpack bundle analysis, for every commit

packtracker.io/

webpack webservice github CI

webpack의 bundle 사이즈를 분석해주는 서비스입니다.
GitHub Check에 반응해 커밋 별 bundle 사이즈나 해시 변경에 의한 캐시 히트 유무 등을 시각화해 제공합니다.
OSS 프로젝트에서는 무료로 이용할 수 있습니다.


pikapkg/pack: 📦⚡️ npm package building, reimagined. https://www.pikapkg.com/blog/introducing-pika-pack/

github.com/pikapkg/pack

npm bundler Tools

npm 패키지 배포를 위한 Node나 브라우저 module 등 여러가지 빌드 모드를 한번에 실시 할 수 있는 라이브러리 bundle 도구입니다.
각각의 빌드 설정은 플러그인으로 제공하며 필요한 것을 파이프라인으로 연결해 빌드할 수 있습니다.


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


notion-cli/notion: Notion: the hassle-free JavaScript toolchain manager

github.com/notion-cli/notion

Rust node.js npm yarn console Tools

Rust로 개발된 Node.js 버전 관리(toolchain) 도구입니다.
프로젝트 별로 Node 버전을 바꾸거나 적용하는 시스템을 제공하며 명령줄 도구를 이용해 npm에 배포돼 있는 패키지를 설치해 사용할 수 있습니다.


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