Fork me on GitHub

2019-12-31: Ember 3.15 Octane, TypeScript로 작성한 Library를 공개하는 순서

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #468 - Ember 3.15가 릴리스 됐습니다.

Ember.js 3.15의 큰 변경 사항으로 Octane Edition이 릴리스에 포함됐습니다.
Edition은 Ember의 프로그래밍 모델을 나타내는 개념으로 현재는 Octane Edition 만 추가됐습니다.

An edition represents a cohesive programming model, and releasing a new edition represents a shift in the programming model due to new features and concepts being added to Ember. Ember Octane is the first new edition that was added to Ember.

-- https://emberjs.com/editions/octane

Octane Edition의 큰 변경 사항으로는 다음 세 가지가 있습니다.

  • Glimmer Components 도입
    • Before: Classic Components(component.extend)
  • Element Modifiers의 동작 구현
    • Before: mixin
  • @tracked를 사용한 Reactive한 모델 구현
    • Before: computed 함수

이번 Octane Edition 릴리스에 맞춰 튜토리얼 등도 개편됐으며 Dev Tools의 갱신도 이뤄졌습니다. 자세한 내용은 다음 글을 참고하시기 바랍니다.


공개 된지 좀 된 글로 JSMonday - Publishing a TypeScript Library에는 라이브러리를 npm에 공개하고 테스트 까지의 과정이 튜토리얼 방식으로 소개돼 있습니다.

디렉터리 구조나 tsc(TypeScript Compiler)로 컴파일하면 어떻게 되는지, Jest를 사용한 테스트나 Coverage를 높이는 방법 등 대략적인 흐름이 정리돼 있습니다.

이어서 package.json 필드와 기본적인 npm 명령어 사용 방법, Semver 등에 대해서 살펴보고 싶은 분은 다음 기사를 찾고하면 도움이 될 것 같습니다.


헤드라인


Ember.js - Ember 3.15 "Octane" Released

blog.emberjs.com/2019/12/20/ember-3-15-released.html

Ember ReleaseNote

Ember 3.15가 릴리스 됐습니다.
Ember Octane가 정식으로 릴리스돼 ember new의 기본이 됐습니다.
또, Component#isVisible, partial, window.ENV가 비권장 됐습니다.


아티클


New WebKit Features in Safari 13 | WebKit

webkit.org/blog/9674/new-webkit-features-in-safari-13/

safari article

iOS / iPad / macOS 각 환경에 대한 Safari 13의 변경 사항이 소개돼 있습니다.
Pointer Events, Visual Viewport API, ITP(Intelligent Tracking Prevention), FIDO2, WebDriver의 지원 등에 대해서 이야기합니다.


JSMonday - Publishing a TypeScript Library

www.jsmonday.dev/articles/18/publishing-a-typescript-library

TypeScript library

TypeScript로 라이브러리를 작성하고 npm publish 하기까지의 과정을 튜토리얼 방식으로 소개합니다.
TypeScript 도입, Jest 테스트, Codecov 커버리지, npm run-script 설정 등에 대해서 작성돼 있습니다.


Making of: Best of 2019 – Johan Ronsse

johanronsse.be/2019/12/28/making-of-best-of-2019/

article Development

Best of 2019이라는 사이트를 어떻게 만들었는지 소개하는 글입니다.
Svelte와 CSS 프레임워크 Ygdir를 사용해 개발, Figma를 사용한 디자인, Notion을 사용한 컨텐츠 관리 방법에 대해서 이야기합니다.


Discovering Svelte: Adding, Editing and Estimating Tasks In The Pomodoro Technique App | Barbarian Meets Coding

www.barbarianmeetscoding.com/blog/2019/12/29/discovering-svelte-adding-some-tasks-and-pomodoros

Svelte JavaScript article

TODO 애플리케이션을 만들어 보면서 Svelte에 대해서 학습하는 글입니다.
Svelte의 LifeCyle hook, $: 라벨을 사용한 Reactive한 구조에 대해서 설명합니다.


초심자 용 package.json 핸즈온 - Qiita(일본어)

qiita.com/segur/items/6eebb70ec2de03016dde

node npm article

npm 명령어와 package.json에 대해서 초심자를 대상으로 작성한 튜토리얼 글입니다.
패키지 설치와 제거, SemVer, Lock 파일에 대해서 소개합니다.


Node.js에서 CLI를 만드는 방법과 편리한 라이브러리 정리 - Qiita(일본어)

qiita.com/toshi-toma/items/ea76b8894e7771d47e10

node console Tools article

Node.js로 CLI를 만들 경우 개발 방법과 CLI 용 라이브러리가 소개돼 있습니다.


React.memo를 사용한 성능 최적화에 대해서 - 30세 부터 프로그래밍(일본어)

numb86-tech.hatenablog.com/entry/2019/12/20/222412

React article performance

React.memouseCallback를 사용한 메모화와 성능 최적화에 대해서 소개돼 있습니다.


Base Web - Visual Regression Testing

baseweb.design/blog/visual-regression-testing/

browser testing article

Visual Regression Testing을 소개하는 글입니다.
Visual Regression Testing의 목적, 도입 방법, 워크플로우 등에 대해서 이야기합니다.


Ember.js - Octane is Here

blog.emberjs.com/2019/12/20/octane-is-here.html

Ember article

Ember 3.15에 도입된 Octane을 소개합니다.
Glimmer Components 도입, Element Modifiers에서 LifeCyleHooks를 사용한 동작 구현, @tracked를 사용한 Reactive한 모델 구현 등이 이뤄졌습니다.
그 외 튜토리얼 개편, Dev Tools가 갱신됐습니다.


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


bbc/peaks.js: JavaScript UI component for interacting with audio waveforms

github.com/bbc/peaks.js

JavaScript sound library

음성의 파형을 출력하는 UI 컴포넌트입니다.
Web Audio 기반으로 파형을 생성하거나 audiowaveform을 사용해 미리 음성 파형을 생성해 사용할 수 있습니다.


ganapativs/react-spectrum: Generate colorful text placeholders 🎨

github.com/ganapativs/react-spectrum

React library

다채로운 텍스트 자리표시자(placeholder)를 생성하는 React 컴포넌트입니다.


saitoeku3/use-lazyload-ref: 🖼️Custom hook to use lazy load easily

github.com/saitoeku3/use-lazyload-ref

React library JavaScript

refdata-src 속성을 지정하여 src 속성의 지연 로드를 할 수 있는 React Hooks를 사용한 라이브러리입니다.


Release Tesseract.js v2.0.0 · naptha/tesseract.js

github.com/naptha/tesseract.js/releases/tag/v2.0.0

JavaScript OCR library WebAssembly

Emscripten를 사용한 OCR라이브러리 Tesseract.js 2.0이 릴리스됐습니다.
tesseract v4.1로 갱신, 여러개 원어 인식 지원, 이미지 포맷(png, jpg, bmp) 지원, WebAssembly나 WebWorker를 지원하여 성능 개선이 이뤄졌습니다.


Pull Request to this article
記事を紹介する