JSer.info #327 - JavaScript 포맷팅(formatter) 도구인 prettier 1.0이 릴리즈됐습니다.

Releasing Prettier 1.0

Go 언어의 gofmt나 Reason의 refmt와 비슷한 코드 포맷팅 도구입니다.

prettier는 언어 편에서 제공하는 도구가 아니기 때문에 어디까지나 완고한(opinionated) 포맷팅을 지향하며 따라서 설정할 수 있는 항목이 적습니다. 1.0에서는 이 도구를 사용하는 이용자 사이에서도 의견이 갈리기 쉬운 세미콜론이나 탭/스페이스 등에 관한 옵션이 추가됐습니다(그래도 옵션은 10개 이하로 상당히 적습니다).

JavaScript의 이용자 마다 작성 방법을 다르게 할 수 있는 점에 대해 JavaScript의 개발자 @BrendanEich는 데이비드 허먼의 저서 "이펙티브 자바스크립트"에서 다음과 같이 언급한 적이 있습니다.

자바스크립트는 행동의 기이한 특징이 없는 언어나 제한주의자의 생각과는 거리가 멀다(오히려 반대에 가깝다). 따라서 효과적인 개발을 위해, (중략) 자바스크립트 개발자는 반드시 훌륭한 스타일과 적절한 사용법을 공부하고, 최선의 실천방법을 추구해야한다.
-- Effective JavaScript의 서문
-- Effective JavaScript - Devid Herman - Google 그룹스

prettier는 JavaScript/JSX/Flow를 지원하고 있으며 TypeScript는 점차 지원해나갈 예정입니다.

EdgeHTML(MSEdge의 렌더링 엔진) 15가 Windows 10 Creators Update에 포함돼 공개됐습니다.
Brotli, CSS Custom Properties, Intersection Observer, Payment Request API, Web VR, CSP Lv2 등을 지원합니다.

또, Async/await가 기본적으로 활성화 됐고, FIDO 2.0 Web API 사양을 따르도록 변경됐습니다.

Twitter Lite and High Performance React Progressive Web Apps at Scale에는 Twitter Lite의 성능 개선과 관련된 내용이 작성돼 있습니다.

webpack을 사용해 bundle한 JavaScript를 분할하고 부드러운 무한스크롤을 구현하기 위해 고민한 부분이 소개돼 있습니다. 또, React나 Redux에서의 병목이 되는 부분과 개선한 내용도 작성돼 있으며 Service Worker에서 자원을 캐쉬하는 방법 등 직접 실천한 클라이언트 사이드의 최적화 기법에 관해 작성돼 있습니다.

무한스크롤에 관해서는 아래 문서도 함께 읽어보면 좋을 것 같습니다.

Infinite List and React - @itszero

헤드라인

Announcing TypeScript 2.3 RC | TypeScript

blogs.msdn.microsoft.com/typescript/2017/04/10/announcing-typescript-2-3-rc/

TypeScript ReleaseNote

TypeScript 2.3 RC가 릴리즈됐습니다.
noImplicitAny, strictNullChecks,noImplicitThis 등 공통의 엄격한 옵션을 사용하도록 지정하는 strict 옵션이 추가됐습니다.

Generator/Iterator가 ES3/ES5 호환 코드로 변환되도록 변경됐고 Async Generator/Iterator와 Generic defaults를 지원합니다.

TypeScript 2.3 RC의 변경 사항 - Qiita

What’s new in Microsoft Edge in the Windows 10 Creators Update - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

blogs.windows.com/msedgedev/2017/04/11/introducing-edgehtml-15/

MSEdge ReleaseNote

EdgeHTML 15(Windows 10 Creators Update)에 관한 릴리즈 노트입니다.
Brotli, CSS Custom Properties, Intersection Observer, Payment Request API, Web VR, CSP Lv2 등을 지원합니다.

Releasing Prettier 1.0

jlongster.com/prettier-1.0

JavaScript Tools ReleaseNote opinion

JavaScript와 Flow를 지원하는 포맷팅 도구 Prettier 1.0이 릴리즈됐습니다.
Prettier는 가능한한 옵션을 열어주지 않는 완고한(opinionated) 포맷팅 도구지만 의견이 갈리기 쉬운 세미콜론이나 탭/스페이스에 대해서는 옵션을 제공하고 있습니다.

Release v0.44.0 · facebook/flow

github.com/facebook/flow/releases/tag/v0.44.0

flowtype ReleaseNote

Flow v0.44.0이 릴리즈됐습니다.
성능 개선이 이뤄졌습니다.

React v15.5(6) and v16 - blog.koba04.com

blog.koba04.com/post/2017/04/14/react-dot-js-v155-and-v16/(일본어)

React

React 15.5와 16의 변경 사항에 관해 정리돼 있습니다.
v15.5에서 비권장된 기능이나 패키지를 소개하고 v16에서 v15의 호환 모드로 도입되는 Fiber에 관해서도 작성돼 있습니다.

koba04/react-fiber-resources: resources for ReactFiber

Release v2.4.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v2.4.0

webpack ReleaseNote

webpack v2.4.0이 릴리즈됐습니다.
import()에 코멘트로 chunk name을 지정할 수 있도록 변경됐고 require.ensure에 에러 콜백을 전달할 수 있게 됐습니다.

Feature: Add named chunk for `import()` by specified comment format. by mc-zone · Pull Request #4573 · webpack/webpack

아티클

Introducing Moon – Hacker Noon

hackernoon.com/introducing-moon-1d44a99635f0

JavaScript Vue library

Vue 버전의 Preact 같은 라이브러리인 Moon을 소개합니다.
Moon은 Vue와 같은 API를 갖고 있으며 Vue 보다 파일 사이즈가 작습니다.

Moon

What's New In DevTools (Chrome 59) | Web | Google Developers

developers.google.com/web/updates/2017/04/devtools-release-notes

Chrome debug

Chrome 59에서 지원될 개발자 도구와 관련된 기능에 관해 작성돼 있습니다.
커버리지, 풀-페이지 스크린샷, Block Request 등 추가된 새로운 기능을 소개합니다.

Debugging Tips and Tricks | CSS-Tricks

css-tricks.com/debugging-tips-tricks/

JavaScript CSS debug

웹사이트, JavaScript, CSS 등 여러가지 디버깅 관련 팁이 작성돼 있습니다.
CSS animation, CSS Grid 디버그, 회선 속도 디버그, timed debugger, 시뮬레이터 등을 소개합니다.

슬라이드, 영상

React London 2017 - YouTube

www.youtube.com/channel/UCV4LIEkC0S9KUAPDm2g4mNQ

React video 이벤트

React London 2017의 발표 영상이 공개됐습니다.

React London

An Introduction to Flow - Sessions by Pusher

pusher.com/sessions/meetup/js-monthly-london/flow

JavaScript flowtype video slide

Flow를 주제로한 발표 영상입니다.
Flow의 기본적인 사용 방법에 관해 소개합니다.

React + FLUX + Redux + Redux Saga 이야기(일본어)

www.slideshare.net/yossy222/react-flux-redux-redux-saga

redux JavaScript Flux

redux-saga에 관한 슬라이드입니다.
Flux, Redux, redux-saga의 구조에서의 데이터 흐름에 관해 소개돼 있습니다.
또, redux-saga를 도입했을 때 Action이 반드시 saga를 거치게 되는 설계 방식에 관해서도 소개합니다.

Using React (-Native) with Redux and Redux-Saga. A new proposal?

사이트, 서비스, 문서

Twitter Lite and High Performance React Progressive Web Apps at Scale

medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3

webpack React performance redux

webpack의 CommonsChunkPlugin을 사용해 파일을 분리하고 끈김 없는 무한스크롤을 구현하기 위해 고민한 부분이 소개돼 있습니다.
React와 관련된 사항으로 shouldComponentUpdate로 최적화하고 componentWillMount의 처리 로직을 componentDidMount로 이동시켜 성능을 향상 시켰으며 dangerouslySetInnerHTML를 지양하고 사용성을 향상시키기 위해 마운트 비용이 큰 렌더링을 지연시켰습니다.
Redux와 관련된 사항으로 텍스트 입력 별 Store 갱신을 피하고 Batch Action으로 최적화했습니다.
Service Worker에서 자원을 캐쉬하는 방법 등 직접 실천한 최적화 기법에 관해 자세히 작성돼 있습니다.