Fork me on GitHub

2019-01-16: Storybook 4.1, TypeScript로 단계적 전환, 2018년 스타 수 증가율

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #418 - Storybook 4.1을 릴리스 했습니다.

Preview 부분(area)와 Manager 부분을 분리하여 성능을 개선했습니다.
Storybook 4.0은 React의 Context API를 의존하고 있어 React 16.3 이상의 환경에서만 동작했습니다만 Storybook 4.1에서 React 15.x에서도 동작하도록 하위호환을 위한 수정도 함께 진행했습니다.

그리고 Storybook Addon Cssresources도 함께 추가했습니다.


Babel을 이용하고 있는 JavaScript 라이브러리를 TypeScript(tsc)로 변경하는 방법 | Web Scratch(일본어)에서는 TypeScript로의 이전을 단계적으로 수행하는 방법에 대해 이야기합니다.
Babel를 이용해 ES2015 문법으로 작성돼 있는 라이브러리를 예로 들어 한 단계씩 TypeScript로 이전하는 방법을 소개합니다.


GitHub의 스타의 증가율을 정리한 JavaScript Rising Start 2018년 버전을 공개했습니다.

프런트 엔드 프레임워크, 프레임워크 별 에코 시스템, Node.js, 모바일, 컴파일러(Transpiler), 빌드 도구, 테스트 프레임워크, 에디터, CSS in JS, 정적 사이트 개발 도구, GraphQL 등 항목별로 스타 증가율이 정리돼 있습니다.


헤드라인


Storybook 4.1: Need for Speed – Storybook – Medium

medium.com/storybookjs/storybook-4-1-need-for-speed-b05fd5f1e83d

JavaScript UI library ReleaseNote

Storybook 4.1을 릴리스 했습니다.
성능 개선을 개선하고 React 15.x를 하위 호환하며 CSS Resources addon를 추가했습니다.


Release Notes for Safari Technology Preview 73 | WebKit

webkit.org/blog/8555/release-notes-for-safari-technology-preview-73/

safari ReleaseNote

Safari Technology Preview 73을 릴리스 했습니다.
globalThis 지원하며 Web Inspector에서 m3u8의 내용을 텍스트로 표시할 수 있습니다.


Video.js 7.4 | Video.js Blog

blog.videojs.com/video-js-7-4/

JavaScript video library ReleaseNote

Video.js 7.4을 릴리스했습니다.
Live UI를 지원하며 VoiceOver를 대응하는 등 접근성을 위한 개선이 이뤄졌습니다.


Release v3.0.0 · juliangarnier/anime

github.com/juliangarnier/anime/releases/tag/v3.0.0

JavaScript animation library ReleaseNote

애니메이션 라이브리 anime 3.0.0을 릴리스했습니다.
새로운 이징(easing) 함수와 라이프 사이클 콜백을 추가했고 keyframes 시스템 개선이 이뤄졌습니다.
또, 일부 API가 이름 변경 되는 등 비호환 변경 사항을 포함합니다.


Release 1.1.0 · avajs/ava

github.com/avajs/ava/releases/tag/v1.1.0

JavaScript testing ReleaseNote

AVA 1.1.0을 릴리스했습니다.
실행 중인 테스트 파일의 경로를 가져올 수 있는 meta 객체를 추가했습니다.


DoneJS 3

www.bitovi.com/blog/donejs-3

JavaScript library ReleaseNote

DoneJS 3를 릴리스했습니다.
CanJS 5.0, StealJS 2.0으로 버전을 갱신 했습니다.


아티클


abel을 이용하고 있는 JavaScript 라이브러리를 TypeScript(tsc)로 변경하는 방법 | Web Scratch(일본어)

efcl.info/2019/01/09/babel-to-typescript-library/

JavaScript babel TypeScript article tutorial

라이브러리의 코드 베이스를 TypeScript로 이전하는 방법을 소개합니다.
Babel로 하던 ES2015의 변환 처리를 tsc로 전환한 후 코드 베이스를 TypeScript로 변경하는 과정을 단계적으로 소개하는 튜토리얼입니다.


TypeScript 2.8: Conditional Types — Marius Schulz

blog.mariusschulz.com/2019/01/09/typescript-2-8-conditional-types

TypeScript article

TypeScript 2.8에 추가된 Conditional Types와 이를 사용한 타입 분기 처리에 대해 다양한 예와 함께 소개합니다.
NonNullable, Infer 사용 예에 대해서도 작성돼 있습니다.


Computer science in JavaScript 2019: Linked list - Human Who Codes

humanwhocodes.com/blog/2019/01/computer-science-in-javascript-linked-list/

JavaScript algorithm article

JavaScript에서 LinkedList를 구현해보면서 그 데이터 구조에 대해 학습할 수 있는 글입니다.


Vue + Vue Router + Vuex + Laravel로 사진 공유 앱을 만들자(1) 인트로덕션 | Hypertext Candy(일본어)

www.hypertextcandy.com/vue-laravel-tutorial-introduction

Vue php tutorial article JavaScript

Vue.js + Vue Router + Laravel를 사용한 SPA 애플리케이션을 개발하는 연재 글입니다.
사진 공유 앱을 예로 클라이언트 사이드와 서버 사이드를 모두 구현해보면 튜토리얼입니다.


How To Learn CSS — Smashing Magazine

www.smashingmagazine.com/2019/01/how-to-learn-css/

CSS article

CSS를 어떻게 학습하는게 좋을지 정리한 글입니다.
Selector, Box 모델, Flow, Layout, Aligment, Sizing 등 CSS의 기초 요소에 대해 설명하고 리소스를 소개합니다.


Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word] — Smashing Magazine

www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/

performance article browser

프런트엔드를 위한 성능 체크리스트를 정리한 글입니다.


Fast GIF parsing on the web with WASM + Wuffs - DEV Community 👩‍💻👨‍💻

dev.to/chromiumdev/fast-gif-parsing-on-the-web-with-wasm--wuffs-48l4

WebAssembly article

mscripten + WebAssembly를 이용해 GIF를 파싱하는 방법을 소개합니다.
binding을 작성하는 방법과 디코드 처리 그리고 Canvas로 그리는 과정에 대해 작성돼 있습니다.


사이트, 서비스, 문서


2018 JavaScript Rising Stars

risingstars.js.org/2018/en/

JavaScript github

JavaScript 프레임워크나 도구 등의 GitHub 스타 증가율 순위를 공개했습니다.


Markdown Driven한 scaffolding 도구를 만들었다 - wadackel.me(일본어)

blog.wadackel.me/2019/scaffdog/

Markdown Tools node.js

Markdown 파일에 여러 개의 파일 템플릿을 작성해 파일을 생성할 수 있는 도구를 소개합니다.


FromJS - An experimental data-flow analysis tool for front-end JavaScript

www.fromjs.com/

Chrome DOM Extension babel debug Tools

화면에 렌더링돼 있는 문자열이 코드의 어디에서 생성되고 있는지를 DOM 인스팩트할 수 있는 도구입니다.
HTML을 생성하는 DOM API를 덮어써 트레이스 가능하게 만든 Chrome을 설치해 디버깅할 수 있도록 제공합니다.


소프트웨어, 도구, 라이브러리


DominicTobias/keshi: A better in-memory cache for Node and the browser

github.com/DominicTobias/keshi

JavaScript library

브라우저와 Node.js에서 사용할 수 있는 인메모리 캐시 라이브러리입니다.


Pull Request to this article
JSer.info Slackに参加する