JSer.info #554 - MDN 등에서 이용하는 브라우저 구현 호환 데이터를 관리하고 있는 @mdn/browser-compat-data 4.0.0 릴리스.

Release v4.0.0 · mdn/browser-compat-data

호환 목록에 Deno 데이터가 추가됐다.

Deno on MDN | Deno Blog

스키마에 preview와 accepts_flags 추가, XPath와 XSLT의 데이터가 불완전하므로 삭제됐다.

The State Of Mobile First and Desktop First - Ahmad Shadeed에서 CSS를 작성할 때 Mobile 코드를 먼저 작성하느냐 Desktop 코드를 먼저 작성하느냐에 따른 차이를 이야기한다.

Mobile과 Desktop 중 하나를 먼저 작성하고 다른 쪽을 Media Query로 덮어쓸때의 코드 차이와 확장성 측면의 차이를 비교한다.
또, 베이스 코드를 두고 여기에 Mobile과 Desktop 대응 코드를 각각 작성할 경우의 어려움 점에 대해서도 이야기한다.
나아가 Flexbox나 CSS Grid, Container Queries 등 새로운 CSS 기능을 사용하여 좀 더 간단하게 작성할 수 있게 된 부분도 다룬다.

From Create-React-App to Next | Kitty Giraudel에는 Create React App(CRA)에서 Next.js로 이전을 어떤식으로 했는지 소개한다.

<head>나 스타일링 등의 항목 별로 CRA에서 Next.js로 어떻게 이식했는지 소개.
또, <Link> 외에는 두 시스템(react-scripts, Next.js)에서 모두 실행 할 수 있으므로 이전 간 동작 확인을 위해 <Link> 역시 두 시스템에 대응 가능하도록 정의하여 테스트 할 수 있는 방법도 다룬다.

헤드라인

Announcing React Native 0.65 · React Native

reactnative.dev/blog/2021/08/17/version-065

React iOS Android

React Native 0.65 릴리스.
Hermes 0.8로 업그레이드 하고 Hades 라는 가비지 콜렉터 구현, ECMAScript i18n API 지원, Apple M1 지원 등.

Release v9.1.0 · mochajs/mocha

github.com/mochajs/mocha/releases/tag/v9.1.0

node.js testing library ReleaseNote

Mocha 9.1.0 릴리스.
--fail-zero, --node-option 지원, JSON 레포트 추가 등.

Release Notes for Safari Technology Preview 130 | WebKit

webkit.org/blog/11958/release-notes-for-safari-technology-preview-130/

safari ReleaseNote

플래그(--useArrayFindLastMethod)를 붙여서 Array.prototype.findLast와 Array.prototype.findLastIndex 지원, WebAudio에서 WebM / Opus 컨테이너 지원 등.

Release v4.0.0 · mdn/browser-compat-data

github.com/mdn/browser-compat-data/releases/tag/v4.0.0

mdn JavaScript library ReleaseNote

MDN등에서 사용하고 있는 웹 기술 호환성 목록 browser-compat-data 4.0.0 릴리즈.
스키마에 preview와 accepts_flags 추가, Deno란 추가, XPath와 XSLT 데이터가 불완전 하기 때문에 삭제됐다.

Deno on MDN | Deno Blog

The npm registry is deprecating TLS 1.0 and TLS 1.1 | The GitHub Blog

github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/

npm Github security news

npm registry에서 LS 1.0과 TLS 1.1을 비권장하고 2021년 9월 29일에 지원을 종료할 예정.
Node.js 0.10.0 미만 버전을 사용하고 있는 경우, 커스텀 바이너리를 사용하고 있는 경우가 대응 대상이 되지만 이미 99%는 TLS 1.2를 이용하고 있다고 한다.

아티클

The State Of Mobile First and Desktop First - Ahmad Shadeed

ishadeed.com/article/the-state-of-mobile-first-and-desktop-first/

CSS article

CSS를 작성 할 때 Mobile과 Desktop 용 중 어느 것을 먼저 작성할 것인지.
Mobile과 Desktop 중 무엇을 먼저 쓰고, 다른 쪽을 Media Query로 덮어써서 대응 할 경우의 코드량이나 확장성의 차이 연구.
또, 기반 코드에 각 코드를 작성한 경우나 Flexbox, Container Query와 같은 최신 기능을 사용할 경우에 대해서도 다루고 있다.

mouseover 중에 표시 되는 DOM 디버깅 하기 | blog.jxck.io(일본어)

blog.jxck.io/entries/2021-08-20/how-to-debug-mouseover.html

DOM debug article

mouseover 중에 표시되는 DOM 요소를 개발자 도구에서 디버깅하는 방법 소개(소소한 디버깅 팁).

'return await promise' vs 'return promise' in JavaScript

dmitripavlutin.com/return-await-promise-javascript/

Promises JavaScript article

return await promise와 return promise 두 구문의 동작이 다를 수 있는 경우 소개.
try...catch로 둘러 쌓여 있는 경우에 await에 의해 throw 되면 결과가 다르다고 한다.

여러 저장소 간 에서의 eslint・prettier 설정 공통화 - LIVESENSE ENGINEER BLOG(일본어)

made.livesense.co.jp/entry/2021/08/24/083000

ESLint article

ESLint의 설정을 소속 그룹(회사) 내 에서 공유하고 관리하기 위해 scoped packages으로 공개 하고 이용하는 방법 소개.

Why WASM is not the future of Babylon.js | by Babylon.js | Aug, 2021 | Medium

babylonjs.medium.com/why-wasm-is-not-the-future-of-babylon-js-5832b09c9b10

WebAssembly article JavaScript

WebAssembly는 C++ 등의 네이티브 언어를 컴파일하여 사용하는 데 목적이 있으므로 TypeScript로 작성한 Babylon.js를 WASM으로 전환할 합당한 이유가 아직 없다는 의견을 풀어내는 글.
WASM과 JS 간의 커뮤니케이션 비용, 어려운 디버깅, 메모리 관리 등도 포함하기 때문에 관리 범위가 커지는 문제점에 대해서 언급한다.
또, Babylon.js의 물리 엔진 등 WASM을 이미 이용하고 있는 일부 영역에 대해서도 소개한다.

From Create-React-App to Next | Kitty Giraudel

kittygiraudel.com/2021/08/24/from-cra-to-next/

React Next.js article

create-react-app로 작성한 앱을 Next.js로 이전 한 이야기.
보일러 플레이트, <head>, 라우팅, 컴포넌트의 Dynamic Import, Styling, CSR/SSR, Lint 등에 대해.
또, <Link> 외에는 두 시스템(react-scripts, Next.js)에서 모두 실행 할 수 있으므로 <Link> 역시 두 시스템에 대응 가능하도록 정의하여 마이그레이션 하는 동안에는 여전히 react-scripts를 이용해 제품 빌드 및 배포할 수 있도록 구성했다고 한다.