Fork me on GitHub

2019-12-03: Got 10(Node.js HTTP 클라이언트), FAB(Frontend Application Bundles)

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #464 - Node.js 용 HTTP 클라이언트 라이브러리인 Got 10이 릴리스 됐습니다.

TypeScript로 재작성한 버전으로 Node.js 10 이상을 지원합니다.
Node.js 12 이후 버전에서는 Brotli도 지원하며 DNS Cache 옵션이 추가됐습니다.
또, 옵션명 변경을 중심으로 비호환 변경 사항도 많이 이뤄졌습니다.

  • query -> searchParams
  • baseUrl -> prefixUrl
  • encoding -> responseType

이 외에도 재시도(retry) 옵션의 사용 방식이 변경됐으며 요청과 응답 내에서 JSON을 다루는 방식도 변경됐습니다.


FAB — Frontend Application Bundles 커뮤니티 사양에서는 프런트엔드 애플리케이션을 Heroku나 AWS Lambda 등에 배포(deploy) 할 때의 포멧에 대해 정의하고 있습니다.

Gatsby, Next.js, Nuxt.js 등의 프레임워크 별 애플리케이션의 출력 형식이 다르기 때문에 여러 호스팅 환경에 배포하기 위해서는 각 환경에 맞는 별도의 설정이 필요하게 됩니다.
FAB는 그 사이에서 Framework adapters 역할의 중간 포맷을 정의하고 프레임워크와 호스팅 환경의 높은 상호 운용성을 달성하고자 하는 프로젝트입니다.

FAB Structure에는 에셋을 배치하는 _assets이라는 디렉터리와 Node.js 서버와 API 정의한 server.js를 zip으로 패키징하는 구조가 정의돼 있습니다.

하지만 다양한 Issue가 있기 때문에 실제로 이용되게 될지는 모르겠습니다. 현재 Linc의 CTO가 주도하여 사양을 정의하고 있습니다.


헤드라인


Release Workbox v5.0.0-rc.1 · GoogleChrome/workbox

github.com/GoogleChrome/workbox/releases/tag/v5.0.0-rc.1

JavaScript ServiceWorker library ReleaseNote

Workbox 5.0.0 RC1이 릴리스 됐습니다.


Release v10.0.0 · sindresorhus/got

github.com/sindresorhus/got/releases/tag/v10.0.0

node HTTP library ReleaseNote

Node.js 용 HTTP 클라이언트 Got 10.0.0이 릴리스됐습니다.
TypeScript로 재작성한 버전입니다.
Node.js 10 미만 지원 종료, querysearchParams으로 이름 변경, encodingresponseType으로 이름 변경, json 옵션 변경 등이 이뤄졌습니다.
DNS cache를 지원하며 maxRedirects 옵션이 추가됐습니다.


아티클


JavaScript frameworks security report 2019 | Snyk

snyk.io/blog/javascript-frameworks-security-report-2019/

Angular React jQuery security article

Angular(JS), React, jQuery와 관련한 보안 리포트가 정리돼 있습니다.
취약성 개수나 영향 범위, 취약성 보고, 보안 기능 등에 대해서 이야기합니다.


I created the exact same app in Vue and Svelte. Here are the differences.

medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-vue-and-svelte-here-are-the-differences-c649f8d4ce0a

JavaScript Vue article

Vue와 Svelte로 같은 Todo 애플리케이션을 작성하여 비교한 글입니다.


Announcing GraalWasm — a WebAssembly engine in GraalVM

medium.com/graalvm/announcing-graalwasm-a-webassembly-engine-in-graalvm-25cd0400a7f2

WebAssembly Java VM article

GraalVM에서 WebAssembly를 지원합니다.
GraalVM의 Trufle API를 사용해 WebAssembly 바이너리 인터프리터를 구현하고 wasm을 실행할 수 있도록 제공하고 있습니다.


슬라이드, 영상


connor4312/cockatiel: A resilience and transient-fault-handling library that allows developers to express policies such as Backoff, Retry, Circuit Breaker, Timeout, Bulkhead Isolation, and Fallback. Inspired by .NET Polly.

github.com/connor4312/cockatiel

JavaScript TypeScript library .net

.NET Polly에 영감을 받아 개발한 에러 핸들링 복귀 처리 라이브러리입니다.
백 오프 알고리즘, 취소, 재시도, 서킷 브레이커, 타임아웃, 동시 호출 제한, 폴백 등을 수행합니다.


GraphQL를 사용한 사이트에서 풀 수 있는 성능 개선(EC사이트를 소재로) / Improving online shopping site performance which using the GraphQL - Speaker Deck(일본어)

speakerdeck.com/nobuhikosawai/improving-online-shopping-site-performance-which-using-the-graphql

GraphQL performance slide

GraphQL 성능 개선을 주제로한 슬라이드입니다.
Datadog APM를 사용한 서버 사이트의 GraphQL 쿼리 트레이스를 읽는 방법과 프런트엔드에서 불필요한 데이터를 가져오는 쿼리의 개선 방법에 대해 이야기합니다.
쿼리와 화면을 연계하기 위한 Fragment과 Colocation도 설명합니다.


사이트, 서비스, 문서


open-source-labs/reactime: Chrome extension for state debugging in React applications

github.com/open-source-labs/reactime

React debug Chrome Extension

React 애플리케이션의 State를 디버깅하는데 사용할 수 있는 브라우저 확장 도구입니다.
특정 시점의 State 표시하고 State의 변화를 기록해 원하는 시점의 State로 되돌릴 수 있습니다.


Style Guide · Redux

redux.js.org/style-guide/style-guide

redux document

Redux의 스타일을 설명하는 공식 문서입니다.
Essential, Strongly Recommended, Recommended 세 개의 카테고리로 스타일과 관련된 가이드가 정리돼 있습니다.


Who Can Use

whocanuse.com/

accessibility Tools

배경색, 글자색, 글자 크기를 지정해 미리 살펴볼 수 있고 명암비나 WCAG 그레이드를 산출해 주는 도구입니다.


FAB — Frontend Application Bundles

fab.dev/

JavaScript bundler Tools spec document

프런트엔드 애플리케이션을 호스팅 서비스에 배포(deploy) 할 때의 패키징 방식이나 발신하는 Node.js 서버에 대한 사양을 정의하고 있습니다.
프레임워크 마다 출력 형식이 다르고 호스티 서비스 환경마다 설정이 각기 다른 문제를 보완하기 위한 중간 포맷을 설계합니다.


Linc – The Perfect CI/CD Pipeline for your Frontend

linc.sh/

CI CD webservice JavaScript

프런트엔드 애플리케이션 용 CI 웹 서비스입니다.
https://fab.dev/의 패키지(사양)를 지원하고 있고 커밋 별 테스트, 애플리케이션 프리뷰를 제공합니다.


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


KilledByAPixel/JSONCrush: Compress JSON into URL friendly strings

github.com/KilledByAPixel/JSONCrush

JSON URL library JavaScript

JSON 문자열을 URL 안전하게 인코딩 / 디코딩하는 라이브러리입니다.


grubersjoe/reflow: Babel plugin to transpile Flow code to TypeScript with CLI wrapper

github.com/grubersjoe/reflow

flowtype TypeScript console Tools

Flow 코드를 TypeScript 코드로 변환하는 CLI 도구입니다.


billinghamj/fix-es-imports: Fixes your ES import paths - from Node-style to explicit filenames

github.com/billinghamj/fix-es-imports

node ECMAScript module Tools

require에서는 생략 가능한 모듈 임포트의 index.js나 확장자를 추가하는 도구입니다.
ECMAScript에서는 확장자 등은 생략할 수 없기 때문에 관련한 import 문을 일괄 수정하는데 사용할 수 있는 도구입니다.


neomjs/neo: The webworkers driven UI framework (BETA version)

github.com/neomjs/neo

JavaScript webworker library UI

WebWorker 기반의 UI 프레임워크 입니다.
Worker 내에서 컴포넌트를 처리 합니다.


도서


아이부터 어른까지 술술 읽을 수 있는 JavaScript 후리가나 Kids 프로그래밍, 게임을 만들어 보면서 즐겁게 배우자! - 임프레스 북스(일본어)

book.impress.co.jp/books/1118101174

JavaScript book

JavaScript 코드와 본문에 후리가나를 활용한 프로그래밍 서적입니다.
HTML과 JavaScript를 사용한 게임을 만들어 보면서 프로그래밍에 대해서 학습할 수 있도록 작성돼 있습니다.


Pull Request to this article
JSer.info Slackに参加する