JSer.info #487 - ESLint 7.0.0이 릴리스 됐습니다.

빌트-인 규칙이 변경된 메이저 업데이트 버전입니다.
eslint:recommended의 규칙이 갱신됐고 빌트-인 규칙의 기본 옵션이 변경됐습니다. 그리고 Node.js 관련 빌트-인 규칙을 eslint-plugin-node로 옮겼습니다.

또, .eslint.js를 기본적으로 ignore 하지 않도록 변경됐고 --config나 --ignore-path 옵션에서 경로를 다루는 방식이 변경됐으며 플러그인을 .eslintrc.* 디렉터리를 기준으로 불러오도록 변경됐습니다.

그 외로 /* eslint-disable -- 코멘트 설명 */와 같이 코멘트 디렉티브에 설명구를 작성할 수 있게 됐으며 비동기 처리를 지원하는 ESLint 클래스가 추가됐습니다.

ESLint 6.x에서 마이그레이션 하는 방법은 다음 문서를 참고하세요.

Migrating to v7.0.0 - ESLint - Pluggable JavaScript linter

Next.js 9.4가 릴리스 됐습니다.

Blog - Next.js 9.4 | Next.js

Fast Refresh가 기본적으로 활성화됐고 stale-while-revalidate와 같은 Incremental Static Regeneration을 베타로 지원합니다.

또, .env에 정의한 환경 변수를 브라우저 용 빌드에서 NEXT_PUBLIC_ 접두사를 붙여 참조할 수 있게 됐으며 브라우저에서만 사용하던 fetch 폴리필을 Node.js에도 적용했습니다. 이어 Web Vitals를 가져올 수 있는 reportWebVitals를 지원하며 모듈을 절대 경로로 해결하는 Aliases가 추가 됐습니다.

The npm Blog — npm v7 Series - Introduction에 npm 7의 변경 예정 사항이 공개돼 있습니다.

arborist라는 node_modules 의존 관계를 분석하는 새로운 구조가 도입됩니다. 그리고 peerDependencies를 자동으로 설치하도록 변경되며 acceptDependencies를 지원합니다.

또, package-lock.json의 형식이 변경되고 yarn.lock 관련 처리가 추가되며 workspaces(yarn의 workspaces와 같은) 기능, overrides(yarn의 resolusions와 같은) 기능이 추가됩니다. 이어 단계적으로 공개할 수 있는 --stage 옵션이 추가 될 예정입니다.

헤드라인

V8 release v8.3 · V8

v8.dev/blog/v8-release-83

V8 ReleaseNote

V8 8.3이 릴리스 됐습니다.
ArrayBuffer의 GC가 개선됐으며 WebAssembly에서 최대 4GB 메모리를 사용할 수 있도록 변경됐습니다. 그리고 TypedArray에 의한 prototype 체인 버그가 수정됐습니다.

ESLint v7.0.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2020/05/eslint-v7.0.0-released

ESLint ReleaseNote

ESLint 7.0.0이 릴리스 됐습니다.
비호환적 변경 사항으로 Node.js 8 이하 지원이 종료됐으며 eslint:recommended의 규칙이 갱신됐고 빌트-인 규칙의 기본 옵션이 변경됐습니다. 그리고 .eslint.js를 기본적으로 ignore 하지 않도록 변경됐습니다.
또, 비동기 처리를 지원하는 ESLint 클래스가 추가 됐으며 디렉티브 코멘트에 설명구를 작성할 수 있도록 변경 됐습니다.

Node v14.2.0 (Current) | Node.js

nodejs.org/en/blog/release/v14.2.0/

node.js ReleaseNote

Node v14.2.0이 릴리스됐습니다.
Node 내부 메서드 common.mustCall()을 assert.CallTracker로써 시험적으로 사용할 수 있으며 Worker에 stackSizeMb 옵션이 추가됐습니다.

Blog - Next.js 9.4 | Next.js

nextjs.org/blog/next-9-4

React ReleaseNote library

Next.js 9.4가 릴리스 됐습니다.
Fast Refresh가 기본적으로 활성화 됐으며 stale-while-revalidate와 같은 Incremental Static Regeneration을 베타로 지원합니다.
Node.js에도 fetch를 자동으로 폴리필 하며 Web Vitals를 가져올 수 있는 reportWebVitals가 추가 됐습니다. 그리고 모듈을 절대 경로로 해결하는 Aliases를 지원합니다.

shqld/tish: A typescript utils for shell operations. Totally Promise, Multi-platform, Optimized, Lazy✌️

github.com/shqld/tish

JavaScript TypeScript ShellScript library

쉘 스크립트와 같은 처리를 타입스크립트로 작성할 수 있는 유틸리티 라이브러리입니다.
명령어 실행과 파이프 처리를 지원합니다.

아티클

Rebuilding our tech stack for a new Facebook.com - Facebook Engineering

engineering.fb.com/web/facebook-redesign/

facebook React CSS performance article

Facebook.com 재설계와 성능 개선에 대한 내용이 정리돼 있습니다.
Atomic한 CSS를 활용해 초기 로드에 필요한 CSS 용량을 줄이고 rem으로 폰트 크기를 조작하여 접근성 효율을 높입니다.
또, SVG를 React 컴포넌트로 다뤄 렌더링 성능을 높이고 Dynamic Import를 사용해 컴포넌트를 동적으로 불러옵니다. 이어 서비스를 운영 할수록 자바스크립트 용량이 커지는 문제를 방어하기 위해 JavaScript Budget을 도입하고 라운드 트립을 줄이기 위해 GraphQL을 사용합니다.

The npm Blog — npm v7 Series - Introduction

blog.npmjs.org/post/617484925547986944/npm-v7-series-introduction

npm article

npm 7의 로드맵이 정리돼 있습니다.
arborist을 사용한 의존 관계 분석 재구성, peerDependencies 자동 설치, acceptDependencies를 지원합니다.
또, package-lock.json의 형식이 변경되고 yarn.lock에 관한 처리가 추가됩니다. 이어 workspaces(yarn의 workspaces와 같은) 기능, overrides(yarn의 resolusions와 같은) 기능이 추가되며 단계적으로 공개할 수 있는 --stage 옵션이 추가됩니다.

npm/arborist: npm's tree doctor

An in-depth guide to performance optimization with webpack - LogRocket Blog

blog.logrocket.com/guide-performance-optimization-webpack/

webpack performance article

웹팩의 번들 크기를 분석하고 개선하는 방법을 소개하는 튜토리얼 글입니다.
엔드포인트 분리, 서드파티 라이브러리 분리, 청크 그룹화, 라우팅 별 코드 스틀리팅, "runtime Chunk"에서의 매니페스트 파일 통일, externals CDN 이용, 트리 쉐이킹으로 불필요한 코드 제거, Performance Budget 설정 등을 단계적으로 살펴볼 수 있습니다.