JSer.info #360 - npm 5.6.0(beta)가 공개됐습니다.
Fully cross-platform package-lock.json
-- Stop dropping failed optional deps by iarna · Pull Request #19054 · npm/npm
위 글에 소개 돼 있듯이 크로스 플랫폼 간 호환되는 package-lock.json 파일이 생성될 수 있도록 개선됐습니다.
이 문제는 shrinkwrap와 optionalDependencies 때부터 있었던 것으로 5년이 걸려 수정됐습니다.
React v16.2.0이 릴리즈 됐습니다.
React v16.2.0에서는 Fragment(<></>)를 지원합니다.
<></> 또는 <Fragment> 컴포넌트를 사용하여 플래그먼트를 다룰 수 있습니다.
render() {
return (
<>
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.
</>
);
}
JSX의 새로운 문법으로서 추가됐기 때문에 Flow, TypeScript나 Babel 등 파싱 도구 측의 대응이 필요합니다.
유명한 도구는 대부분 지원하기 때문에 업데이트하기만 하면 사용할 수 있습니다.
61st meeting of Ecma TC39 미팅을 통해 ECMAScript proposals의 스테이터스가 변경됐습니다ㅣ String.prototype.replaceAll나 Decimal 등이 새롭게 제안됐으며 JSON superset가 Stage 2로 Numeric separators 와 Array.prototype.{flatMap,flatten}이 Stage 3로 Class Field와 관계된 제안이 분리 되는 등 기존의 제안도 함께 갱신됐습니다.
자세한 내용은 아래 문서를 참고해주시기 바랍니다.
헤드라인
React v16.2.0: Improved Support for Fragments - React Blog
reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html
React 16.2.0이 릴리즈 됐습니다.
Framents 컴포넌트를 지원합니다.
<></> 또는 <Fragment> 컴포넌트를 사용하여 프래그먼트를 다룰 수 있습니다.
Release v3.9.0 · webpack/webpack
github.com/webpack/webpack/releases/tag/v3.9.0
webpack 3.9.0이 릴리즈 됐습니다.
스키마에 대한 검증(Validatrion) 에러 메시지가 개선됐습니다.
Release v0.60.0 · facebook/flow
github.com/facebook/flow/releases/tag/v0.60.0
Flow 0.60.0이 릴리즈됐습니다.
server monitor 프로세스를 도입해 변경 감지에 대한 성능을 개선했습니다. 또, Flow linter로 unclear-type, untyped-import 규칙 추가 됐으며 $Values 그리고 $Keys와 관련된 버그가 수정됐습니다.
Video.js 6.5.0 Release | Video.js Blog
blog.videojs.com/video-js-6-5-0-release/
Video.js 6.5.0이 릴리즈 됐습니다.
프로그래스 바의 애니메이션이 좀 더 부드럽게 바뀌었고 play() 핸들링이 개선됐습니다.
The npm Blog — v5.6.0 (2017-11-27)
blog.npmjs.org/post/167963735925/v560-2017-11-27
npm 5.6.0(beta)의 변경 사항에 대해 정리돼 있습니다. 크로스 플랫폼 간 호환되는 package-lock.json 파일이 생성될 수 있도록 개선됐습니다. 패키지를 설치하는 과정 없이 pacakge-lock.json를 생성하기만 하는 --package-lock-only이 추가 됐고 라이브 사이클 스크립트를 위한 커스텀 NODE_OPTIONS를 전달할 수 있는 새로운 인자 --node-options이 추가됐습니다.
아티클
Debugging React performance with React 16 and Chrome Devtools.
building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad
React 16 환경에서 퍼포먼스 프로파일을 해석하는 방법에 대해 소개돼 있습니다.
What's New In DevTools (Chrome 64) | Web | Google Developers
developers.google.com/web/updates/2017/11/devtools-release-notes
Chrome 64의 개발자 도구에 새롭게 추가된 기능에 대해 정리돼 있습니다.
퍼포먼스 모니터, Console 사이드바, 콘솔 로그 그룹핑 등 새롭고 편리한 다양한 기능이 추가 됐습니다.
shallow-equal for Object/React props | Web Scratch(일본어)
efcl.info/2017/11/30/shallow-equal/
Shallow Equal를 지원하는 라이브러리를 소개합니다.
React의 shouldComponentUpdate를 Deep Equal(JSON.stringify)로 비교한 경우와 Shallow Equal을 사용한 경우의 속도 차이에 대해 작성돼 있습니다.
또 Shallow 비교가 가능하도록 상태를 관리하는 방법에 대해서도 이야기합니다.
Chromium 소스 코드 걸어보기(일본어)
nhiroki.jp/2017/12/01/chromium-sourcecode
Chrome/Blink의 프로젝트 구조에 대해 이야기합니다.
디렉터리 구조나 각 디렉터리의 의미 뿐만 아니라 browser와 renderer의 구조적 컨셉, Blink 내에서 분리하는 방법, 코드 Owner와 의존 관계를 보는 방법 등 관련 내용이 상세하게 작성돼 있습니다.
JavaScript Performance Optimization Tips: An Overview — SitePoint
www.sitepoint.com/javascript-performance-optimization-tips-an-overview/
JavaScript와 퍼포먼스에 대한 개요격 내용이 작성돼 있습니다.
퍼포먼스가 좋다고 볼 수 있는 기준인 RAIL, JavaScript 실행 까지의 비용, bundle 사이즈가 성능에 끼치는 영향 등에 대해 이야기합니다.
Measuring the Performance of Firefox Quantum with RUM - Akamai Developer Blog
developer.akamai.com/blog/2017/11/29/measuring-performance-firefox-quantum-rum/
Akamai 환경에서의 Firefox 52(ESR)와 Firefox 57(Quantum)의 성능에 대한 글입니다.
Akamai의 RUM에 의하면 DOM Content Loaded 시간이 약 24% 개선 됐다고 이야기합니다.
근래의 selenium-webdriver 이야기 - Qiita(일본어)
qiita.com/nazomikan/items/61143cbf01274c05b654
selenium-webdriver의 PromiseManager가 폐지된 경위와 네이티브 Promise를 이용해 작성하는 방법에 대해 이야기합니다.
Almin.js가 해주는 것 - Qiita(일본어)
qiita.com/kmdsbng/items/dc03d89c0ca5acc30a44
비즈니스 로직을 View와 분리한 상태에서 DDD를 실현하기 위한 기반 구조 관점에서의 Almin을 소개합니다.
Almin으로 개발한 경우 애플리케이션의 처리 흐름과 도메인 오브젝트의 독립성 등에 대해 이야기합니다.
Monitoring the performance of a Node.js web application - Sqreen Blog | Modern Application Security
Node.js의 async_hook 모듈과 User Timing API, Async Hooks API를 사용하여 성능을 측정하는 방법에 대해 소개돼 있습니다.
ECMAScript proposal updates @ 2017-011 | ECMAScript Daily
ecmascript-daily.github.io/ecmascript/2017/12/05/ecmascript-proposal-updates
2017년 10월 TC39 미팅 결과를 반영한 ECMAScript Proposal의 변경 사항이 정리돼 있습니다.
eslint-plugin-vue를 만든 이야기 - Qiita(일본어)
qiita.com/mysticatea/items/860ce3bf0ff387f166ac
Vue 용의 ESLint 플러그인인 eslint-plugin-vue와 온라인 데모 사이트를 대해 소개합니다.
Vue.js에서 D3.js를 사용하지 않고 그래프를 구현하다 - Qiita
qiita.com/haribote/items/0bbf6cf5720b078039ff
Vue를 사용해 SVG로 그래프를 만든 과정이 정리돼 있습니다.
데이터 주도로 꺾은선 그래프, 막대 그래프, 원그래프 등을 SVG로 그려내는 구조를 만드는 방법에 대해 작성돼 있습니다.
Performance Calendar » Evolution of ![]()
: Gif without the GIF
calendar.perfplanet.com/2017/animated-gif-without-the-gif/
GIF와 <video>을 이용한 애니메이션 영상에 대한 글입니다.
Safari Technology Preview의 <img src=".mp4"> 지원 소식과 <video>보다 <img>가 성능상 더 좋은 이유를 설명합니다. 그리고 GIF, WebP, mp4의 파일 사이즈 차이점에 대해서도 작성돼 있습니다.
WebRTC로 통계 정보 수집하기 - Qiita(일본어)
qiita.com/yusuke84/items/dc6e5a4ed109c4631b66
WebRTC에서 사용하는 코덱이나 송수신 스트림 등 미디어나 네트워크에 관련된 정보를 수집하는 방법에 대해 작성돼 있습니다.
슬라이드, 영상
New Web Platform APIs // Speaker Deck
speakerdeck.com/arnellebalane/new-web-platform-apis
최근 추가된 여러가지 Webplatform API를 알기 쉽게 정리한 슬라이드입니다.
Broadcast Chennel, Network Information, Web Share, Credential Management, Payment API, Resize Observer 등을 소개합니다.
사이트, 서비스, 문서
reactjs/react-a11y: Identifies accessibility issues in your React.js elements
React 컴포넌트의 접근성과 관련된 문제를 감지할 수 있도록 도와주는 라이브러리입니다.
소프트웨어, 도구, 라이브러리
ReactPrimer/ReactPrimer: React component prototyping tool that generates fully connected class component code.
github.com/ReactPrimer/ReactPrimer
React 컴포넌트의 프로토타이핑을 도와주는 도구입니다.
WeiChiaChang/stacks-cli: 📊 Analyze website stack from the terminal 💻
github.com/WeiChiaChang/stacks-cli
전달한 URL에 해당하는 서비스나 사이트가 사용하는 라이브러리와 CDN, 접속 통계 도구, 서버 환경 등을 분석하여 테이블로 출력해주는 CLI 도구입니다.
도서
Web Development with Node and Express, 2nd Edition - O'Reilly Media
shop.oreilly.com/product/0636920084266.do
Node.js와 Express를 이용한 웹 애플리케이션 개발을 주제로 한 도서입니다.
