JSer.info #500 - React 17.0 RC(Release Candidate)가 릴리스 됐습니다.
새로운 기능을 추가한 게 아니라 React의 내부 구조를 변경하거나 개선한 메이저 업데이트 입니다.
새로운 버전의 React에서 구 버전 React의 루트 컴포넌트를 Lazy Load 하여 사용할 수 있도록 하는 Gradual Upgrades가 구현됐습니다.
여러 버전의 React를 동시에 사용할 수 있도록 하는 것으로, React 18 등 향후 이뤄질 업데이트를 단계적으로 적용하기 쉽도록 하는데 목적을 두고 있습니다.
이는 AngularJS(1.x)에서 Angular(2.x)로 변경할 때 ngUpgrade를 사용하는 방식과 비슷한 방식일지도 모르겠네요.
이와 관련해서 여러 버전의 React를 동일 페이지 내에서 실행 시키기 위해 이벤트 구조가 변경됐습니다. 이로인해 Event Pooling이 삭제 됐으며 따라서 event.persist()는 아무 작업도 수행하지 않습니다. 또, 에러 발생 시 컴포넌트 스택 개선 등이 이뤄졌습니다.
프런트엔드 Linter / Compiler / Bundler 등을 통합한 모노리틱 도구를 지향하는 Rome 베타가 릴리스 됐습니다.
현재는 JavaScript를 대상으로 한 Linter와 Formatter 기능만 공개됐습니다.
세바스찬 매켄지(Sebastian McKenzie, Rome과 Babel 개발자. 트위터는 @sebmck)가 공개한 문서에서는 Linter / Compiler / Bundler 등 코드를 다루는 모든 것을 모토리틱 도구 내에 통합하여 보다 강력하고 편리하게 처리를 할 수 있을 것이라는 가능성에 대해 이야기 합니다.
이는 Lint를 통합적으로 처리했던 JSHint을 개선해 플러그인으로 확장 할 수 있도록 개발한 ESLint와는 반대되는 접근 방식입니다.
Rome aims to replace ESLint, Babel, Webpack, Prettier, and Jest.https://t.co/VSNT8TzZag
— Nicholas C. Zakas (@slicknet) August 10, 2020
Fascinating and ambitious. It will be interesting to see if this catches on. (It took nearly five years before ESLint overtook JSHint, so we may not know for a while.)
또한 Babel 6.0.0에서 Babel을 플러그인으로 확장 할 수 있도록 하기 위해서 Babel의 API를 공개한 부작용으로 변경이 어려워졌다고 언급하고 있습니다.
현재는 JavaScript(JS/JSX/TS)를 대상으로 하고 있으나 CSS나 HTML 등도 지원할 예정입니다.
알리는 말
이번 소식으로 JSer.info는 500회를 맞이했습니다.
다음 문서에 500회 기념 회고를 정리했습니다.
새로운 시도로 JSer.info slack 워크스페이스를 생성했으니 다양한 이야기 나누고 싶은 분은 참여해주세요!
헤드라인
TestCafe v1.9.0 Released | TestCafe
devexpress.github.io/testcafe/blog/testcafe-v1-9-0-released.html
TestCafe v1.9.0이 릴리스 됐습니다.
Multi Window 테스트 지원, 실패한 Assertions의 Diff 상세 내용을 출력합니다.
Announcing TypeScript 4.0 RC | TypeScript
devblogs.microsoft.com/typescript/announcing-typescript-4-0-rc/
TypeScript 4.0 RC가 릴리스 됐습니다.
생성자로부터 Class Property를 추론할 수 있도록 개선됐고 catch 절의 변수 타입이 any에서 unknown으로 변경됐습니다. 이어 Variadic Tuple Types, Labeled Tuple Elements, Stage 4의 logical assignment, jsxFragmentFactory 옵션을 지원하며 --incremental과 --noEmit을 조합해서 사용할 수 있습니다. 또, TypeScript 공식 웹 사이트가 개편됐습니다.
Introducing Rome
romefrontend.dev/blog/2020/08/08/introducing-rome.html
JavaScript 툴 체인인 Rome 베타가 릴리스 됐습니다.
JavaScript Compiler, Bundler, Tester, Linter 등을 포괄하는 모노리틱 도구입니다.
React v17.0 Release Candidate: No New Features – React Blog
reactjs.org/blog/2020/08/10/react-v17-rc.html
React 17.0 RC가 릴리스 됐습니다.
React의 내부적인 구조를 변경했기 때문에 메이저 버전이 변경됐습니다.
새로운 버전 React에서 구 버전 React의 루트 컴포넌트를 Lazy Load 하여 사용할 수 있는 Gradual Upgrades 지원이 메인 변경 내용입니다.
이벤트 구조를 변경하여 여러 React를 동일 페이지 내에서 동작하도록 수정했고 이벤트 구조가 변경되면서 Event Pooling이 삭제됐습니다. 또, 에러 시 컴포넌트 스택 개선이 이뤄졌습니다.
아티클
Changes to SameSite Cookie Behavior - A Call to Action for Web Developers - Mozilla Hacks - the Web developer blog
hacks.mozilla.org/2020/08/changes-to-samesite-cookie-behavior/
Firefox도 Cookie의 SameSite 속성 기본값을 Lax로 변경해 나간다고 합니다.
현재 베타에서 테스트하고 있지만 Stable 릴리스 일정은 아직 미정입니다.
Announcing the new TypeScript Website | TypeScript
devblogs.microsoft.com/typescript/announcing-the-new-typescript-website/
TypeScript 공식 사이트가 개편됐습니다.
Setting Up Redux For Use In A Real-World Application — Smashing Magazine
www.smashingmagazine.com/2020/08/redux-real-world-application/
React + Redux + @reduxjs/toolkit을 사용한 애플리케이션 개발 튜토리얼 입니다.
How To Launch Child Processes in Node.js | DigitalOcean
www.digitalocean.com/community/tutorials/how-to-launch-child-processes-in-node-js
Node.js의 child_process를 설명합니다.
microfrontends/english.md at master · phodal/microfrontends
github.com/phodal/microfrontends/blob/master/english.md
Microfrontend를 주제로한 글입니다.
MicroService가 서비스 간 의존을 분리하는 반면 MicroFrontend는 여러개의 애플리케이션을 하나의 애플리케이션으로 보이도록 집약합니다.
라우팅을 이용한 분산 / iframe의 컨테이너 이용 / MicroFrontEnd / 애플리케이션을 모듈화 / Web Components으로 구현 등에 대해서 작성돼 있습니다.
MicroFrontend 컨셉트, mooa의 프런트엔드 설계 뿐 아니라 Lazy Loading과 Routing 만으로 빌드 시에 통합하면 개별 애플리케이션을 배포할 수 없게 되는 문제, 서브 애플리케이션 모델에서의 여러 팀 병행 개발에 대해서도 이야기합니다.
Migrating Large TypeScript Codebases To Project References
engineering.shopify.com/blogs/engineering/migrating-large-typescript-codebases-project-references
거대한 TypeScript 코브 베이스의 빌드 속도와 해석 속도를 Project References로 개선한 내용이 정리돼 있습니다.
어떻게 Project References로 전환했는지 이야기합니다.
A Roadmap for Angular. At the beginning of 2020 at ng-conf… | by Jules Kremer | Aug, 2020 | Angular Blog
blog.angular.io/a-roadmap-for-angular-1b4fa996a771
Angular의 로드맵이 공개됐습니다.
TypeScript 4.0으로 전환, RxJS v7으로 전환, Trusted Types 지원 등이 진행 중입니다.
향후로는 Zone.js 옵셔널 화, Legacy View Engine 삭제, NgModules 등이 예정돼 있습니다.
소프트웨어, 도구, 라이브러리
indexeddbshim/IndexedDBShim: A polyfill for IndexedDB using WebSql
github.com/indexeddbshim/IndexedDBShim
WebSQL, SQLite를 사용한 브라우저와 Node.js에서 동작하는 IndexedDB의 polyfill 라이브러리입니다.
shikijs/shiki: A beautiful Syntax Highlighter.
신택스 하이라이팅 된 HTML 코드를 생성할 수 있는 라이브러리입니다. TextMate 문법을 기반으로 하고 있습니다.
