Fork me on GitHub

2020-05-12: ESLint v7.0.0, Next.js 9.4, npm 7 변경 예정 사항

Translator: U-Yeong Ju Edit on GitHub See Revisions

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에서 마이그레이션 하는 방법은 다음 문서를 참고하세요.


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

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 옵션이 추가됩니다.


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 설정 등을 단계적으로 살펴볼 수 있습니다.


Using Buffers in Node.js | DigitalOcean

www.digitalocean.com/community/tutorials/using-buffers-in-node-js

node.js article

Node.js Buffer의 기본적인 사용 방법이 정리돼 있습니다.


Comparing Ember Octane and React

www.pzuraq.com/comparing-ember-octane-and-react/

Ember React article

Ember Octane과 React를 비교한 글입니다.
각 프레임워크에서 같은 코드를 작성했을 때의 차이점과 구조에 대해서 작성돼 있습니다.


사이트, 서비스, 문서


Deno Weekly

denoweekly.com/

mail deno

Deno를 주제로 한 주간 메일 매거진입니다.


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


sindresorhus/slugify: Slugify a string

github.com/sindresorhus/slugify

JavaScript node.js library

문자열에서 URL이나 파일명 등으로 사용할 수 있는 slug 문자를 생성하는 라이브러리입니다.


nikersify/pico: Take browser screenshots in Javascript 📸

github.com/nikersify/pico

JavaScript SVG library

SVG의 <foreignObject>를 사용해 HTML 스크린샷을 생성하는 라이브러리입니다.


도서


Distributed Node.js - O'Reilly Media

shop.oreilly.com/product/0636920342762.do

node.js book

Node.js에서 확장성을 갖는 백엔드 서비스 개발을 주제로 한 서적입니다.


React: Up & Running, 2nd Edition - O'Reilly Media

shop.oreilly.com/product/0636920252696.do

React book

React 입문서 제2판 입니다.


상세하게 풀이한 HTTP/2(저: BarryPollard | 역: 키타하라 켄, 이치노세 타이키, 스자키 슌 | 감수: 이치노세 타이키, 스자키 슌, 아라이 유우, 코쿠부 유타카, 하세가와 요스케) | 상영사의 책(일본어)

www.shoeisha.co.jp/book/detail/9784798163789

HTTP2 book 翻訳

2020년 6월 15일에 출간 예정인 HTTP/2 in Action의 일본어 서적입니다.


Pull Request to this article
記事を紹介する