JSer.info #425 - 컴포넌트 개발 환경인 Storybook 5.0.0이 릴리스됐습니다.
- Release v5.0.0 · storybooks/storybook
- Storybook 5.0 – Storybook – Medium
- Meet Storybook 5.0's new design – Storybook – Medium
UI, 단축키, URL 구조 등이 변경됐습니다.
비호환적 변경 사항으로 웹팩 설정 인수가 변경 됐고 options addon이 비권장 됐습니다.
이전하는 방법은 아래 페이지에 정리돼 있으니 참고하시길 바랍니다.
Preact의 다음 메이저 버전 Preact X(10.0.0)의 α 버전이 공개됐습니다.
React 최신 업데이트에 맞춰 Fragment, componentDidCatch, Hooks, createContext, CSS Custom Properties를 대응합니다. 또 preact-compat이라는 별도의 패키지가 아니라 preact/compat으로 사용할 수 있도록 포함해 배포됩니다.
비호환적 변경사항으로 string ref, createClass와 같이 과거에 비권장됐던 기능이 삭제됐으며 setState가 비동기(React와 같이)로 state를 변경하도록 변경됐습니다. 또, VNode의 프로퍼티 구조가 변경됐습니다.
아래 Preact X에 관해 발표한 부분을 함께 살펴보면 도움이 될 거 같습니다.
금주의 Tweet
Page Weight Percentiles: overall & by resource type
— Katie Hempenius (@katiehempenius) March 5, 2019
If one of these categories is super high for a site, it's often an indicator that there's "low hanging fruit" performance wins to be had by optimizing that resource type.
(Data source: @HTTPArchive, Desktop Oct'18 data) pic.twitter.com/JSEsEUejE8
위 트윗에서 볼 수 있는 테이블은 HTTP Archive의 자료(data)를 이용해 웹사이트의 크기를 백분위수로 표현한 것 입니다. JS 열을 보면 웹사이트의 50%는 420KB 이지만 10%는 1.2MB 이상의 파일 크기로 이뤄져 있음을 알 수 있습니다.
이 HTTP Archive의 원자료는 누구라도 BigQuery로 접근할 수 있습니다. 흥미 있는 분은 아래 분서를 참고하시길 바랍니다.
헤드라인
February 2019 Security Releases | Node.js
nodejs.org/en/blog/vulnerability/february-2019-security-releases/
Node.js 보안 수정 릴리스, Node.js LTS 모든 버전을 지원하는 보안 수정이 이뤄졌습니다.
keep-alive 관련 DoS 두 건(모두 impact는 low)과 OpenSSL 취약점(Node 10+는 영향 없음)이 수정됐습니다.
Ember.js - Ember 3.8 Released
emberjs.com/blog/2019/02/27/ember-3-8-released.html
Ember 3.8이 릴리스 됐습니다.
Element Modifier Manager, Array helper가 추가됐습니다.
Release v5.0.0 · storybooks/storybook
github.com/storybooks/storybook/releases/tag/v5.0.0
Storybook 5.0.0이 릴리스됐습니다.
디자인과 URL 구조와 단축키 그리고 웹팩 커스텀 설정 인수가 변경됐습니다.
- Storybook 5 Migration Guide – Storybook – Medium
- Meet Storybook 5.0's new design – Storybook – Medium
- Storybook 5.0 – Storybook – Medium
Release Preact X is here 🎉 · developit/preact
github.com/developit/preact/releases/tag/10.0.0-alpha.0
Preact X α 버전이 릴리스 됐습니다.
Fragment, componentDidCatch, Hooks, createContext, CSS Custom Properties를 대응합니다.
또, preact-compat를 별도의 패키지가 아니라 preact/compat로 통합했습니다.
TestCafe v1.1.0 Released | TestCafe
devexpress.github.io/testcafe/blog/testcafe-v1-1-0-released.html
TestCafe 1.1.0이 릴리스 됐습니다.
TypeScript 3.3 지원, TypeScript의 타입 개선이 이뤄졌습니다.
아티클
HTML Snapshot Testing with Node
spin.atomicobject.com/2019/02/13/html-snapshot-testing-with-node/
HTML의 스냅샷을 비교하는 스냅샷 테스트에 관해 작성돼 있습니다.
스냅샷 테스트를 실제로 어떻게 구현하는지 소개합니다.
Progressive React
React로 개발한 웹앱을 어떻게 개선할 수 있는지 이야기합니다.
shouldComponentUpdate를 이용한 불필요한 렌더링 최소화, 번들 크기와 Code Splitting, 캐시와 SSR을 이용한 초기 출력 개선, 크리티컬 패스 최적화 등 React 레벨 뿐 아니라 앱 레벨에서의 최적화 대해 작성돼 있습니다.
webpack과 Babel의 기본을 이해한다(1) ―webpack 편― Qiita(읿본어)
qiita.com/koedamon/items/3e64612d22f3473f36a4
웹팩, Babel의 역할과 설정 방법을 튜토리얼 형식으로 소개합니다.
사이트, 서비스, 문서
Package Diff
npm 패키지 버전 간의 비교(diff)를 제공하는 서비스입니다.
소프트웨어, 도구, 라이브러리
dyatko/arkit: Visualises JavaScript, TypeScript and Flow codebases as meaningful and committable architecture diagrams
파일을 토대로 아키텍처 다이어그램을 생성하는 도구입니다.
코드 베이스가 되는 파일을 지정하고 구조 분석해 Plant UML이나 SVG 등의 그림으로 변환해줍니다.
autoNumeric/autoNumeric: autoNumeric is a standalone library that provides live as-you-type formatting for international numbers and currencies.
github.com/autoNumeric/autoNumeric/
통화 입력 처리를 다루는 라이브러리입니다.
기존 입력 요소에 바인딩하여 통화 입력에 대해 유효성 검증이나 단위 포맷 등을 제공합니다.
pikapkg/web: Install npm dependencies that run directly in the browser. No Browserify, Webpack or import maps required.
Rollup를 사용해 기존 모듈을 ES Modules로 변환하는 도구입니다.
변환된 모듈은 브라우저에서 ES module로 import 할 수 있습니다.
