2020-09

링크 & 읽을거리

JavaScript 번들러로 본 조선시대 붕당의 이해

Javascript의 모듈시스템과 번들러는 종류도 많고 방식도 달라서 처음 진입하는데 어려움이 있다.

이 글에서는 여려운 내용을 쉽게 전달하기 위해 "조선시대 붕당의 이해"라는 짤에 유머러스하게 비유해 제시하고, 시간의 흐름에 따라 설명하고 있다.

복잡하고 어려운 Javascript의 모듈시스템과 번들러의 이해를 도와줄 글이다.

The cost of parsing JSON

아래의 JS 객체 리터럴과 JSON.parse()를 통한 문자열 파싱 방식들 중, 어떤 것이 성능적으로 더 빠를까?

const data = { foo: 42, bar: 1337 };
const data = JSON.parse('{"foo":42,"bar":1337}');

JSON.parse()는 파싱, 컴파일 그리고 실행 모든 단계에 있어, 대다수의 JS 엔진에서 객체 리터럴 대비 약 1.7배 이상 더 빠르게 처리된다.

JSON의 빠른 파싱을 위해 SIMD(Single Instruction Multiple Data)를 사용해 GB 단위의 데이터를 초당 처리할 수 있는 simdjson 프로젝트도 흥미로워 보이며, 다양한 바인딩(Node.js 바인딩은 simdjson_nodejs)과 포트들이 제공된다.

암호화폐 호가 JSON 데이터를 simdjson보다 더 빠르게 파싱하는 C++ 코드를 작성한 경험을 다룬 "세계에서 제일 빠른 JSON 파서 만들기" 글도 재밌게 읽어볼 수 있다.

다음의 벤치마크와 적용 사례 등도 같이 참고해 보기 바란다.

• JSON.parse benchmark
• Improving Redux state transfer performance with JSON.parse(), a quick case study

What’s New in TypeScript 4

typescript 4.0 버전이 발표되었다.

이번 버전에서는 튜플 타입에 라벨링을 할 수 있고 스프레드 오퍼레이터를 제네렉 타입에도 쓸 수 있게되었다. 자세한 내용은 글에서 확인할 수 있다.

또한 공식블로그에서는 보다 더 상세한 내용을 참고할 수 있다.

React v17.0 Release Candidate: No New Features

React major 버전이 곧 올라간다. 곧바로 추가되는 새로운 기능은 없고, 사용자들이 큰 무리없이 업그레이드를 가능하게끔 하는 것을 중점으로 두었다. 이 외에 document에서 root노드로 이벤트 위임변경 등 여러가지 개선한 내용을 담고 있다.

What Actually is a String in JavaScript?

다음 출력값은 무엇일까?

console.log("🥶".length);
console.log([..."🥶"].length);

한 이모지이므로 차례로 1, 1이라고 생각할 수 있겠지만 결과는 2, 1이다. 왜 그럴까? 이 글에서는 Javascript가 문자열을 다루는 방식을 설명하고, 어떻게 위와 같은 결과가 도출되는지 간략하게 설명한다.

Why I Don’t Use GraphQL Anymore

MongoDB 엔지어인 Harry Wolff가 밝히는 왜 GraphQL을 더 이상 사용하지 않는지에 대한 동영상이다.

GraphQL은 매력적이고 FE 개발에 놀라운 기능들을 제공하지만 그에 반해 서버 구현은 매우 어렵다.

또한 Facebook과 같은 스케일의 서비스에서는 많은 문제들을 해결해 줄 수 있지만, 대다수의 사용자들은 그러한 환경에서 사용하지는 않기 때문이라고 그 이유를 설명한다.

10 Awesome Chrome Flags You Should Enable Right Now

바로 사용해도 좋은 10가지 크롬 플래그를 소개한다.

튜토리얼

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

React와 Vue를 이용해서 똑같은 TODO 앱을 만들어 보면서 어떤 점이 다른지, 코드 스타일은 어떤 식으로 차이가 있는지를 설명하고 있다. 2020년 버전으로 React는 Hooks를 Vue(3+)는 Composition API를 사용했다. (2019년, 2018년 버전도 본문 하단 링크에 있다.)

소스를 올려놓은 저장소 링크도 있으니 코드를 확인하거나 직접 실행해볼 수 있다.

두 개의 선택지에서 갈등하는 개발자가 읽어보기를 추천한다.

TypeScript Exercises

인터랙티브한 구성을 통해 제공되는 16개의 연습문제를 해결을 통해 아래의 TS 기능들을 학습해 볼 수 있다.

• Basic typing.
• Refining types.
• Union types.
• Merged types.
• Generics.
• Type declarations.
• Module augmentation.
• Advanced type mapping.

Let's build BATTLESHIPS in JavaScript, HTML and CSS

배틀쉽 게임을 제작하는 과정을 소개한 유튜브 동영상 강의이다.

1시간 40분간의 강의를 따라서 간단한 게임을 만들어본다면,

HTML, CSS, JavaScript을 학습함은 물론 큰 성취감을 느낄 수 있을것이다.

코드와 도구

Mock Service Worker

기존의 mock API 도구 또는 서비스들은 별도로 제공되는 API 주소를 사용하기 때문에, 테스트 용도로써는 유용하지만 실 서비스 단계에서는 실 API로의 업데이트가 필요하다는 단점이 존재한다.

MSW(Mock Service Worker)는 ServiceWorker를 사용해 네트워크 레벨에서 mocking이 이뤄지기 때문에 실 서비스 API 주소를 테스트 단계에서도 그대로 사용할 수 있다.

import { setupWorker, rest } from 'msw'

const worker = setupWorker(
  // 'https://github.com/octocat'에 대한 mock response를 구성
  rest.get('https://github.com/octocat', (req, res, ctx) => {
    return res(
      ctx.delay(1500),
      ctx.status(202, 'Mocked status'),
      ctx.json({
        message: 'Mocked response JSON body',
      }),
    )
  }),
)

worker.start();

pattern.css

background에 다양한 패턴효과를 줄 수 있다.

WebGL water ripples

WebGL base인 curtain.js로 만든 물결효과.

Debug Visualizer

디버깅 시 데이터 구조를 시각화해 보여주는 VS Code 확장도구로 JS/TS 및 대다수 언어들을 지원한다.

JS/TS 외 언어들은 기본적 수준에 한해서만 지원된다.