Fork me on GitHub

2019-07-09: Babel 7.5.0(Dynamic Import), Next.js 9(Dynamic routing), React Native 0.60

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #443 - Babel 7.5.0이 릴리스됐습니다.

현재 Stage 1 ProposalsPipeline Operator 변환을 지원합니다.

2019년 6월 TC39 Meeting에서 Dynamic Import가 Stage 4가 됐습니다(ES2020에 Dynamic Import가 들어갑니다).
따라서 Babel의 @babel/preset-env에서 Dynamic Import를 기본적으로 지원합니다(지금까지는 별도의 플러그인이 필요했습니다)

또, babel/plugin-transform-typescript에서 allowNamespaces 옵션으로 TypeScript의 namespaces를 실험적으로 지원합니다.


React를 사용한 프레임워크 Next.js 9가 릴리스됐습니다.

Next.js 6에서 @zeit/next-typescript를 사용해 TypeScript를 지원했지만 Next.js 9에서는 TypeScript를 내장(빌트인)하여 지원합니다.
또, path-to-regexp 형식으로 Dynamically Routing 지원, api/ 내의 파일을 API URL로 맺어(map)주는 API Routes를 지원합니다.
그 외에도 페이지 별 config를 설정할 수 있도록 변경됐고 빌드 최적화가 이뤄졌습니다.


헤드라인


Release v7.5.0 · babel/babel

github.com/babel/babel/releases/tag/v7.5.0

babel ReleaseNote

Babel 7.5.0이 릴리스됐습니다.
dynamic import을 @babel/preset-env에 추가했습니다.
babel-plugin-transform-typescript에서 namespace를 지원합니다.


Release 0.7.0 · markedjs/marked

github.com/markedjs/marked/releases/tag/v0.7.0

JavaScript Markdown security ReleaseNote

marked 0.7.0이 릴리스됐습니다.
XSS 취약점을 수정했고 sanitizesanitizer 옵션을 대신 DOMPurify 등의 외부 라이브러리 사용을 권장하며 Table 지원을 GFM 옵션으로 옮겼습니다.


Announcing React Native 0.60 · React Native

facebook.github.io/react-native/blog/2019/07/03/version-60

React iOS Android ReleaseNote

React Native 0.60이 릴리스됐습니다.
접근성 개선됐고 시작 화면이 변경됐습니다. 또, AndroidX 지원하며 CocoaPods 대응 개선됐고 코어에서 커뮤니티로 옮겨진 NetInfo, WebView, Geolocation을 삭제했습니다.


Blog - Next.js 9 | Next.js

nextjs.org/blog/next-9

React JavaScript library ReleaseNote

Next.js 9가 릴리스됐습니다.
TypeScript를 내장(빌트인) 지원하며 Next.js의 코어 부분을 TypeScript로 재작성했습니다. 그리고 Dynamically Routing과 api/로 API Routes 지원합니다.
또, 페이지 별 config를 지원하고 빌드 최적화가 이뤄졌습니다.


Node v12.6.0 (Current) | Node.js

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

node.js ReleaseNote

Node.js 12.6.0이 릴리스됐습니다.
child_process.exec/execFile가 반환하는 Promise 객체에 child 프로퍼티를 추가했고 process.resourceUsage()가 추가됐습니다.


아티클


Automatically detect memory leaks with Puppeteer - Article by Christoph Guttandin - Media Codings

media-codings.com/articles/automatically-detect-memory-leaks-with-puppeteer

JavaScript browser testing

Puppeteer를 사용해 웹 페이지의 메모리 릭 테스트를 작성하는 방법을 이야기합니다.
page.queryObjects를 사용해 처리 전과 후의 Heap에 있는 객체를 비교하여 테스트하는 방법을 소개합니다.


Request.destination으로 리소스 종류 별 캐시 전략 | 프런트엔드 Blog | 미츠에링크

www.mitsue.co.jp/knowledge/blog/frontend/201907/05_0944.html

Fetch article

Fetch API의 Request.destination를 소개하고 Service Worker에서 가져온 리소스의 종류를 판단하여 캐시 전략을 다르게 하는 방법을 소개합니다.


Using Slots In Vue.js — Smashing Magazine

www.smashingmagazine.com/2019/07/using-slots-vue-js/

Vue article

Vue의 Slot을 소개합니다.
<slot> 사용 방법, v-slot 디렉티브, Scoped Slot에 대해서 자세히 작성돼 있습니다.
또, 재사용 가능한 컴포넌트를 작성하는 방법도 이야기합니다.


Fetch API: Building a Fetch Polyfill From Scratch (For Fun and Promise)

www.valentinog.com/blog/fetch-api/

Fetch article

Fetch API의 간단한 Polyfill를 만들어보면서 Fetch API와 Promise에 대해 이해할 수 있는 글입니다.


CSS Custom Properties In The Cascade — Smashing Magazine

www.smashingmagazine.com/2019/07/css-custom-properties-cascade/

CSS article

CSS Custom Properties에 대한 글입니다.
컴포넌트 쪽 변수 정의 방법과 캐스케이딩에 대해서 소개하고 컴포넌트와 CSS Custom Properties 활용 방법 등 응용적인 내용이 정리돼 있습니다.


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


tilk/digitaljs: Teaching-focused digital circuit simulator

github.com/tilk/digitaljs

JavaScript Tools

브라우저에서 동작하는 교육용 전자회로 시뮬레이터입니다.


jsdoctypeparser/jsdoctypeparser: Parser module for JsDoc or Closure Compiler format type-annotation.

github.com/jsdoctypeparser/jsdoctypeparser

JavaScript JSDoc library

JSDoc 파서 라이브러리입니다.
Closure Compiler 형식, TypeScript 형식 등을 지원하며 JSDoc를 파싱해 AST를 만들어 반환합니다.


greggman/twgl.js: A Tiny WebGL helper Library

github.com/greggman/twgl.js

WebGL JavaScript library

WebGL 헬퍼 라이브러리입니다.


frenic/csstype: Strict TypeScript and Flow types for style based on MDN data

github.com/frenic/csstype

TypeScript CSS library

MDN 데이터를 기반으로 CSS 프로퍼티의 TypeScript 형 정의를 제공하는 라이브러리입니다.


Pull Request to this article
記事を紹介する