My Real Dev Note

https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path

출처 : 모던 자바스크립트 딥다이브, 타입스크립트 프로그래밍

웹 어플리케이션 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다.

이를 위해 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링하는지 살펴봐야 한다.

* 파싱: 파싱(구문 분석 syntax analysis)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰(token)으로 분해(어휘 분석 lexical analysis)하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리(parse tree/syntax tree)를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스 티리를 기반으로 중간 언어(intermediate code)인 바이트코드(bytecode)를 생성하고 실행한다. 

* 렌더링: HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다.

브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다.

1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.

2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.

3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.

4. 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.

타입스크립트 컴파일러(Typescript Compiler, TSC)

타입스크립트는 자바스크립트나 자바 같은 주요 언어와는 다른 방식으로 동작

프로그램은 프로그래머가 작성한 다수의 텍스트 파일로 구성된다.

<다른 언어>

1. 텍스트를 컴파일러가 파싱하여 추상 문법 트리(abstract syntax tree, AST)라는 자료구조로 변환
2. 컴파일러가 AST를 바이트코드로 변환
3. 런타임 프로그램에 2에서 변환된 바이트코드를 입력, 평가 후 결과얻음.

즉, 프로그램 실행이란, 컴파일러가 소스 코드를 파싱해 AST로 만들고, 다시 AST를 바이트코드로 변환한 것을 런타임이 평가하도록 지시하는 것

<타입스크립트>

타입스크립트는 컴파일러가 소스 코드를 자바스크립트 코드로 변환한다(바이트코드X).

타입스크립트는 코드는 언제 안전해지는가.

타입스크립트는 컴파일 단계에서 AST를 만들어 결과 코드를 내놓기 전에 타입 확인 과정을 거친다.

typechecker(타입검사기) 사용 : 코드의 타입 안전성을 검증하는 프로그램

이 타입 확인 단계 덕분에 프로그래머의 기대대로 실수를 방지할 수 있다.

전체적인 타입스크립트 컴파일 과정은 다음과 같다.

1~3은 TSC가 수행하며, 4~6은 브라우저, NodeJS, 기타 자바스크립트 엔진 등에서 수행한다.

<전체적인 타입스크립트 컴파일 과정>

1. TS 소스를 TSC가 파싱하여 타입스크립트 추상 문법 트리(AST)로 변환 : 타입 이용됨
2. 타입 검사기가 AST를 확인(타입 안정성 확보 구간) : 타입 이용됨
3. TSC가 AST를 JS 소스로 컴파일(변환) : 더이상 타입 확인하지 않음
4. JS 소스가 자바스크립트 추상 문법 트리(AST)로 변환
5. AST를 바이트 코드로 변환
6. 런타임 프로그램에 5에서 변환된 바이트코드를 평가

과정 1~2에서는 소스 코드에 사용된 타입을 사용하지만, 과정 3에서는 이용하지 않는다.

즉, 개발자가 코드에 기입한 타입 정보는 최종적으로 만들어지는 프로그램에 아무런 영향을 주지 않으며, 단지 2번 과정까지 타입을 확인하는 데만 쓰인다.

타입 시스템 (type system)

타입 검사기가 프로그램에 타입을 할당하는 데 사용하는 규칙 집합이다.

타입 시스템에는 사용하는 보통 2가지 종류가 존재

1. 어떤 타입을 사용하는지를 컴파일러에 명시적으로 알려주는 타입 시스템
2. 자동으로 타입을 추론하는 타입 시스템

2가지 시스템은 서로 장단점이 존재하고, 타입스크립트는 양측에 모두 영향을 받았다. 즉, 프로그래머는 선택할 수 있다.

• 어노테이션 : 타입스크립트에 명시적으로 타입을 지정할 수 있다.
  'value:type’의 형태로 쓰이며 타입 검사기에게 곧바로 타입을 알리는 역할을 한다.
• 어노테이션을 쓰지 않으면 타입스크립트가 알아서 타입을 추론한다 : 코드양을 줄인다는 측면에서 이점이 있다.

타입스크립트 vs 자바스크립트

다음 표는 타입스크립트와 자바스크립트의 타입 시스템을 비교한 표다.

다만, 스택 오버 플로/네트워크 연결 끊김/ 잘못된 사용자 입력 등 타입스크립트가 컴파일 타임에 검출할 수 없는 런타임 예외도 많다. 다만… 순수 자바스크립트 세계에서 런타임 에러로 발생했을 많은 에러를 타입스크립트는 컴파일 타임에 검출할 수 있다는 점이 핵심이다.

타입 결정

동적 타입 바인딩이란, 자바스크립트가 프로그램을 실행해야만 특정 데이터의 타입을 알 수 있음을 의미한다.

반대로 타입스크립트는 점진적으로 타입 확인한다. 컴파일 타임에 프로그램의 모든 타입을 알고 있을 때 최상의 결과를 보여줄 수 있지만, 프로그램을 컴파일하는 데 반드시 모든 타입을 알아야 하는 것은 아니다.(일부 타입 추론 가능하므로)

이런 점진적 컴파일은 코드의 일부만 고쳤을 때 전체 프로그램을 다시 컴파일할 필요가 없으므로 빨리 재컴파일된다는 장점도 있다.

점진적 타입 확인은 ‘타입을 지정하지 않은 기존 자바스크립트 코드’를 ‘타입을 사용하는 타입스크립트’로 마이그레이션할 때 매우 유용하다. → 11장 내용과 연계됨

하지만 코드를 마이그레이션하는 상황이 아니라면 모든 코드의 타입을 컴파일 타임에 지정하는 것을 목표로 해야 한다. 따로 언급하지 않는 한 이 책은 모든 코드의 타입이 컴파일 타임에 식별되도록 하는 방식을 추구할 것을 권장한다.

스프레드 문법

let o1 = { M: 1 };
let o2 = { ...o1, L: 3 };
console.log(o2.L);
console.log(o2);         //{ M: 1, L: 3 }

스프레드(…)를 활용하여 자료구조를 불변으로 만들 수 있다.
위와같이 스프레드란 객체 o1이 있고 여기에 값이 3인 프로퍼티 L을 추가해야 한다면,
같이 새로운 객체를 만들어서 o1 대신 사용할 수 있는 문법을 뜻함

Object.assign()

let o1 = { M: 1 };
let o2 = Object.assign(Object.assign({}, o1), { L: 3 });
console.log(o2.L);

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다. 그 후 대상 객체를 반환합니다.

const target = { a: 1, b: 2 };
const source = { c: 4, d: 5 };

const returnedTarget = Object.assign(target, source);

구문

Object.assign(target, ...sources)

매개변수

반환 값

Object.assign()은 속성을 단순히 복사하거나 새로 정의하는 것이 아니라, 할당(assign)하는 것입니다. 

객체 복제

const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

Object.create()

구문

Object.create(proto[, propertiesObject])

매개변수

반환값

예외

예

Object.create()를 사용한 고전적인 상속방법

// Shape - 상위클래스
function Shape() {
  this.x = 0;
  this.y = 0;
}

// 상위클래스 메서드
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - 하위클래스
function Rectangle() {
  Shape.call(this); // super 생성자 호출.
}

// 하위클래스는 상위클래스를 확장
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?', rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

function MyClass() {
  SuperClass.call(this);
  OtherSuperClass.call(this);
}

MyClass.prototype = Object.create(SuperClass.prototype); // 상속
mixin(MyClass.prototype, OtherSuperClass.prototype); // mixin

MyClass.prototype.myMethod = function() {
  // 기능 수행
};

https://doodreamcode.tistory.com/139

동적 타입 언어와 정적 타입 언어 

자바스크립트이 모든 값은 데이터 타입을 갖는다. 그렇다면 변수 역시 데이터 타입을 가질 수 있는지 생각해보아야 한다.

먼저 요약하자면,

정적 타입 언어에서 변수는 데이터타입을 가지지만

자바스크립트같은 (동적타이핑을 수행하는)동적타입 언어에서 변수는 타입을 갖지 않는다.

C나 자바 같은 정적 타입 언어는 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 선언이라 한다. 가령 C에서 char c;라고 선언하면 c변수에는 1바이트 정수 타입의 값(-128~-127)만 할당할 수 있다.

int num; 이라고 선언하면 num 변수에는 4바이트 정수 타입의 값(-2,124,483,648~2,124,483,647) 만 할당할 수 있다.

정적 타입 언어는 변수의 타입을 변경할 수 없으며, 변수에 선언한 타입에 맞는 값만 할당할 수 있다. 정적 타입 언어는 컴파일 시점에 타입 체크(선언한 데이터 타입에 맞는 값을 할당했는지 검사하는 처리)를 수행한다. 만약 타입 체크를 통과하지 못했다면 에러를 발생시키고 프로그램의 실행 자체를 막는다. 이를 통해 타입의 일관성을 강제함으로써 더욱 안정적인 코드의 구현을 통해 런타임에 발생하는 에러를 줄인다. 

자바스크립트는 정적 타입 언어와 다르게 변수를 선언할 때 타입을 선언하지 않는다. 다만 var, let, const 키워드를 사용해 변수를 선언할 뿐이다. 자바스크립트의 변수는 정적 타입 언어와 같이 미리 선언한 데이터 타입의 값만 할당할 수 있는 것이 아니다. 어떠한 데이터 타입의 값이라도 자유롭게 할당할 수 있다.

변수 선언 후 다양한 데이터 값을 할당한 다음 typeof 연산자로 변수의 데이터 타입을 조사하면,

typeof 연산자는 연산자 뒤에 위치한 피연산자의 데이터 타입을 문자열로 반환한다.

가 아니라

정확히 말하면 변수의 데이터 타입을 반환하는 것이 아니라

변수에 할당된 값의 데이터 타입을 반환하는 것이다.

자바스크립트의 변수에는 어떤 데이터 타입의 값이라도 자유롭게 할당할 수 있으므로 정적 타입 언어에서 말하는 데이터 타입과 개념이 다르다. 정적 타입 언어는 변수 선언 시점에 변수의 타입이 결정되고 변수의 타입을 변경할 수 없다. 자바스크립트에서는 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고 변수와 타입을 언제든지 자유롭게 변경할 수 있다.

다시 말해, 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다(당연히 상수인 const 제외). 이러한 특징을 동적 타이핑이라고 하며, 자바스크립트를 정적 타입 언어와 구별하기 위해 동적 타입 언어라 한다. 대표적인 동적 타입 언어로는 자바스크립트, 파이썬, 루비 등이 있다.

정리하자면 자바스크립트의 변수는 타입을 가지지 않는다.

하지만 값이 타입을 갖는다.

따라서 현재 변수에 할당되어 있는 값에 의해 변수의 타입이 동적으로 결정된다고 표현하는 것이 바람직하다.

동적 타입 언어에서 변수 주의사항

- 변수는 꼭 필요한 경우에 제한적으로 사용한다. 변수 값은 재할당에 의해 언제든지 변경될 수 있다. 이로 인해 동적 타입 언어인 자바스크립트는 타입을 잘못 예측해 오류가 발생할 가능성이 크다. 변수의 개수가 ㅁ낳을수록 오류가 발생할 확률도 높아진다. 따라서 변수의 무분별한 남발은 금물이다. 필요한만큼 최소한으로 유지하도록 노력하자

- 변수 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제하자. 변수의 유효범위가 넓을수록 변수로 인해 오류가 발생할 확률이 높아진다.

- 전역 변수는 최대한 사용하지 않도록 한다. 어디서든지 참조/변경 가능한 전역변수는 의도치 않게 값이 변경될 가능성이 높고 다른 코드에 영향을 줄 가능성도 높다. 

- 변수보다는 상수를 사용해 값의 변경을 억제하자.

- 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍하자.

출처 : 모던 자바스크립트 딥다이브

데이터 타입은 값의 종류를 말한다. 

자바스크립트의 모든 값은 데이터 타입을 갖는다.

자바스크립트의 데이터 타입은 크게 원시 타입과 객체 타입으로 분류한다.(근본적으로 다름)

자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체이다.

데이터 타입이 필요한 이유를 요약하면 다음과 같다.

 - 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해

 - 값을 참조할 때 한번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해

 - 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

데이터 타입의 필요성

데이터타입에 의한 메모리 공간의 확보와 참조

값은 메모리에 저장하고 참조할 수 있어야 한다. 메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정해야 한다.

var score =100;

위 코드가 실행되면 컴퓨터는 숫자 값 100을 저장하기 위해 메모리 공간을 확보한 다음,

확보된 메모리에 숫자 값 100을 2진수로 저장한다.

자바스크립트가 데이터 타입, 즉 값의 종류에 따라 정해진 크기의 메모리 공간을 확보한다.

다시말해, 변수에 할당되는 값의 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 결정된다. 

값을 참조하는 경우에는 식별자 score을 통해 숫자 타입의 값 100이 저장되어 있는 메모리 공간의 주소를 찾아갈 수 있다. 정확히 말하면 숫자값 100이 저장되어 있는 메모리 공간의 선두 메모리셀의 주소를 찾아갈 수 있다.

이때 값을 참조하려면 한번에 읽어 들여야 할 메모리 공간의 크기, 즉 메모리 셀의 개수(바이트수)를 알아야 한다. score변수의 경우, 저장되어 있는 값이 숫자 타입이므로 8바이트 단위로 읽어 들이지 않으면 값이 훼손된다.

컴퓨터는 한번에 읽어 들여야 할 메모리 셀의 크기를 어떻게 알 수 있냐면, score 변수에는 숫자 타입의 값이 할당되어 있으므로 자바스크립트 엔진은 score 변수의 숫자 타입으로 인식한다. 숫자타입은 8바이트 단위로 저장되므로 score 변수를 참조하면 8바이트 단위로 메모리 공간에 저장된 값을 읽어 들인다.

* 심벌 테이블 : 컴파일러 또는 인터프리터는 심벌 테이블이라고 부르는 자료 구조를 통해 식별자를 키로 바인딩된 값의 메모리 주소, 데이터 타입, 스코프 등을 관리한다.

데이터 타입에 의한 값의 해석

문제가 하나 더 남아있다. 메모리에서 읽어 들인 2진수를 어떻게 해석해야 하느냐이다.

모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리에 저장된 값은 데이터타입에 따라 다르게 해석될 수 있다. 예를 들면 메모리에 저장된 값 0100 0001 을 숫자로 해석하면 65이지만, 문자열로 해석하면 'A'이다.

앞에서 살펴본 score 변수에 할당된 값은 숫자 타입의 값이다. 따라서 score 변수를 참조하면 메모리 공간의 주소에서 읽어 들인 2진수를 숫자로 해석한다. 

ㄴ개발자 선배님께 검색 방법 배우면서 찾았던 사이트

다음 값은 JavaScript에서 false 로 간주됩니다 .

• 빈 문자열:""
• 0
• null
• undefined
• NaN

다음 값은 JavaScript에서 truthys로 간주됩니다.

• 물체:{}
• 정렬:[]
• 비어 있지 않은 문자열:"anything"
• 0이 아닌 숫자:3.14
• 날짜:new Date();

코드를 실행하는 JavaScript 엔진은 if 문에서 평가되는 경우와 같이 필요할 때 값을 부울로 변환(또는 강제 변환)하려고 시도합니다.

느낌표가 이중인 이유는 무엇?

어떤 경우에는 변수를 명시적으로 부울 값으로 캐스팅할 수 있습니다. 왜요? 글쎄, 가장 큰 이유는 대부분의 개발자가 유형 안전 비교 연산자를 사용하지 않기 때문입니다.

유형 안전 비교 연산자는 다음과 같습니다.

• 엄격하게 같음:===
• 엄밀히 불평등:!==

유형 안전 비교 연산자를 사용할 때 값이 동일한지(또는 같지 않은지)와 해당 유형이 동일한지 모두 확인합니다. 유형 안전 비교 연산자가 없으면 JavaScript 엔진이 참/거짓 논리를 기반으로 변수를 참 또는 거짓으로 자유롭게 강제 변환할 수 있습니다.

JavaScript 변수를 부울로 변환하려면 두 개의 느낌표를 사용하면 됩니다.

function() {
  var name = 'Brian';

  //alert 'string'
  window.alert(typeof name);

  //cast to boolean
  var bool = !!name;

  //alert 'boolean'
  window.alert(typeof bool);
}

위의 예제 코드에서는 문자열 "Brian"을 boolean값으로 캐스팅합니다. 따라서 두 번째 경고는 변수가 이제 boolean값임을 나타냅니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference

또한 기타 헷갈리는 연산자는 위의 페이지에서 하나하나 찾아보는 방법도 있다.

<canvas>는 HTML 요소 중 하나로서, 스크립트(보통은 자바스크립트)를 사용하여 그림을 그리는 데에 사용

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<script type="application/javascript">
		function draw() {
			var canvas = document.getElementById("canvas");
			if (canvas.getContext) {
				var ctx = canvas.getContext("2d");

				ctx.fillStyle = "rgb(200,0,0)";
				ctx.fillRect(10, 10, 50, 50);[]

				ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
				ctx.fillRect(30, 30, 50, 50);
			}
		}
	</script>
</head>

<body onload="draw();">
	<canvas id="canvas" width="150" height="150"></canvas>
</body>

</html>

 캔버스의 크기는 300px * 150px (너비 * 높이)가 초기 설정값이며, HTML height와 width 속성을 사용하여 바꿀 수 있습니다. 

<canvas id="tutorial" width="150" height="150"></canvas>

<canvas>는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 <img> 요소처럼 보입니다. 실제로 <canvas> 요소에는 width와 height의 두 속성만 있습니다. 이것들은 모두 선택사항이며 DOM 프로퍼티를 사용하여 설정할 수도 있습니다. width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 300 픽셀이고 높이는 150 픽셀입니다. 

노트: 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 <canvas> 속성에서 width 및 height 속성을 명시적으로 지정하십시오.

</canvas> 태그 필수

대체 컨텐츠가 제공되는 방식때문에, <img> 요소와 달리, <canvas> 요소는 닫는 태그(</canvas>)가 필요합니다. 닫는 태그가 없다면, 문서의 나머지 부분이 대체 컨텐츠로 간주되고 보이지 않을 것입니다.

렌더링 컨텍스트

<canvas> 엘리먼트는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 렌더링 컨텍스(rendering contexts)를 노출하여, 출력할 컨텐츠를 생성하고 다루게 됩니다. 

캔버스는 처음에 비어있습니다. 무언가를 표시하기 위해서, 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 할 필요가 있습니다. <canvas> 요소는 getContext() 메서드를 이용해서, 랜더링 컨텍스트와 (렌더링 컨텍스트의) 그리기 함수들을 사용할 수 있습니다.  getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라메터를 가집니다. 본 튜토리얼에서 다루고 있는 2D 그래픽의 경우, CanvasRenderingContext2D (en-US)을 얻기위해 "2d"로 지정합니다.

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

첫 번째 줄의 스크립트는  document.getElementById() 메서드를 호출하여 <canvas> 요소를 표시할 DOM을 검색합니다.  요소가 있으면 getContext() 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.

템플릿 뼈대

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>