JSer.info #269 - React v15.0 RC1이 릴리즈됐습니다.
New Versioning Scheme에 작성돼 있는 것처럼, React의 다음 메이저 버전은 v0.14에서 v15.0로 릴리즈 됩니다.
v15.0 RC1에서는 data-reactid가 클라이언트 사이드 렌더링에서 제외(서버 사이드 즉, ReactDOM.renderToString을 사용한 문자열엔 data-reactid가 생성됩니다) 되고, render 메서드에서 null을 반환했을 때 <noscript> 태그가 아닌 Comment Node가 렌더링 되도록 변경됐습니다.
React v0.14에서 react와 react-dom에 패키지가 나눠지고 메서드가 분리되면서 비권장(deprecated)된 메서드가 있었습니다.
v15.0에서는 그러한 비권장 메서드가 삭제되거나, 경고 메시지를 개선하는 등 여러가지 변경이 이뤄졌습니다.
Performance Engineering with React에는 React를 사용한 애플리케이션의 병목 지점을 발견하는 방법에 관해 작성돼 있습니다.
react-addons-perf를 사용해 성능을 측정하는 방법과 개선 방법에 관해 작성된 글입니다.
대규모 프로젝트에서의 TypeScript와 DDD // Speaker Deck에는 대규모 애플리케이션에서의 설계나 관점 그리고 고민에 관해 작성돼 있습니다.
뷰와 도메인 로직을 분리하기 위한 설계 고민 그리고 TypeScript와 DDD를 이야기합니다.
SNS 팀에서의 도메인 주도 설계 실천법 | GREE Engineers' Blog도 함께 보면 좋을 것 같습니다. 이제 프론트엔드라고 불리는 분야에서도 이러한 이야기가 많이 이뤄지고 있는 것 같습니다.
헤드라인
React v15.0 Release Candidate | React
facebook.github.io/react/blog/2016/03/07/react-v15-rc1.html
React v15.0 RC1가 릴리즈됐습니다.
data-reactid가 클라이언트 사이드 렌더링에서 제외됐고, render에서 null을 반환시 Comment Node가 렌더링되도록 변경됐습니다.
또 비권장이 된 메서드가 react와 react-dom에서 각각 삭제됐으며 경고 메시지의 개선이 이뤄졌습니다.
ESLint v2.3.0 released - ESLint - Pluggable JavaScript linter
eslint.org/blog/2016/03/eslint-v2.3.0-released
ESLint v2.3.0이 릴리즈됐습니다.
숫자 0, 1, 2로 지정하던 규칙의 레벨을 문자열 off, wan, error 지정 가능하도록 변경으며 ES2016에서 추가되는 ** operator를 대응합니다.
아티클
Performance Engineering with React
benchling.engineering/performance-engineering-with-react/
React에서의 성능 측정 방법과 병목 지점을 어떻게 발견할 수 있는지 작성돼 있습니다.
내가 네이티브 CSS 변수에 두근두근하는 이유(일본어)
terkel.github.io/why-im-excited-about-native-css-variables/
CSS Custom Property에 관해 작성한 "Why I'm Excited About Native CSS Variables"를 일본어로 번역한 문서입니다.
컴포넌트의 이름을 접두사로 하여 변수 명을 선언하고 사용하는 규칙 등에 관해 작성돼 있습니다.
High-performance Web Worker messages | Read the Tea Leaves
nolanlawson.com/2016/02/29/high-performance-web-worker-messages/
단순한 데이터를 Web Worker 사용해 전송했을때의 성능 테스트 결과가 작성돼 있습니다.
JSON.stringify()/JSON.parse()를 전체 또는 일부만 적용 그리고 객체 그대로 사용한 경우를 각각 비교한 글입니다.
- How fast are web workers? ★ Mozilla Hacks – the Web developer blog
- Fast legoization | Better world by better software
Fast legoization | Better world by better software
glebbahmutov.com/blog/fast-legoization/
Web Worker를 사용해 이미지 데이터를 효율적으로 처리하는 기법에 관해 작성돼 있습니다.
왜 그림 문자를 포함한 문자를 1 문자씩 자르는데 Array.form 만으로 충분한가? - Qiita(일본어)
qiita.com/alucky0707/items/697598e49ff56191c139
그림 문자 등을 split("")로 자르게 되면 서로게이트페어(Surrogate Pairs) 문제가 발생하게 되는데 ES6에서 추가된 Array.from 등을 사용하면 문제없이 자르는 방법이 소개돼 있습니다.
JavaScript AST 첫걸음 | Web Scratch(일본어)
efcl.info/2016/03/06/ast-first-step/
JavaScript의 AST를 다루는 도구를 만들고 싶은 사람이라면 알아야할 몇 가지 개념이 정리돼 있습니다.
Data structures in JavaScript - Ben's Blog
blog.benoitvallon.com/data-structures-in-javascript/data-structures-in-javascript/
JavaScript로 데이터 구조나 알고리즘에 관해 학습할 수 있는 시리즈로 구성된 글입니다.
Introducing the WebVR 1.0 API Proposal ★ Mozilla Hacks – the Web developer blog
hacks.mozilla.org/2016/03/introducing-the-webvr-1-0-api-proposal/
WebVR 1.0 API에 관한 설명 글입니다.
ECMA262의 Iteration protocols로 지연 평가하는 Iterator를 만들다 - snyk_s log(일본어)
saneyukis.hatenablog.com/entry/2016/03/04/030337
ECMAScript의 Symbol.iterator를 사용해 컬렉션을 지연 평가하는 방법에 관해 작성돼 있습니다.
Understanding Transducers in JavaScript — Medium
medium.com/@roman01la/understanding-transducers-in-javascript-3500d3bd9624
Transformer protocol로 구현한 컬렉션을 이용해 여러개의 데이터 변환을 한번에 처리하는 구조인 Translducers에 관해 작성돼 있습니다.
matthewmueller/28kb-react-redux-routing: React + Redux + Routing Stack for just 28kb
github.com/matthewmueller/28kb-react-redux-routing
자주 사용하는 React + Redux + 라우팅 구조를 28kb로 구성하는 컨셉의 저장소입니다.
React 대신 Preact를, Redux 대신 랩핑한 Socrates를 사용하고 라우팅으로는 enroute + Redux 미들웨어를 사용해 구성돼 있습니다.
슬라이드, 영상
대규모 프로젝트에서의 TypeScript와 DDD // Speaker Deck
speakerdeck.com/armorik83/da-xing-hurontoendokai-fa-niokerutypescripttoddd
대규모 클라이언트 사이드를 개발하는 경우의 구조나 테스트, 환경에 관한 슬라이드입니다.
TypeScript에서 제대로 도메인 모델을 구축하고, 뷰 레이어와 분리하는 구조를 만드는 방식을 이야기합니다.
React.js Conf 2016 - Steve McGuire - Performance Without Compromise - YouTube
www.youtube.com/watch?v=kDARP5QZ6nU&list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY&index=28
Netflix의 클라이언트 사이드 아키텍처를 소개합니다.
mixin을 사용하지 않고 고차함수를 이용해 레이어를 표현하며, 선언적 표현을 유지하기 위해 어떠한 경우에도 refs를 사용하지 않는 규칙(No refs, ever)을 세우고 있다고 합니다.
또 성능 면에서 Transducers를 이야기하고 정적인 prop과 동적인 prop을 나눠 관리하여 최적화하는 방법에 관해서도 이야기합니다.
Designing in React: Why and How // Speaker Deck(일본어)
speakerdeck.com/fand/designing-in-react-why-and-how
React語圏에서 어떤 시도들이 있고 무엇을 해결하려 했는지 작성돼 있습니다.
CSS in JS, 애니메이션 등을 이야기합니다.
gulp: The Good Parts // Speaker Deck(일본어)
speakerdeck.com/jmblog/gulp-the-good-parts
gulp의 프래틱스에 관해 작성돼 있습니다.
태스크 분할, 설정의 외부 파일화, v4에서의 태스크 작성법, v4의 변경 사항 등을 이야기합니다.
사이트, 서비스, 문서
Code Cartoons — Medium
Flux, Redux, Relay 등 에서의 데이터 컨트롤 흐름을 Cartoons로 학습할 수 사이트입니다.
소프트웨어, 도구, 라이브러리
Rebass
React를 사용한 UI 라이브러리입니다.
스테이트리스 컴포넌트로 구현돼 있습니다.
컴포넌트 개발 방식을 참고할 만한 도구입니다.
tryolabs/fetch-it: An enhanced HTTP client based on fetch.
Fetch API를 기반으로한 HTTP 클라이언트 라이브러리입니다.
middleware로 처리를 추가할 수 있는 구조로 돼 있습니다.
cognitect-labs/transducers-js: Transducers for JavaScript
github.com/cognitect-labs/transducers-js
Transformer protocol로 구현한 컬렉션을 이용해 여러개의 데이터 변환을 한번에 처리하는 구조를 제공하는 라이브러리입니다.
uber-common/react-vis
github.com/uber-common/react-vis
Uber의 그래프 및 시각화를 위한 React Component 라이브러리입니다.
막대 그래프, 꺽은선 그래프, 원형 그래프, 테이블, 트리 맵 등 다양한 그래프가 공개돼 있습니다.
도서
Quick Browserify by Sandeep Kumar Patel [Leanpub PDF/iPad/Kindle]
Browserify에 관해 작성한 전자 도서입니다.
