JSer.info #443 - Babel 7.5.0이 릴리스됐습니다.
현재 Stage 1 Proposals인 Pipeline 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 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
marked 0.7.0이 릴리스됐습니다.
XSS 취약점을 수정했고 sanitize과 sanitizer 옵션을 대신 DOMPurify 등의 외부 라이브러리 사용을 권장하며 Table 지원을 GFM 옵션으로 옮겼습니다.
Announcing React Native 0.60 · React Native
facebook.github.io/react-native/blog/2019/07/03/version-60
React Native 0.60이 릴리스됐습니다.
접근성 개선됐고 시작 화면이 변경됐습니다. 또, AndroidX 지원하며 CocoaPods 대응 개선됐고 코어에서 커뮤니티로 옮겨진 NetInfo, WebView, Geolocation을 삭제했습니다.
Blog - Next.js 9 | Next.js
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 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
Puppeteer를 사용해 웹 페이지의 메모리 릭 테스트를 작성하는 방법을 이야기합니다.
page.queryObjects를 사용해 처리 전과 후의 Heap에 있는 객체를 비교하여 테스트하는 방법을 소개합니다.
- page.evaluateHandle(pageFunction[, ...args])
- page.queryObjects(prototypeHandle)
- standardized-audio-context/memory.js at master · chrisguttandin/standardized-audio-context
Request.destination으로 리소스 종류 별 캐시 전략 | 프런트엔드 Blog | 미츠에링크
www.mitsue.co.jp/knowledge/blog/frontend/201907/05_0944.html
Fetch API의 Request.destination를 소개하고 Service Worker에서 가져온 리소스의 종류를 판단하여 캐시 전략을 다르게 하는 방법을 소개합니다.
Using Slots In Vue.js — Smashing Magazine
www.smashingmagazine.com/2019/07/using-slots-vue-js/
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 API의 간단한 Polyfill를 만들어보면서 Fetch API와 Promise에 대해 이해할 수 있는 글입니다.
CSS Custom Properties In The Cascade — Smashing Magazine
www.smashingmagazine.com/2019/07/css-custom-properties-cascade/
CSS Custom Properties에 대한 글입니다.
컴포넌트 쪽 변수 정의 방법과 캐스케이딩에 대해서 소개하고 컴포넌트와 CSS Custom Properties 활용 방법 등 응용적인 내용이 정리돼 있습니다.
소프트웨어, 도구, 라이브러리
tilk/digitaljs: Teaching-focused digital circuit simulator
브라우저에서 동작하는 교육용 전자회로 시뮬레이터입니다.
jsdoctypeparser/jsdoctypeparser: Parser module for JsDoc or Closure Compiler format type-annotation.
github.com/jsdoctypeparser/jsdoctypeparser
JSDoc 파서 라이브러리입니다.
Closure Compiler 형식, TypeScript 형식 등을 지원하며 JSDoc를 파싱해 AST를 만들어 반환합니다.
greggman/twgl.js: A Tiny WebGL helper Library
WebGL 헬퍼 라이브러리입니다.
frenic/csstype: Strict TypeScript and Flow types for style based on MDN data
MDN 데이터를 기반으로 CSS 프로퍼티의 TypeScript 형 정의를 제공하는 라이브러리입니다.
