Javascript

RxJS

Operator

• scan : works just like reduce for arrays.

import { fromEvent } from "rxjs";
import { throttleTime, map, scan } from "rxjs/operators";

fromEvent(document, "click")
  .pipe(
    throttleTime(1000),
    map((event, i) => [event.clientX, i + 1]),
    scan((acc, cur) => [...acc, cur], [])
  )
  .subscribe((count) => console.log(count));

• 위와 같은 상황에서 x 축 클릭 위치와 클릭 횟수를 보여주고 싶을 때 map 의 두 번째 parameter 를 사용하면 subscribe 될 때마다 확인할 수 있다.

JAM Stack

• JAM Stack 은 Javascript, Api, Markup Stack 의 약자이다.
• 라이브러리를 활용해 웹사이트를 어떻게 구성할 것인지의 관점에 중점을 두고 있다.

• Javascript 와 API 그리고 Markup 으로 구성된 최신 웹 사이트를 구성하는 방법을 이야기 한다.

  JavaScript

  • Client 의 모든 처리는 Javascript 에게 맞긴다.

  API

  • 모든 기능 및 비즈니스 로직은 재사용 가능한 API 로 추상화한다.

  Markup

  • SSG (Static Site Generator) 나 Template Engine (Webpack 등) 을 이용하여 Markup 을 미리 생성한다.

  HTML 을 직접 작성하거나, Template Engine 같은 툴을 이용하거나, Jekyll (ruby), Hugo (go), Nuxt (vue), Next (react), Gatsby 같은 정적 사이트 생성기(Static Site Generator, SSG) 를 이용해서, Static HTML 을 생성할 수도 있다.

  미리 작성된 Static HTML 은 웹서버의 리소스를 쓸 필요 없이, 사용자에게 HTML 만을 전달 해주면 된다. 이는 매우 큰 장점을 가져오게 되는데, Static HTML 을 CDN 을 통해 Cache 하고 배포하여, 빠른 속도 를 유지한다.

  따로 동적으로 HTML 을 생성하지 않기 때문에, 따로 웹서버가 필요 없어 서버 비용이 높지 않다. 하지만 모든 HTML 이 Static HTML 만으로 이루어진 것을 뜻하지는 않는다. 모든 Markup 을 정적으로 유지하게 되면, 최신 데이터를 유지하기 어렵기 때문이다.

  중요한 것은 최대한 HTML 을 빌드하여, Cache 하고 사용자를 위한 First meaningful paint 의 속도를 높히자는 점이다.

V8

Process

1. UTF-16 문자열은 scanner 를 통해 Token(let, for) 생성.
2. 생성된 Token 을 가지고 Parser 가 추상 구문 트리(AST)를 생성.
3. 생성된 AST 는 Ignition(Compiler) 에서 Byte Code 로 컴파일.
4. 컴파일된 Byte Code 를 실행하면서 Profiling 을 통해 최적화를 위한 데이터 수집.
5. 수집된 데이터를 바탕으로 Optimized Machine Code 생성.
6. 이후 Optimized Machine Code 를 실행하며, 메모리 사용량을 줄이고, 기계어에 최적화되어, 속도와 성능을 향상 시킨다.

Token: - Javascript 에 미리 정의되어 있는 for, const, if, function 같은 키워드 - 공백이나 탭 - 변수나 함수 식별자 Parser: - Token 을 가지고, Ignition(Compiler) 가 사용할 AST 를 생성. Pre-parser: - Token 중 참조하지 않는 Token 를 Pre-parser 로 전달하여 실제 작업에 필요한 최소한의 작업 만들 parsing 하고, Pre-parser 로 나중에 요청시 컴파일 된다. Turbofan: - 자주 사용되는 Native code 와 중복된 코드 재사용하여 코드 크기를 줄이고, 메모리 오버 헤드를 크게 줄여, 더 빠른 속도를 내고, 최적화된 Graph 를 만들어낸다.

• Ref

  • https://medium.com/@pks2974/jam-stack-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-17dd5c34edf7
  • https://medium.com/@pks2974/v8-%EC%97%90%EC%84%9C-javascript-%EC%BD%94%EB%93%9C%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EC%A0%95%EB%A6%AC%ED%95%B4%EB%B3%B4%EA%B8%B0-25837f61f551

Web Worker

• 웹어플리케이션에서 하나의 스크립트를 백그라운드 스레드에서 실행이 가능하도록 함으로써 메인 실행 스레드로부터 분리시키는 것을 가능하게 하는 기술.

용도

• 영상 처리: 멀티스레드로 처리 가능.
• 대용량 데이터 처리: 파싱해야 할 데이터가 대용량일 경우 사용.
• 텍스트 분석: 실시간 텍스트처리 가능.
• 데이터베이스 동시 요청: 로컬 데이터베이스에 대한 요청을 동시 수행.

Javascript 는 Single Thread 로 동작한다. 하지만 브라우저는 Single Thread 로 동작하지 않는다. 브라우저에서 처리되는 Network 통신이나 I/O 들은 서로 다른 Thread 에서 동작한다. Web Worker 는 브라우저의 Main Thread 와 별개로 작동되는 Thread 를 생성할 수 있다. Web Worker 로 생성한, Thread 는 브라우저 렌더링 같은 Main Thread 의 작업을 방해하지 않고, 새로운 Thread 에서 스크립트를 실행하는 간단한 방법을 제공한다.

• Web Worker 은 main thread 와 별도의 worker thread 를 가진다.
• main thread 에서는 window 가 GlobalScope 이다.

worker thread 는 main thread 의 window 와는 별도의 WorkerGlobalScope 를 가진다. 때문에 Window 의 메서드나 DOM 조작이 불가능하다. self 를 이용해서, WorkerGlobalScope 에 접근이 가능하다.

worker thread 는 Message System 을 제외하면, main thread 의 window 에 직접 접근할 수 없고, DOM 에 접근하기 위해서는 반드시 worker thread 에서 main thread 에 Message System 로 데이터를 전달해야 한다.

데이터를 주고 받기 위해서, Message System (postMessage, onmessage) 을 이용하는데, 이때 전달하는 데이터는 복사하여, 새로운 값으로 만들어 전달한다. 만약 function 을 전달하면, 복사 할 수 없기 때문에, Error 가 발생되고, class 를 전달한다고 하더라도, Method 는 복사되지 않는다.