JSer.info #369 - 테스트 프레임워크 AVA 1.0.0β가 공개됐습니다.
Babel 7β를 사용하며 이 영향으로 powerAssert 등 기존 변환 옵션이 변경됐습니다.
babel과 compileEnhancements 옵션을 제공, 통일적으로 관리할 수 있게 돼 있으며 두 옵션 모두 false로 지정하면 Babel을 사용한 변환을 일절 하지 않습니다.
{
"ava": {
"babel": false,
"compileEnhancements": false
}
}
test 함수의 첫 번째 인수로 테스트의 제목을 필수로 전달해야 하므로 이제 아래와 같이 제목 없는 테스트는 이용할 수 없습니다.
// 에러
test(t => t.pass());
AVA 1.0.0β는 ava@next로 사용해 볼 수 있습니다.
npm install ava@next
TypeScript 2.7이 릴리스 됐습니다.
클래스 필드의 초기화 검사를 엄격히 실시하는 strictPropertyInitialization과 Definite assignment assertions(!)가 추가됐습니다. 또, Babel 그리고 Webpack과 동일한 런타임 동작을 위한 --esModuleInterop 컴파일 옵션을 제공합니다.
자세한 내용은 아래 일본어 기사를 참고하세요.
MDN browser compatibility data: Taking the guesswork out of web compatibility – Mozilla Hacks – the Web developer blog에는 MDN이 제공하는 브라우저 호환성 데이터와 이 데이터를 사용하는 방법에 관해 작성돼 있습니다.
MDN의 기능 레퍼런스 페이지에는 그 기능을 지원하고 있는 브라우저나 버전 목록 정보가 제공되고 있습니다.
이 데이터는 mdn-browser-compat-data라는 npm 패키지로도 사용할 수 있게 됐습니다. 프로젝트 저장소는 다음과 같습니다.
헤드라인
Node v9.5.0 (Current) | Node.js
nodejs.org/en/blog/release/v9.5.0/
Node v9.5.0이 릴리스 됐습니다.
performance.clearEntries(name)를 지원하며 cluster.settings에 cwd 옵션이 추가됐습니다.
Announcing TypeScript 2.7 | TypeScript
blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/
TypeScript 2.7이 릴리스 됐습니다.
클래스 프로퍼티의 Strict 옵션, Definite assignment assertions(!), Babel 그리고 Webpack과 동일한 런타임 동작을 위한 --esModuleInterop 컴파일 옵션 등이 추가됐습니다. 또, Tuple, in, instanceof 오브젝트 리터럴의 디자인이 개선됐습니다.
Release 1.0.0-beta.1 · avajs/ava
github.com/avajs/ava/releases/tag/v1.0.0-beta.1
AVA 1.0.0β가 릴리스 됐습니다.
Babel 7β를 사용하며 test 작성히 테스트의 제목을 필수로 지정하도록 변경 됐습니다. 또, powerAssert의 비활성화 옵션을 babel과 compileEnhancements 옵션 절에서 관리할 수 있도록 변경 됐습니다.
V8 JavaScript Engine: V8 release v6.5
v8project.blogspot.com/2018/02/v8-release-65.html
V8 6.5가 릴리스됐습니다.
Unstruted code mode가 기본적으로 활성화 됐으며 WebAssembly의 Streaming compilation을 지원합니다. 또, 배열과 Array 메서드의 개선이 이뤄졌습니다.
아티클
Bootstrap 4.0 Release: What’s New?
auth0.com/blog/whats-new-in-bootstrap4/
BootStrap 4.0의 변경 사항에 대해 정리돼 있는 글입니다.
Stimulus 1.0: A modest JavaScript framework for the HTML you already have
Stimulus 1.0이 릴리스됐습니다.
Rails의 Turbolinks와 연계할 수 있는 JavaScript 프레임워크입니다.
HTML 템플릿과 JavaScript 컨트롤러를 조합해 애플리케이션을 개발합니다.
Automatic visual diffing with Puppeteer – Monica Dinculescu
meowni.ca/posts/2017-puppeteer-tests/
Puppeteer를 사용한 Visual Diff 테스트에 관해 작성돼 있습니다.
스크린샷을 Pixelmatch로 비교하고 이미지 Diff를 바탕으로 테스트를 실행하는 방법에 대해 소개합니다.
Introducing React Easy State | @RisingStack
blog.risingstack.com/introducing-react-easy-state/
ES Proxy를 사용한 상태 관리 라이브러리 react-easy-state에 대해 소개합니다.
Debugging JavaScript With A Real Debugger You Did Not Know You Already Have — Smashing Magazine
www.smashingmagazine.com/2018/02/javascript-firefox-debugger/
Firefox의 개발자 도구와 debugger.html에 대해 작성돼 있습니다.
Jest 등을 사용하지 않고 스냅샷 테스트를 작성하다 | Web Scratch(일본어)
efcl.info/2018/02/02/snapshot-test/
특별한 라이브러리를 사용하지 않고 스탭샷 테스트를 구현하는 방법에 대해 작성돼 있습니다.
Testing your npm package before releasing it using Verdaccio + ngrok
blog.strapi.io/testing-npm-package-before-releasing-it-using-verdaccio-and-ngrok/
npm 패키지를 publish 하기 전에 테스트를 실행하는 방법에 대해 소개합니다.
Private npm registry인 Verdaccio에 publish 하고 localhost 터널인 ngrok를 사용해 테스트 하는 방법이 작성돼 있습니다.
Debugging CSS Performance with Chrome’s Profiling Tools - Ada Developers Academy
adadevacademy.tumblr.com/post/170121818942/debugging-css-performance-with-chromes-profiling
React의 문제로 인지하고 여러가지 시도 끝에 CSS 렌더링 문제 였던 경우를 토대로 CSS의 성능 문제에 대해 이야기합니다. 해당 문제를 인라인 CSS, gradient를 정정하여 해결하고 개발자 도구에서는 이 문제가 어떻게 보였었는지 작성돼 있습니다.
Introducing Node Clinic - A performance toolkit for Node.js developers | nearForm
www.nearform.com/blog/introducing-node-clinic-a-performance-toolkit-for-node-js-developers/
Node.js 애플리케이션 성능 모니터링 도구인 Clinic를 소개합니다.
대시보드에서 CPU, 메모리, 이벤트 루프의 지연 등을 살펴 볼 수 있습니다.
How JavaScript works: The building blocks of Web Workers + 5 cases when you should use them
WebWorker의 사용 방법이나 유스케이스에 대해 작성돼 있습니다.
사이트, 서비스, 문서
MDN browser compatibility data: Taking the guesswork out of web compatibility – Mozilla Hacks – the Web developer blog
hacks.mozilla.org/2018/02/mdn-browser-compatibility-data/
MDN에서 사용하고 있는 브라우저 지원 상황 종합 데이터를 npm 패키지로 사용할 수 있게 됐습니다.
이 데이터의 사용 방법이나 접근한 사이트가 지원하는 브라우저 정보를 제공하는 파이어폭스 확장 플러그인에 대해서도 작성돼 있습니다.
소프트웨어, 도구, 라이브러리
thejameskyle/glow: Make your Flow errors GLOW
Flow의 에러를 CodeFrame으로 출력하고 glob으로 대상을 필터링할 수 있는 도구입니다. 또 Watch 모드를 지원합니다.
FullHuman/purgecss: Remove unused css
사용하지 않는 CSS 코드를 삭제하는 도구입니다.
컨텐츠(HTML, JS 등)과 CSS를 전달해 불필요한 CSS를 삭제할 수 있습니다.
