코드스피츠85 1회-(1) JavaScript Now

코드스피츠 85에서는 none blocking에 대한 이야기와 자바스크립트를 짜는 근본적인 방법에 대한 고찰을 이야기해본다.

🌕🌑🌑

TL;DR

오늘날의 자바스크립트 동향과 ECMAScript에 대해서 알아본다. ECMAScript가 버전업이 될때의 과정과, ES6 이후(~ES10)에 표준이 된 스펙들 중 일부를 알아본다. 또한 proposal에 올라온 목록과 체택되진 않았지만 이미 몇몇 브라우저에 적용된 개념들에 대해서 알아본다.

JavaScript PipeLine

자바스크립트의 ECMAScript를 알아보기전에 우리는 프론트 개발자로써 어느 과정까지 건드리고 있는지를 알아보고, ECMAScript에 조금 더 집중할 수 있는 상황에 대해서 알아본다.

1. Code

• 코드를 작성한다.
• ES3.1 ~ 5, 6 ~ / TypeScript / Kotlin / Dart / CoffeeScript / …

2. Transpiler

• 컴파일러와는 다르다. 글 참조 
• 트랜스파일러라는 것을 이용해서 코드를 자바스크립트로 번역한다.

1. (1단계) 언어마다 컴파일러가 있다.

   • (타입스크립트) tsc / (코들린) kotlinc / …

2. (2단계) 원하는 형태의 자바스크립트로 바꾸거나, 원하는 버전의 자바스크립트로 바꿔줌

   • babel

3. Packaging : 최적화 과정. (webpack)

4. CI : 테스트..등등의 여러 job

5. Deploy : 최종 deploy

호환성이라던지, 브라우저에서 어떻게 실행할지는 트랜스파일러나 패키징이 알아서 책임지게 하고, 개발자가 코드에 집중할 수 있는 환경이 만들어졌다고도 할 수 있다.

ECMAScript

• ECMA스크립트는 차기버전을 정하는 순서가 그 해의 상반기에 정해진다. 내년 상반기에 확정될 ES11에 대한 draft작업이 되고 있음 (2019년 10월기준)

• 2019가 재정되자마자 공식문서 레포에는 다음버전의 레포가 떠진다.

• 현재 표준은 당연히 ES10이다

• 이번 강의에서는 ES11을 배울 것이다.

• 알고 있는 자바스크립트는 옛날 기준의 자바스크립트이다.

• 자바스크립트는 1년 기준으로 변한다.

  • 최신버전의 언어는 그 전에 비해 작성법부터 달라진다.
  • 새로운 버전의 자바스크립트로 자바스크립트를 새로 배운다고 생각해도 된다.

    지금 알고 있는 지식은 IE11때까지의 지식이구나 라고 알고 있어도 된다.

ECMAScript Standard

자바스크립트라는 언어를 따라가기 위해 표준에 대해 알아보고 이해한다.

• 유럽 표준의원회에서 지정하고 있다.
• 자바스크립트를 한번 배우면 계속 쓴다는 생각을 버려야한다.
• 변화를 어떻게 따라잡을까.
  • 이 언어가 어떤 식으로 변화를 일으키는지 이해해야지만 같이 찾아보고 따라잡을 수 있다.

C#이후에 업데이트가 가장 많이 일어나는 언어이다.

1. 매년 상반기 새로운 버전을 출시함

• 버전과 연도가 1차이 ES6 = ES2015
• 현재는 ES11 (ES2020)이 최종 조정중 (2019년 10월기준)

2. ES6 이후 급격한 언어의 변화를 지양하고 점진적인 버전업을 진행

• 새롭게 반영될 내용은 Stage0 ~ 3까지 단계별 승격을 통해 정식 반영시 Stage4가 됨
• 공개적으로 스펙을 원하는 사람이 발제를 하면 stage0이라는 최초의 proposal로 보고, 위원회가 회의를 거쳐서 승격을 시켜줌.
• 현재 제안 중이 내용의 상태 확인 
• 대부분은 사장된다.

3. 실제로는..

• tc39위원회에서 회의를 통해 결정되며, 위원회는 다양한 업계와 관계자로 구성됨
• stage0이던 1이던 tc39에 프로포절을 제안하기 위해서는 챔피온이라는 사람을 끼고 발제를 하게 되어있다.
• 실제 각 제안의 담당자(챔피온)가 구글관련 개발자인 경우가 많음
• Stage4기준 보다 구글이 원하는 순서대로 크롬에 빨리 반영되는 경우가 많음
  • 크롬 업데이트 
  • 많은 스펙들은 회사의 사정에 따라 움직이고 있다.
    • 예) 꼬리물기 최적화를 제안한 애플직원의 프로포절은 반영되지 않았지만, 사파리에는 반영되었다.
    • CSS나 W3C도 비슷한 사정

최신판을 쓰기 위해서는 크롬을 사용해야하고, 크롬에서만 반영된 스펙을 안볼 수 없다.

1. ECMAScript 6

ES5이후에 중요한 부분

• Class, Object Literal, getter, setter …
• Arrow (순수하게 함수만 지향, 가벼운 객체를 만들 수 있다.)
• Iterator, Generator(코루틴 시스템), For of
• const, let (순차적인 컨텍스트를 생성해줌)
• destructuring, rest, spread
• Template String
• 내장객체: (클래스 라이브러리) Symbol, Promise, Map, Set, WeakMap, WeakSet, Proxy, Reflect

cf__1) 클래스는 설탕문법이다?

• ES6의 클래스는 절대로 ES5를 흉내낼 수 없다.
• 단적인 증거가, ES5에서 함수를 상속받거나 배열을 상속받는 클래스를 만들 수 없다.
• 근본적으로 생성하는 방식서에부터 사용하는 방식까지 ES6이전과 이후가 다르다.

참고: ES6 Class는 단지 prototype 상속의 문법설탕일 뿐인가? 

ECMAScript 7 ~ 10, Stage3(11)

2. ECMAScript 7

• 중첩된 rest해체: rest안에 rest로 해체가 가능한 것.
• 참고:변수에 배열의 나머지를 할당하기 

const [a, ...[b, ...c]] = [1, 2, 3, 4];
// a=1, b=2, c=[3,4]

3. ECMAScript 8

• async/await
• shared memory
• atomics

참고: SharedArrayBuffer 객체와 Atomics 객체를 사용한 메모리 공유  

shared memory와 atomics를 알아보기 전에 알아야할 웹 워커 개념

cf__2) web worker와 main thread

• 웹 워커는 스크립트 실행을 메인 쓰레드가 아니라 백그라운드 쓰레드에서 실행할 수 있도록 해주는 기술

• 무거운 작업을 분리된 쓰레드에서 처리할 수 있다.

• 메인 쓰레드(일반적으로 UI 쓰레드)는 멈춤, 속도저하 없이 동작할 수 있게 된다.

• Worker는 Worker() 생성자를 통해 생성된다.

• 3. JavaScript 파일에 포함된 코드를 워커스레드에서 실행한다.

• Worker는 현재 Window와 분리된 DuplicatedWorkerGlobalScope 라는 별도의 Global context에서 동작한다.

• 몇가지 제한사항

  • DOM을 직접 다룰 수 없다.
  • Window의 기본 메서드와 속성을 사용할 수 없다.

• 웹 워커 종류

  1. Dedicated Worker
  • Message System을 통해 Worker와 메인 스레드 간에 데이터를 교환할 수 있다. Worker.postMessage() 메세지 전송 Worker.onmessage 응답
  2. Shared worker 참고 
  • Shared Worker는 Dedicated worker보다 좀더 복잡성을 가지고 있다.
  • 윈도우 창이나 iframe, 워커등의 다른 브라우징 컨텍스트에서도 접근이 가능한 특정 종류의 워커를 의미한다. 기존의 다른 종류의 워커들과 다른 전역 스코프를 갖는 인터페이스를 구현합니다. (SharedWorkerGlobalScope)
  • Shared Worker는 웹 어플리케이션 사이의 Proxy Server와 브라우저로서 역할을 하며 (만약 가능하다면)통신을 구축한다.
  3. Chrome Worker
  • Chrome Worker는 Firefox에서만 사용가능한 worker유형
  4. Audio Workers
  • 직접적인 오디오 처리를 web worker에서 처리할 수 있도록 해준다.

참고1: 복잡성 감소 또는 Web Workers 사용  참고2: Web Workers API 

shared memory와 atomics

• 웹 어셈블리어에서 적극적으로 사용 중.

• 웹 워커는 멀티 스레드 패턴이 아닌 워커 스레드 패턴

  • 컨텍스트를 하나만 가지기 때문에 동기화 문제가 일어나지 않는 패턴이다.
  • 밖의 쓰레드는 언제나 별도의 작업을 한 이후에 싱크로 문제되지 않는 새 객체를 전달해야한다.
  • 새 객체로 공유하기 때문에 동기화 문제가 일어나지 않는다.

• 웹워커가 만들어졌을 때는 스레드를 여러개 지원하지만 싱글 스레드라는 컨텍스트를 깨먹지 않도록 설계되었다.

• 문제점은 느리다.

  • 예를들어 큰 용량의 이미지 처리를 위해서 이미지를 복제하여 넘길 때 넘기는 것 부터가 부하이다.
  • 복제를 하지 않고 워커스레드에 넘길까.
  • 메인스레드에 있는 값을 share하여 해결한다. : sharedMemory

• 당연하게도 동시성 문제가 생긴다.

  • 같은 shared memory를 보는 스레들들에서 지울수도, 수정하려고하고, 읽으려고 ..
  • 이 문제를 해결하기 위해 atomics는 lock을 걸어준다.
  • 자바의 lock 기능에 비해서는 저수준의 기능이다.

4. ECMAScript 9

• object 해체
• asynchronous iterators
  • generator의 장점과 async/await의 장점을 합쳐서 비동기적인 코루틴을 만들 수 있는 구조를 제공한다.
  • 현대의 크롬 브라우저는 이 기능을 사용하기 위한 성능 최적화를 이미 구현해 두었다.

5. ECMAScript 10

• Optional catch

  try {
  } catch (err) {
    // 새로운 어휘공간으로 되어서 err를 사용할 수 있도록했지만
    // 불필요한 컨텍스트
  }

  try {
  } catch {
    // err 인자 없이 사용가능
  }

6. Stage3 (ECMAScript 11)

아래 것은 크롬이 이미 구현

• BigInt
• globalThis
• top level await
• class field
• private field (#을 붙여서 사용한다.)
• private method (#을 붙여서 사용한다.)

• Optional chaining ?.
  • null로 통일 가능. 안전한 기능
• nullish coalescing ??
  • 앞의 값이 null일때 ??쓰면 뒤의 값을 사용
• WeakReference

자바스크립트는 현대 나온 언어 중에 가장 어렵다. 현대 모든 언어 중에 제일 장점이라고 불리는 것을 연마다 넣고 있다. 언어에서 어려운 개념을 다 넣고 있다.. 광범위한 언어적 지식을 요구하고 있다.

참고자료

1. ES6 Class는 단지 prototype 상속의 문법설탕일 뿐인가? 
2. SharedArrayBuffer 객체와 Atomics 객체를 사용한 메모리 공유  
3. ECMAScript 발제 레포 
4. 변수에 배열의 나머지를 할당하기 
5. SharedWorker 
6. 복잡성 감소 또는 Web Workers 사용 
7. Web Workers API 

Related