Fork me on GitHub

2020-09-21: Moment.js 스테이터스, PostCSS 8.0.0, Vue 3.0.0, DOM의 순서와 표시 순서 일치

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #506 - Moment.js 웹사이트에 Project Status가 추가됐다.

Moment.js는 더이상 새로운 기능을 추가하지 않는 유지 관리 모드로 전환된다.
호환성은 유지하지만 새로운 기능이나 구조를 변경하기 어려운 상태이므로 대체 라이브러리 사용을 권장한다.

대체 라이브러리로는 Luxon, Day.js, js-joda, date-fns가 소개돼 있으며 Intl API 혹은 사양 책정 중인 Temporal도 언급하고 있다.

프로젝트 스테이터스를 명시하게 된 원인은 Chrome Dev Tools의 Lighthouse에서 moment.js 사용을 경고하는 데서 기인한다.

지금까지 Moment.js의 스테이터스는 조금은 암묵적이긴 했지만, 이번을 계기로 Luxon 등의 후계 혹은 대체 라이브러리가 있음을 알리며 새로운 프로젝트에서 Moment.js를 사용하는 것을 비추천한다고 명시하게 됐다.

관련


JavaScript로 CSS를 변환 / 확장하는 도구인 PostCSS 8.0.0이 릴리스 됐다.

Node.js 8 이하 지원 종료, ES2015 코드를 그대로 배포하도록, postcss.vendor API 삭제 등이 이뤄졌다.
이어 PostCSS Plugin API 변경, 파서 개선, Source Map 지원 개선, TypeScript를 지원한다.

변경된 Plugin API와 이전(migration)에 대한 것은 아래 문서에 설명 돼 있다.

또, PostCSS 8.0.0에 맞춰 Autoprefixer 10.0도 릴리스 됐다.


Vue 3.0.0이 정식 릴리스 됐다.

기반 코드를 TypeScript로 재작성, 코어 모듈의 패키지화가 이뤄졌다.
Composition API, Teleport, Fragments를 새롭게 지원한다.
이어 <script setup><style vars>를 실험적으로 지원한다.

2.x와의 비호환 변경으로는 Vue.* 이하 글로벌 API를 인스턴스 API로 이전, Template Directive의 동작 방식 변경, 라이프사이클 옵션명 이름 변경, Filter 삭제 등이 있다.

삭제되거나 변경된 API는 다음 이전 가이드에 정리돼 있다.

또, Vue 3.0.0에는 IE 11 지원이 포함돼 있지 않지만 향후 마이너 업데이트를 거쳐 지원할 계획이라고 한다.


헤드라인


Moment.js | Docs

momentjs.com/docs/#/-project-status/

JavaScript news library

Moment.js 프로젝트 스테이터스에 관한 문서가 추가됐다.
Moment.js에 새로운 기능을 추가 하지 않는 유지 관리 모드로 전환하는 것과 대체 라이브러리로 Luxon, Day.js, date-fns, js-joda를 소개한다.
또, ECMA-402의 Intl 객체와 Temporal Proposal도 언급하고 있다.


Release 8.0 “President Ose” · postcss/postcss

github.com/postcss/postcss/releases/tag/8.0.0

CSS library ReleaseNote JavaScript

PostCSS 8.0 릴리스.
Node.js 8 이하 지원 종료, ES2015 코드를 그대로 배포하도록, postcss.vendor API 삭제.
PostCSS Plugin API 변경, 파서 개선, Source Map 지원 개선, TypeScript 지원.


Release v3.0.0 One Piece · vuejs/vue-next

github.com/vuejs/vue-next/releases/tag/v3.0.0

Vue 3.0.0 릴리스.
기반 코드를 TypeScript로 재작성, 코어 모듈 패키지화.
Composition API, Teleport, Fragments 지원.
<script setup><style vars> 실험적으로 지원.
비호환 변경으로 Vue.* 이하 글로벌 API를 인스턴스 API로 이전, Template Directive 동작 변경, 라이프사이클 옵션명 이름 변경, Filter 삭제가 이뤄졌다.
또, Vue 3.0.0 시점에서 IE 11 지원은 포함돼 있지 않다.


Announcing TypeScript 4.1 Beta | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/

TypeScript ReleaseNote

TypeScript 4.1 Beta 릴리스.
Template Literal Types, Mapped Types에서 Key의 Remapping을 지원, 재귀적 Conditional Types 지원.
인덱스 접근 시 undefined이 될 가능성이 있는 속성에 접근하는지 검사하는 noUncheckedIndexedAccess 옵션 추가, baseUrl 없이 paths 옵션을 지정할 수 있다.
비호환 변경으로 new Promiseresolve 함수의 인자가 Optional 하지 않게 변경된다.


Kea 2.2: The TypeScript Release | Kea 2.2

kea.js.org/blog/kea-2.2/

React JavaScript library ReleaseNote

React 용 상태 관리 라이브러리 Kea 2.2 릴리스.
TypeScript를 지원한다.


아티클


JSchallenger

www.jschallenger.com/

JavaScript tutorial

테스트를 통과할 수 있도록 함수를 구현하는 식으로 JavaScript를 학습할 수 있는 JavaScript 연습 문제 모음.


How to Simplify SVG Code Using Basic Shapes | CSS-Tricks

css-tricks.com/how-to-simplify-svg-code-using-basic-shapes/

SVG tutorial

SVG를 직접 작성해보는 튜토리얼.


Working with JavaScript Media Queries | CSS-Tricks

css-tricks.com/working-with-javascript-media-queries/

JavaScript CSS article

JavaScript에서 MediaQuery를 이용하는 방법 소개.
window.matchMedia 사용 방법, resize 이벤트를 사용할 때의 성능 차이 소개.


Introducing Source Order Viewer in the Microsoft Edge DevTools - Microsoft Edge Blog

blogs.windows.com/msedgedev/2020/09/15/source-order-viewer-edge-devtools/

MSEdge Chrome debug article accessibility

MSEdge/Chrome 85에 실험적인 기능으로서 소스 코드 상의 순서를 요소에 표시하는 기능이 추가됐다.
CSS Grid / Flexbox 등 CSS 기능으로 요소의 순서를 변경하기 쉬워졌으며 이에 따라 스크린리더에서 읽을 때 발생할 수 있는 문제를 쉽게 디버깅 할 수 있다.
WCAG C27의 "DOM의 순서를 표시 순서와 일치시킨다"는 구현을 디버깅 할 용도의 기능.


How to detect fullscreen mode using CSS – Amit Merchant – A blog on PHP, JavaScript and more

www.amitmerchant.com/how-to-detect-fullscreen-mode-using-css/

CSS JavaScript article

CSS Media Query를 사용해 브라우저가 풀스크린 모드인지 감지하는 방법 소개.
display-mode: fullscreen Media Query를 사용해 감지하며 풀스크린 시의 처리나 스타일을 작성할 수 있다.


Managing several displays with the Multi-Screen Window Placement API

web.dev/multi-screen-window-placement/

JavaScript Chrome article WebPlatformAPI

Chrome 86에 Origin Trial로 구현돼 있는 Multi-Screen Window Placement API 소개.
멀티 스크린 판정, 각각의 스크린 정보 취득, 스크린 변경 탐지, 풀스크린할 스크린을 지정하는 방법 등이 작성돼 있다.


Rewriting Facebook's "Recoil" React library from scratch in 100 lines

bennetthardwick.com/blog/recoil-js-clone-from-scratch-in-100-lines/

JavaScript React library article

페이스북의 Recoil과 비슷한 Observer Pattern의 상태 관리를 구현하면서 전체적인 구조를 살펴본다.


사이트, 서비스, 문서


flareact/flareact: Edge-rendered React framework built for Cloudflare Workers

github.com/flareact/flareact

React cdn library

Cloudflare Worker의 Edge에서 동작하는 React 프레임워크.


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


nextauthjs/next-auth: Authentication for Next.js

github.com/nextauthjs/next-auth

React library OAuth

Next.js 용 Authentication library.
Auth0, Apple, Facebook, Google 등 여러가지 프로바이더를 지원한다.


web-padawan/vanilla-colorful: A tiny color picker custom element for modern web apps

github.com/web-padawan/vanilla-colorful

JavaScript library color

의존 라이브러리 없이 작성된 컬러 픽커 라이브러리.


BGJar | Free svg background image generator for your websites

bgjar.com/

SVG Tools

SVG 패턴 배경을 생성하는 제너레이터 도구.


pmndrs/jotai: 👻 Primitive, flexible state management for React

github.com/pmndrs/jotai

JavaScript React library

Recoil에서 영감을 받아 개발된 React 용 상태 관리 라이브러리.
원시 값을 Atom으로 wrap, unwrap하는 API 제공.
Utils으로서 Atom을 사용한 High Level API 제공.


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