JSer.info #546 - ECMAScript 2021(ES2021)이 Ecma International에 승인돼 정식 릴리스 됐다.
ES2021에선 주로 다음과 같은 기능과 문법이 추가됐다.
- Numeric separators
- Promise combinators
- Weak references and finalizers
String.prototype.replaceAll- Logical assignment
또, JavaScript 입문서 JavaScript Primer(일본어)도 ES2021에 대응하여 개정이 이뤄졌다.
Storybook 6.3 릴리스.
치수(measure), 아웃라인 등 시각적인 디버깅 기능이 추가됐다.
또, @storybook/testing-vue와 @storybook/testing-react로 테스트 지원, Angular 12와 Lit 2 지원, webpack 5 지원 안정화, Vite를 지원한다.
Demystifying styled-components
styled-components의 작은 복제 버전을 만들면서 라이브러리의 구조와 동작 설명.
CSS in JS를 구현해가며 어떻게 자바스크립트를 사용해 스타일을 조작하고 있는지 또, 컴포넌트 스타일 합성 등에 관해 설명한다
헤드라인
[Release News] TOAST UI Editor 3.0 is here! | by TOAST UI | Jun, 2021 | Medium
toastui.medium.com/release-news-toast-ui-editor-3-0-is-here-6ed2a09160e6
Markdown 에디터 TOAST UI Editor 3.0 릴리스.
Prosemirror 기반으로 변경하는 하고 CodeMirror, squire, to-mark 의존 삭제.
Markdown 문법을 커스텀 가능하도록, widgetRules 추가, 디자인 변경.
Ecma International approves new standards - Ecma International
www.ecma-international.org/news/ecma-international-approves-new-standards-4/
ECMAScript 2021 정릴 릴리스.
Release 3.0.0 · developit/mitt
github.com/developit/mitt/releases/tag/3.0.0
Event Emitter 라이브러리 Mitt 3.0 릴리스.
.off(type)으로 같은 type 모든 listeners를 제거할 수 있도록, TypeScript의 타입 선언 개선, exports 파일 대응.
Storybook 6.3
storybook.js.org/blog/storybook-6-3/
Storybook 6.3 릴리스.
치수(measure), 아웃라인 등 시각적 디버깅 기능 추가, @storybook/testing-vue와 @storybook/testing-react로 테스트 지원.
Angular 12와 Lit 2 지원, webpack 5 지원 안정화, Vite 지원.
--modern 모드에서 ESM으로 실행할 수 있도록
Release 7.6.0 · cypress-io/cypress
github.com/cypress-io/cypress/releases/tag/v7.6.0
Cypress 7.6.0 릴리스.
.type()의 기본 지연 시간을 변경할 수 있도록 변경, cypress open 개선, cy.intercept의 req 에 query 프로퍼티 추가.
webpack 5 사용시 간헐적으로 행(hang) 걸리는 문제 수정, cy.intercept의 멀티바이트 문제 수정 등.
Release 3.0.0 · micromark/micromark
github.com/micromark/micromark/releases/tag/3.0.0
CommonMark를 따르는 Markdown 파서 엔진인 micromark 3.0.0 릴리스.
Release v1.0.0 · solidjs/solid
github.com/solidjs/solid/releases/tag/v1.0.0
JSX 문법을 지원하는 선언적 UI 컴포넌트 프레임워크 Solid 1.0.0 릴리스.
Solid는 가상 돔을 사용하지 않으며 템플릿을 실제 DOM 노드로 컴파일한다.
Release v5.41.0 · webpack/webpack
github.com/webpack/webpack/releases/tag/v5.41.0
webpack 5.41.0 릴리스.
experiments.outputModule 실험 기능 플래그를 true로 설정한 상태에서 ECMAScript Modules 형식 출력, Dynamic Import를 사용한 chunk 가져오기 등의 기본적인 구현을 제공한다.
아티클
An updated timeline for Privacy Sandbox milestones
blog.google/products/chrome/updated-timeline-privacy-sandbox-milestones/
Chrome의 Privacy Sandbox에 대한 마일스톤 갱신.
서드 파티 쿠키 폐지는 두 단계로 진행.
2022년 마이그레이션 API를 릴리스하고 2023년 중반부터 서드파티 쿠키를 단계적으로 폐지할 예정.
Let's Learn About Aspect Ratio In CSS - Ahmad Shadeed
ishadeed.com/article/css-aspect-ratio/
CSS의 aspect-ratio 프로퍼티 사용 방법 및 지원하지 않는 브라우저에서의 대응 방법 등
[TypeScript] 用 ts-migrate 仙女棒讓 JS 專案瞬間 migrate 成 TS | by Hannah Lin | Hannah Lin | Jun, 2021 | Medium
ts-migrate를 이용한 TypeScript 마이그레이션을 주제로 한 글.
ts-migrate의 기본적인 방법, 개별 플러그인이나 소스 코드 일부만 점진적으로 변환해 나가는 방법.
Demystifying styled-components
www.joshwcomeau.com/react/demystifying-styled-components/
styled-components의 작은 복제 버전을 만들면서 라이브러리의 구조에 대해서 이해.
CSSOM을 사용한 스타일 조작, 컴포넌트 스타일 합성 등에 관해 설명.
Temporal: getting started with JavaScript’s new date time API
2ality.com/2021/06/temporal-api.html
ECMAScript Proposal Stage 3의 Temporal 소개.
Times, Time zones, Calendars 개념, 기본적인 Temporal API 사용 방법, 유스케이스 등 사용 방법에 대해서 이야기한다.
소프트웨어, 도구, 라이브러리
uhyo/eslint-plugin-import-access
github.com/uhyo/eslint-plugin-import-access
JSDoc의 @package로 선언한 변수를 외부의 다른 파일에서 참조하면 검증이 실패하도록 하는 ESLint 규칙
npm/libnpmexec: npm exec (npx) Programmatic API
npx exec와 흡사한 기능을 제공하는 라이브러리.
도서
Release 3.0.0: ECMAScript 2021 대응 · asciidwango/js-primer
github.com/asciidwango/js-primer/releases/tag/v3.0.0(일본어)
JavaScript 입문서 JavaScript Primer 3.0 릴리스.
ECMAScript 2021 대응 버전.
