JSer.info #333 - npm v5.0.0이 프레스 릴리즈(Press release) 됐습니다. 아래 명령어를 사용해 npm을 업그레이드할 수 있습니다.
npm i -g npm@5
(Windows의 경우엔 felixrieseberg/npm-windows-upgrade: Upgrade npm on Windows을 이용하는 편이 좋을 거 같습니다)
- The npm Blog — v5.0.0
- Release v5.0.0 · npm/npm (위 글과 내용은 같습니다)
npm@5는 2017년 5월 30일 릴리즈 예정(한국 시간으로 31일)인 Node.js 8.0.0에 포함될 예정입니다(참고).
- Node.js 8.0.0 Tracking Issue · Issue #10117 · nodejs/node
- Node.js 8.0.0 has been delayed and will ship on or around May 30th
추가: Node v8.0.0 (Current) | Node.js가 릴리즈됐습니다.
npm@5에서 설치 속도가 개선 됐으며 npm install의 —save 옵션 인자가 기본적으로 적용되도록 변경 됐습니다.
거기에 기존 shrinkwrap와는 별도의 록(Lock) 시스템으로써 pacakge-lock.json가 도입됐습니다.
npm install할 때에 package-lock.json이 생성 및 갱신되는 방식은 기본적으로 Yarn과 같습니다.
Git으로 의존하고 있는 모듈도 prepare가 호출되도록 변경됐고 --offline/--prefer-online/--prefer-offline、sha512을 지원하는 등 다양한 변경 사항이 있습니다.
npm install ../과 같이 상대 경로로 설치할 때의 동작 방식이 변경됐습니다.
과거엔 상대 경로에 해당하는 디렉터리를 통째로 복사하는 동작 방식 이었지만 npm@5 부터는 symlink를 붙입니다.
- npm 2.0.0에서 로컬 모듈을 사용해 require('../../../')를 회피하기 | Web Scratch(일본어)
- 과거 동작 방식에 관해 작성돼 있는 글
이 상대 경로의 설치는 가까운 미래엔 link:와 같은 식별자로 변경될 가능성이 있습니다(현재는 file: 그대로)
Yarn도 동일한 구조를 지원할 예정입니다.
npm registry의 사정으로 인해 SHA1을 사용하고 있지만 이 부분 역시 이번 변경에 맞춰 sha512을 사용하도록 수정 될 것 같습니다.
Notes: Yarn은 현재 1.0을 목표로 Issue의 triage과 yarn workspace(Lerna와 비슷한 것) 지원을 진행하고 있습니다.
What's New In DevTools (Chrome 60) | Web | Google Developers에는 Chrome 60의 개발자 도구의 기능에 대해 소개 돼 있습니다.
Audit 패널이 Lighthouse 기반으로 변경 됐으며 third party badges가 출력되도록 개선됐고 브레이크 포인트의 새로운 제스처로 Continue to here가 추가됐습니다. 또, 코드 커버레지 출력 방식이 보다 개선됐으며 Async 스택 추적이 기본적으로 활성화 되도록 변경되는 등 디버깅과 관련된 다양한 개선이 이뤄졌습니다.
개선된 개발자 도구는 Google Chrome Canary 브라우저를 통해 한번 사용해 볼 수 있습니다.
헤드라인
[WIP] 8.0.0 Release Proposal by jasnell · Pull Request #12220 · nodejs/node
github.com/nodejs/node/pull/12220#issuecomment-303699926
Node.js 8.0.0 RC1이 릴리즈됐습니다.
Release v5.0.0 · npm/npm
github.com/npm/npm/releases/tag/v5.0.0
npm v5.0.0이 프레스 릴리즈(Press release) 됐습니다. 상대 경로의 npm install 시 모듈을 해당하는 디렉터리를 통째로 복사하지 않고 symlink를 붙이도록 변경됐고 --save 인자가 기본적으로 활성화 됩니다. 또, Git으로 의존하고 있는 모듈도 prepare가 호출되도록 변경됐고 package-lock.json가 도입 됐으며 설치 속도가 개선됐습니다. 마지막으로 --offline、sha512를 지원합니다.
아티클
All About Recursion, PTC, TCO and STC in JavaScript
lucasfcosta.com/2017/05/08/All-About-Recursion-PTC-TCO-and-STC-in-JavaScript.html
JavaScript의 꼬리 재귀 최적화에 대해 설명한 글입니다.
Proper Tail Calls (PTC), Syntactic Tail Calls (STC)에 관해 작성돼 있습니다.
Altering the DOM with JavaScript | Zell Liew
DOM API의 기본적인 사용 방법이 소개한 글이니다.
querySelector으로 요소 선택하고 addEventListener로 이벤트 등록하고 classList로의 클래스 조작하는 방법과 요소를 추가 및 갱신 등의 DOM과 관련된 다양한 조작 방법이 작성돼 있습니다.
TypeScript의 Interface와 Type alias 비교 - Qiita(일본어)
qiita.com/tkrkt/items/d01b96363e58a7df830e
TypeScript의 interface와 type alias에 관해 비교 정리한 글입니다.
Node.js Streams: Everything you need to know – freeCodeCamp
medium.freecodecamp.com/node-js-streams-everything-you-need-to-know-c9141306be93
Node.js의 Stream에 대해 소개하는 글입니다.
What's New In DevTools (Chrome 60) | Web | Google Developers
developers.google.com/web/updates/2017/05/devtools-release-notes
Chrome 60의 개발자 도구에 관해 소개하는 글입니다.
Audit 패널이 Lighthouse 기반으로 변경 됐으며 third party badges가 출력되도록 개선됐고 브레이크 포인트의 새로운 제스처로 Continue to here가 추가됐습니다. 또, 코드 커버레지 출력 방식이 보다 개선됐으며 Async 스택 추적이 기본적으로 활성화 되도록 변경됐습니다.
Using Fetch | CSS-Tricks
Fetch API의 사용 방법에 관해 소개하는 글입니다.
데이터를 취득하는 방법, 에러 핸들링, 응답 처리, Fetch 랩퍼인 zlFetch에 관해 이야기합니다.
Event Bubbling in JavaScript? Event Propagation Explained
www.sitepoint.com/event-bubbling-javascript/
DOM의 이벤트 버블링과 캡쳐링에 관해 소개하는 글입니다.
target、currentTarget、eventPhasee를 사용해 이벤트의 동작을 가시화 하여 알기 쉽게 설명돼 있습니다.
슬라이드, 영상
ReactEurope 2017 - Day 1 - YouTube
www.youtube.com/playlist?list=PLCC436JpVnK3ruJeDWd-xWIMb0l47VcxD
ReactRurope 2017의 발표 영상이 공개됐습니다.
What I Learned Benchmarking React - Dominic Gannaway aka @trueadm at @ReactEurope 2017 - YouTube
www.youtube.com/watch?v=djOc1EK07Tk
JavaScript 라이브러리의 이벤트 벤치 마크 결과를 개선하는 방법에 대해 이야기합니다.
Rollup을 사용해 flat bundle하는 것으로 파일 사이즈와 로드 시간을 줄이고 사용하지 않는 모듈을 삭제하는 방법과 베치마크 도구 등에 관해 이야기합니다. lighthouse를 사용한 모듈의 벤치 마크에 대해서도 소개합니다.
Keynote - Andrew Clark aka @acdlite at @ReactEurope 2017 - YouTube
www.youtube.com/watch?v=QW5TE4vrklU
React의 차후 로드맵에 관해 발표하는 영상입니다.
React v16에서는 Fragments, Portal을 지원하고 Fiber(opt-in)이 적용됩니다 또, 에러 핸들링 향상이 이뤄집니다.
Fiber에서는 보이는 영역을 우선하여 스케줄링하며, Code Spilitting이 개선되는 등 다양한 변경 사항에 대해 소개합니다.
How Streaming Can Supercharge React - Sasha Aickin aka @xander76 at ReactEurope 2017 - YouTube
www.youtube.com/watch?v=UhdGiVy3_Nk
React와 서버 사이드 렌더링에 대해 발표한 영상입니다.
SSR은 출력을 빨리하는 장점이 있지만 TTI는 길어지는 되는 문제가 있습니다. 이 문제를 해결하기 위해 일정한 블록 단위로 컴포넌트를 점진적으로 렌더링하는 식으로 TTI를 개선하는 방안에 대해 이야기합니다.
또, React에 ReactDOMServerStream이 추가된 사항에 대해서도 소개합니다.
- deepanjanroy/tti-polyfill: Polyfill for Time to Interactive
- HTTP2을 전제로 한 HTML+CSS 컴포넌트의 렌더링 패스 최적화해 대해 | blog.jxck.io(일본어)
- Add package builds for new server renderer and enable tests by sebmarkbage · Pull Request #9710 · facebook/react
ECMAScript 2017: what’s new for JavaScript? // Speaker Deck
speakerdeck.com/rauschma/ecmascript-2017-whats-new-for-javascript
ECMAScript의 사양 제안(Proposal) 프로세스와 ES2017의 기능을 소개하는 슬라이드입니다. 함수의 인자 마지막에 콤마를 허용하는 변경에 대해 소개합니다. 또, 현재 사양 제한 각 단계에 해당하는 기능 스펙도 소개합니다.
CSS and the First Meaningful Paint - Sessions by Pusher
pusher.com/sessions/meetup/london-css/css-and-the-first-meaningful-paint
CSS와 First meaningful paint에 관해 소개하는 발표 영상입니다.
Inline CSS의 장점과 단점, RTT와 대기 시간(Latency), 크리티컬 패스한 리소스에 대해 이야기합니다.
또, 리소스의 preload, Server Push에 대해서도 언급합니다.
사이트, 서비스, 문서
ngryman/speedracer: Collect performance metrics for your library/application.
Chrome DevTools protocol을 사용해 개발한 도구로, CLI를 이용해 페이지를 출력하는데 걸리는 시간 등 성능 테스트를 시행할 수 있습니다.
What does my npm module cost?
cost-of-modules.herokuapp.com/
npm 패키지의 사이즈 / gzip, 다운로드에 걸리는 시간이나 의존하는 모듈 등을 출력해주는 서비스입니다.
npmパッケージのサイズ/gzip、ダウンロードにかかる時間や依存などを表示してくれるサービス
소프트웨어, 도구, 라이브러리
photopea/UPNG.js: Fast and advanced PNG encoder (lossy / lossless) and decoder
PNG를 엔코딩 / 디코딩할 수 있는 작은 사이즈의 도구입니다.
scssfmt - Standard SCSS code formatter
sass(SCSS) 코드 포멧팅 도구입니다.
developit/preact-cli: 😺 Your next Preact PWA starts in 30 seconds.
github.com/developit/preact-cli
preact의 CLI 도구입니다.
preact를 사용한 Scaffolding 도구로 create/build/watch/serve 등의 개발용 서브 커멘드가 포함돼 있습니다.
