JSer.info #265 - Babel 6.5.0이 릴리즈됐습니다.
탐색 과정(Traversal process)은 바벨 파이프라인에서 가장 큰 시간을 잡아먹는 부분(chunks) 중 하나 였지만,
한번의 탐색으로 모든 변환 처리(플러그인)를 적용하는 것으로 속도를 최적화 했습니다.
Babel 6 implements a new optimization which merges all plugins together into a single traversal.
-- 6.0.0 Released · Babel
반대로 모든 처리를 한번에 진행하기 때문에 플러그인 간 경쟁이 일어나기 쉽고, 특정 플러그인 전후로 처리 하고자 하는 경우 등에 문제가 발생하게 됩니다.
그래서 Babel 6.5.0에서는 passPerPreset 라는 옵션을 추가 해, preset 마다 traversal를 만들어 처리 가능하도록 했습니다.
이것으로, 플러그인 간 충돌하는 등의 문제를 제어하기 쉬워졌습니다.
{
passPerPreset: true,
presets: [
{
plugins: ['plugin-1']
},
'preset-2',
{
plugins: ['plugin-2']
}
]
}
또, 코드 생성 처리를 최적화하여 최대 2배 정도 빨라졌습니다.
아래 문서에서도 설명하고 있지만, V8의 문자열 처리 특성을 이용한 최적화 이므로 특수한 방법입니다.
V8에서는 문자열을 결합한 문자열을 ConsString로 보관하고 있습니다.
그리고 그 문자열의 첨자에 접근할 때에 처음 String::SlowFlatten을 합니다.
하지만 이 String::SlowFlattern의 처리가 무겁기 때문에 Babel의 코드 생성 같은 문자열을 결합하는 처리에 이것을 가능한한 피하도록 변경됐습니다.
(JavaScript 엔진의 구현 방식에 영향을 받습니다.)
Angular 1.5.0이 릴리즈됐습니다.
1.5.0에서는 Angular2로 마이그레이션 하는데 편리한 몇몇 기능이 추가 됐습니다.
module.component() 추가, one-way 데이터 바인딩 대응, ES6 Classes 지원 개선 등이 이뤄졌으며 또, ngSanitize의 보안 문제가 개선됐습니다.
컴포넌트를 정의하는 module.component() 관해서는 아래 문서를 참고하면 좋을 것 같습니다.
ES6 const is not about immutability · Mathias Bynens에서는 const에 관해 자주 갖게되는 오해에 관해 작성돼 있습니다.
const는 값 자체를 불변으로 선언하는 것이 아니라 대입을 불변으로 하는 의미로 Java의 final 등과 같습니다.
때문에 객체의 속성 값은 변경할 수 있는 상태가 됩니다. 객체까지 불변으로 하고자 할때는 Object.freeze()를 이용해야 한다는 점에 관해서도 작성돼 있습니다.
또, 이 사실을 근거로한 let과 const의 용도에 관해서도 작성돼 있습니다.
이에 맞춰, let(const 포함)의 스코프(범위)에 관해 설명돼 있는 아래의 아티클도 함께 읽으면 좋을 것 같습니다.
헤드라인
Release v6.5.0 · babel/babel
github.com/babel/babel/releases/tag/v6.5.0
Babel 6.5.0이 릴리즈됐습니다.
Babel 6부터는 한번의 탐색으로 모든 코드를 변환하는 것으로 알려져 있었으나, 탐색을 복수(프리셋 단위)로 나눌 수 있는 'passPerPreset' 옵션이 추가됐습니다.
V8의 문자열 처리 특성에 맞춰 코드를 수정하여 코드 제너레이터 성능을 개선(참고)하는 등 여러가지 변경 사항이 있습니다.
Dev.Opera — Opera 35 released
Opera 35(based on Chromium 48)가 릴리즈됐습니다.
document.fonts가 Set과 같은 객체(FontFaceSet 인터페이스)로 변경됐고 entries() 등을 사용할 수 있으며 TouchEvent 이벤트 생성자가 추가됐습니다.
Angular 1.5.0 - ennoblement-facilitation has been released!
angularjs.blogspot.com/2016/02/angular-150-ennoblement-facilitation.html
AngularJS 1.5.0가 릴리즈됐습니다.
AngularJS 2로 업그레이드하는데 편리한 몇가지 개선이 이뤄졌습니다.
module.component()가 추가됐고 one-way 바인딩을 대응하며 ES6 Classes 지원 등의 개선이 이뤄졌습니다.
Chromium Blog: Chrome 49 Beta: CSS custom properties, background sync with service workers, and new ES2015 features
blog.chromium.org/2016/02/chrome-49-beta-css-custom-properties.html
Chrome 49 Beta가 릴리즈됐습니다.
CSS custom properties(CSS Variable)와 ES6의 지원이 개선됐습니다. Object.observe()가 비권장(deprecated)되는 등 다양한 변경 사항이 있습니다.
아티클
Looking ahead: Microsoft Edge for developers in 2016 | Microsoft Edge Dev Blog
blogs.windows.com/msedgedev/2016/02/03/2016-platform-priorities/
MSEdge의 로드맵을 알 수 있는 글입니다.
접근성 개선 및 ES6 modules, Fetch API, Web Notifications 그리고 Beacon API 등의 지원을 예정하고 있습니다.
typings로 d.ts의 관리를 한다 | 스마오 – JavaScript 외주 개발 –(일본어)
smart.ataglance.jp/2016-02-04-manage-dts-by-typings/
typings를 사용한 d.ts의 관리 방법에 관해 작성돼 있습니다.
Handling props and class names in React – simonsmith.io – Portfolio and blog of a London based front-end web developer
simonsmith.io/handling-props-and-classnames-in-react/
React Component와 className의 관리 패턴을 소개합니다.
classnames 모듈을 사용하는 방법과 테스트에 관해 작성돼 있습니다.
For and against 'let'
davidwalsh.name/for-and-against-let
let과 범위(scope)에 관해 자세히 설명돼 있습니다.
ES6 const is not about immutability · Mathias Bynens
mathiasbynens.be/notes/es6-const
const는 값 자체를 불변(immutable)으로 선언하는 것이 아니라 대입을 불변으로 한다는 의미로,
객체의 속성 값은 변경할 수 있는 상태가 되니, 객체를 불변으로 하고자 할때는 Object.freeze()를 이용해야 한다는 점에 관해 소개합니다. 또 let과 const의 용도 구분에 관해서도 작성돼 있습니다.
Developer Edition 46 – More memory tooling, improved @media sidebar and more ★ Mozilla Hacks – the Web developer blog
hacks.mozilla.org/2016/02/developer-edition-46-more-memory-tooling-improved-media-sidebar-and-more/
Firefox 46에서 변경된 몇 가지 개발자 도구의 기능에 관해 작성돼 있습니다.
Dominator view 추가, 개발자 도구가 닫혀도 debugger 구문에서 중단되도록 하는 등 다양한 변경 사항이 있습니다.
Introducing ES2015 Proxies | Web Updates - Google Developers
developers.google.com/web/updates/2016/02/es2015-proxies
ES2015 Proxies의 사용 방법과 Reflect API와 조합해 사용하는 방법에 관해 작성돼 있습니다.
슬라이드, 영상
다함께, FluxUtils 한바퀴!
www.slideshare.net/UyeongJu/fluxutils
flux utils를 소개하는 슬라이드 입니다.
flux utils의 소스 코드를 살펴 보면서 어떤 흐름으로 동작하는지 소개하고 flux 아키텍처에서의 비동기 처리 방법에 관해서 알기 쉽게 소개하고 있습니다.
사이트, 서비스, 문서
Top | Diff of HTMLs
W3C와 WHATWG의 HTML 명세(specifications)를 diff를 볼 수 있는 사이트입니다.
vasanthk/css-refresher-notes: CSS Refresher!
github.com/vasanthk/css-refresher-notes
CSS를 다시 살펴볼 수 있는 저장소 입니다.
자주 사용하는 기능이나 스타일 선언 방식에 관해 자세히 설명돼 있습니다.
소프트웨어, 도구, 라이브러리
start-runner/start: Dead simple tasks runner
Promise 기반의 태스크 자동화 도구입니다.
Teamweek/instadate: A minimal high performance date library for Node.js and Browser
날짜 및 시간 처리에 사용할 수 있는 라이브러리 입니다.
도서
Thinking In React
React를 사용하는 경우에 마주하는 현실적인 문제에 대응한 해결책을 제시하는 전자 서적입니다.
