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 사용을 경고하는 데서 기인한다.
If JavaScript libraries are proving costly, replace them with smaller alternatives.
— Addy Osmani (@addyosmani) September 12, 2020
Lighthouse in @ChromeDevTools now recommends smaller libraries that improve bundle size. pic.twitter.com/VFe8TFV9Y5
We're working on adding a statement to the website. Will likely merge tomorrow.https://t.co/jq0m56Kynf
— Matt Johnson-Pint (@mattjohnsonpint) September 13, 2020
지금까지 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/
Moment.js 프로젝트 스테이터스에 관한 문서가 추가됐다.
Moment.js에 새로운 기능을 추가 하지 않는 유지 관리 모드로 전환하는 것과 대체 라이브러리로 Luxon, Day.js, date-fns, js-joda를 소개한다.
또, ECMA-402의 Intl
객체와 Temporal Proposal도 언급하고 있다.
- Luxon
- Day.js · 2kB JavaScript date utility library
- Manual | js-joda
- date-fns - modern JavaScript date utility library
Release 8.0 “President Ose” · postcss/postcss
github.com/postcss/postcss/releases/tag/8.0.0
PostCSS 8.0 릴리스.
Node.js 8 이하 지원 종료, ES2015 코드를 그대로 배포하도록, postcss.vendor
API 삭제.
PostCSS Plugin API 변경, 파서 개선, Source Map 지원 개선, TypeScript 지원.
- Release 10.0 “Alis volat propriis” · postcss/autoprefixer
- PostCSS 8.0: Plugin migration guide — Martian Chronicles, Evil Martians’ team blog
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 지원은 포함돼 있지 않다.
- Evan You // Keynote: Live Free Online Announcement // Vuejs Global Online - YouTube
- Introduction | Vue.js
Announcing TypeScript 4.1 Beta | TypeScript
devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/
TypeScript 4.1 Beta 릴리스.
Template Literal Types, Mapped Types에서 Key의 Remapping을 지원, 재귀적 Conditional Types 지원.
인덱스 접근 시 undefined
이 될 가능성이 있는 속성에 접근하는지 검사하는 noUncheckedIndexedAccess
옵션 추가, baseUrl
없이 paths
옵션을 지정할 수 있다.
비호환 변경으로 new Promise
시 resolve
함수의 인자가 Optional 하지 않게 변경된다.
Kea 2.2: The TypeScript Release | Kea 2.2
React 용 상태 관리 라이브러리 Kea 2.2 릴리스.
TypeScript를 지원한다.
아티클
JSchallenger
테스트를 통과할 수 있도록 함수를 구현하는 식으로 JavaScript를 학습할 수 있는 JavaScript 연습 문제 모음.
How to Simplify SVG Code Using Basic Shapes | CSS-Tricks
css-tricks.com/how-to-simplify-svg-code-using-basic-shapes/
SVG를 직접 작성해보는 튜토리얼.
Working with JavaScript Media Queries | CSS-Tricks
css-tricks.com/working-with-javascript-media-queries/
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 85에 실험적인 기능으로서 소스 코드 상의 순서를 요소에 표시하는 기능이 추가됐다.
CSS Grid / Flexbox 등 CSS 기능으로 요소의 순서를 변경하기 쉬워졌으며 이에 따라 스크린리더에서 읽을 때 발생할 수 있는 문제를 쉽게 디버깅 할 수 있다.
WCAG C27의 "DOM의 순서를 표시 순서와 일치시킨다"는 구현을 디버깅 할 용도의 기능.
- Source Order Matters | Adrian Roselli
- Source Order Viewer in Canary | Adrian Roselli
- C27: Making the DOM order match the visual order | Techniques for WCAG 2.0
- C27: DOM의 순서를 표시 순서와 일치시킨다 | WCAG 2.0 기법(일본어)
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 Media Query를 사용해 브라우저가 풀스크린 모드인지 감지하는 방법 소개.
display-mode: fullscreen
Media Query를 사용해 감지하며 풀스크린 시의 처리나 스타일을 작성할 수 있다.
Managing several displays with the Multi-Screen Window Placement API
web.dev/multi-screen-window-placement/
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/
페이스북의 Recoil과 비슷한 Observer Pattern의 상태 관리를 구현하면서 전체적인 구조를 살펴본다.
사이트, 서비스, 문서
flareact/flareact: Edge-rendered React framework built for Cloudflare Workers
Cloudflare Worker의 Edge에서 동작하는 React 프레임워크.
소프트웨어, 도구, 라이브러리
nextauthjs/next-auth: Authentication for Next.js
github.com/nextauthjs/next-auth
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
의존 라이브러리 없이 작성된 컬러 픽커 라이브러리.
BGJar | Free svg background image generator for your websites
SVG 패턴 배경을 생성하는 제너레이터 도구.
pmndrs/jotai: 👻 Primitive, flexible state management for React
Recoil에서 영감을 받아 개발된 React 용 상태 관리 라이브러리.
원시 값을 Atom으로 wrap, unwrap하는 API 제공.
Utils으로서 Atom을 사용한 High Level API 제공.