JSer.info #235 - React v0.14 Beta 1이 릴리즈됐습니다.
react와 react-dom, 두 개의 패키지로 나뉘는 큰 변경이 있습니다.
아래와 같이 react로 사용하던 DOM과 관련한 모듈은 모두 react-dom으로 옮겨지며, react의 API는 deprecated 됩니다.
- react-dom
ReactDOM.render、ReactDOM.unmountComponentAtNode、ReactDOM.findDOMNode
- react-dom/server
ReactDOMServer.renderToString、ReactDOMServer.renderToStaticMarkup
변경된 API나 ES6 Classes 대응 등은 react-codemod라는 자동화 도구를 이용해 변환할 수 있습니다.
아직 베타 단계이므로 의아한 부분이 있습니다만, React를 사용하고 있는 사람은 살펴볼 필요가 있어보입니다.
Firefox 39.0가 릴리즈됏습니다.
Fetch API를 기본적으로 사용할 수 있도록 됐고, window.fetch 형식으로 참조 가능합니다.
또한, CSS Scroll Snap Points를 지원하고, String.prototype.replace()의 세 번째 인수 등 Firefox 독자의 사양을 deprecated 하고 ES6 사양을 준수하는 변경이 이루어지고 있습니다.
지난주、2015-06-30 JS에서 진행한 JavaScript 앙케이트의 결과는 아래의 페이지에서 볼 수 있습니다.
ES6 코드를 작성한적 있는지에 대한 질문에 74%의 사람이 어떠한 형태로든 ES6를 사용해 봤다고 답했습니다.
제품이나 라이브러리 개발에 ES6를 사용한적 있는지에 관한 질문을 한다면 수치는 낮아질 것 같습니다. 74%의 수치는 Babel 등의 변환 도구를 부담없이 사용할 수 있는 환경에 크게 기인하는 것 같습니다.
ECMAScript 6를 어떻게 학습할까(일본어)라는 슬라이드에서도 간단하게 정리돼 있지만, Babel과 같은 Transpiler의 동작에 의지해 ES6를 학습하는 것은 위험한 부분도 있습니다.
조금만 더 기다리면 별다른 변환없이 ES6 코드를 브라우저에서 실행할 수 있으므로(module이외...), 학습은 네이티브로 하고 사용은 Transpiler 경유하도록 구별한다면 더 ES6와 가까워질 수 있을 것이라 생각합니다.
ES6에서 더 알고싶은 기능은 무엇인가요?라는 질문에는 좀 이외였지만 Generator/Iterator, Modules, Reflect, Proxy, Class 순서로 응답했습니다.
메타 프로그래밍 적 요소를 많이 선택하여 조금 의외였습니다.
"JSer.info에서 조금 더 미래의 이야기를 하는게 좋겠다."와 "JSer.findo에서 조금 더 핵심적인 주제를 다루는게 좋겠다."라는 두 질문에 약 80%가 YES 택했습니다. 조용히 두 주제를 함께 다루겠습니다.
"podcast를 하고 싶다"는 의견도 있었습니다. 최근 HTML5 Video나 Audio의 자막 등을 다룰 수 있는 track 요소를 가지고 놀아보고 있는데 꽤 다양한 방법으로 활용할 수 있을 것 같습니다. podcast 열심히 준비해주세요.
자세한 의견이나 바라는 점은 트위터 해쉬 태그(#jserinfo)를 이용해 글을 작성해주면 감사하겠습니다.
헤드라인
React v0.14 Beta 1 | React
facebook.github.io/react/blog/2015/07/03/react-v0.14-beta-1.html
React v0.14 Beta 1이 릴리즈됐습니다.
react와 react-dom으로 패키지나 나뉘었고, refs가 DOM node 가체를 가리키게 변경 됐습니다.
또 자동 변환 도구로써 react-codemod가 공개됐습니다.
Firefox — Notes (39.0) — Mozilla
www.mozilla.org/en-US/firefox/39.0/releasenotes/
Firefox 39가 릴리즈됐습니다.
Fetch API가 기본적으로 유효하도록 변경됐고, CSS Scroll Snap Points를 지원하며 ES6 사양을 준수하도록 변경됐습니다.
- Firefox 39 호환성 정보(일본어) - Mozilla | MDN
- Firefox 39 for developers - Mozilla | MDN
- Firefox JavaScript changelog - JavaScript | MDN
- Native CSS Scroll Snap Points
esprima/ChangeLog at 2.4.1 · jquery/esprima
github.com/jquery/esprima/blob/2.4.1/ChangeLog
esprima 2.4.0이 릴리즈됐습니다.
for-of、spread element를 지원합니다.
Important security upgrades for node.js and io.js — Medium
medium.com/@iojs/important-security-upgrades-for-node-js-and-io-js-8ac14ece5852
Node.js와 io.js에 V8로 인한 취약점이 있었기 때문에 Node.js v0.12.6, io.js-v2.3.3, io.js-v1.8.3로 보안 업데이트가 진행됐습니다.
아티클
Using JSX with TypeScript – Minko Gechev's blog
blog.mgechev.com/2015/07/05/using-jsx-react-with-typescript
TypeScript의 master에 들어간 JSX 지원에 관해서 설명하고 있습니다.
1.6에서 릴리즈될 예정인 JSX를 지금 사용해 볼 수 있는 방법도 소개합니다.
Aerotwist - React + Performance = ?
aerotwist.com/blog/react-plus-performance-equals-what/
DOM은 느리고 React의 Virtual DOM은 빠르다고 말하지만 정말 일까? Flickr API를 사용한 사진 출력 예제를 토대로 Vanilla와 React를 비교해 본 결과로 알게된 사실을 이야기합니다.
Perf audit: Loading performance · Issue #247 · reddit/reddit-mobile
github.com/reddit/reddit-mobile/issues/247
paulirish가 생성한 reddit의 모바일 사이트의 로딩 완료까지 45초가 걸리는 원인에 대해 분석하는 issue입니다.
Chrome 개발자 도구, React Perf, disc 등을 사용해 문제의 원인을 분석하는 방법을 참고할 수 있습니다.
How fast are web workers? ✩ Mozilla Hacks – the Web developer blog
hacks.mozilla.org/2015/07/how-fast-are-web-workers/
WebWorker나 SharedWorker의 생성 비용, 메시지 전송 속도에 관해 설명돼 있습니다.
Mozilla Games Technology Roadmap | Future Releases
blog.mozilla.org/futurereleases/2015/07/02/mozilla-games-technology-roadmap/
웹에서 plugin-free한 게임을 실현하는 것과 관련한 이슈 및 로드맵이 작성돼 있습니다.
사이트, 서비스, 도큐멘트
Breakouts
JavaScript 게임 엔진 계의 TodoMVC입니다. 같은 게임이 여러가지 게임 엔진으로 구현돼 있어 서로 비교해 볼 수 있습니다.
arkency/reactjs_koans
github.com/arkency/reactjs_koans
React 학습 문제집입니다.
Paul Kinlan on Twitter: "Created @ChromiumDev slack. A place for web devs to talk dev and chrome Join ☞ https://t.co/RAr4iTzesM Login ☞ https://t.co/8xLiIpC0F8"
twitter.com/Paul_Kinlan/status/598494432321773569
Chromiun에 관한 정보를 공유하는 Slack이 개설됐습니다. 개발자들과 커뮤니케이션 하거나 정보를 공유할 수 있습니다.
소프트웨어, 도구, 라이브러리
Safe JavaScript Templating
yahoo.github.io/secure-handlebars/
Automatic Contextual Escaping를 구현한 Handlebars를 호환하는 템플릿 엔진입니다. Yahoo!에서 개발했습니다.
Cycle.js
Rx를 사용한 단방향 데이터 흐름과 Immutability를 구현한 프레임워크입니다. Model-View-Intent 아키텍처로 디자인 돼 있고, 사용자에게 입력을 indent 에서 받아 Model에 통지하고, Model의 변경을 감시하고 있다가 View(virtual-dom)이 갱신되는 사이클을 만드는 것을 목적으로 하고 있습니다.
통지와 감시 시스템에 Rx의 Observable을 사용하고 있습니다.
The W3C Mobile Checker
validator.w3.org/mobile-alpha/
W3C에서 제공하는 모바일 친화적(friendly)인지 테스트 하는 도구입니다.
URL를 입력해 테스트하면 문제점과 해결 방법을 제시합니다.
도서관련
Learning WebRTC - O'Reilly Media
shop.oreilly.com/product/9781783983667.do
WebRTC에 관한 도서입니다.
React: Up & Running - O'Reilly Media
shop.oreilly.com/product/0636920042266.do
2015년 12월에 출간 예정인 React.js에 관한 도서입니다.
Amazon.com: Test-driven JavaScript Development eBook: Ravi Kumar Gupta, Harmeet Singh, Hetal Prajapati: Kindle Store
www.amazon.com/Test-driven-JavaScript-Development-Kumar-Gupta-ebook/dp/B010T266P6
2016년 1월 5일에 출간 예정인 JavaScript의 TDD에 관한 도서입니다.
