Single Thread / Runtime

V8 런타임과 브라우저가 제공하는 웹 API

브라우저는 DOM, AJAX, SetTimeOut 등과 함께 event loop, Callback Queue를 가지고 있다.

이런 것들이 어떤 식으로 움직이는 걸까?

자바스크립트는 Single Thread RunTime

The Call Stack

one thread == one call stack == one thing at a time

⇒ 한번에 하나의 싱글 콜 스택만을 가지고 있다. 하나의 프로그램은 한번에 하나만 할 수 있다.

콜스택은 데이터 스트럭쳐로 실행되는 순서를 기억하고 있다.

함수를 실행하려면 스택에 해당하는 함수를 집어넣게 되는데 함수에서 리턴이 일어나면 스택의 가장 위쪽에서 해당 함수를 꺼내게 된다. 이게 콜 스택이 하는 일이다.

function foo () {
  return foo()
}

foo() // 어떤 결과가 나올까?  

-> RangeError : Maximum call stack size exceeded

Blocking

what happen when things are slow?

네트워크 요청을 하고 마냥 끝날 때까지 기다리는 수 밖에 없다.

문제는? 웹 브라우저에서 코드가 실행되고 있다는 것.

우리가 크롬 브라우저를 실행한다면? 동기적으로 처리되는 일들이 끝나지 않으면 그 다음 단계로 넘어갈 수가 없다. 이것은 유려한 UI를 만드는 것에 아주 큰 걸림돌이 된다. 그러면 이걸 어떻게 해결 해야 할까?

The solution? asynchronous callbacks _ 비동기 콜백

console.log('hi')

setTimeOut(function () {
	  console.log('there')
}, 5000);

console.log('JSconfEU')

// hi
// JSconfEu
// there

Concurrency & the Event Loop _ one thing at a time, except not really

이벤트 루프와 동시성이 역할을 하게 된다.
자바스크립트는 정말 한번에 하나만 할 수 있을까?

다른 코드를 실행하는 동안ajax 요청을 할 수 없다

브라우저는 런타임 이상의 의미이다.

자바스크립틀가 호출 할 수 있는 스레드를 효과적으로 지원한다.

여기서 동시성이 들어오는 것이다.

모든 Web API는 작동이 완료되면 콜백을 테스트 큐에 밀어 넣는다.

이벤트 루프란? 전체 시스템에서 아주 작은 단순한 일을 하는 작은 파트이다. 콜스택과 테스트 큐를 주시하는 역할.

스택이 비어있으면, 큐의 첫번째 콜백을 스택에 쌓아 효과적으로 실행할 수 있게 해준다.

AJAX 요청은 Javascript 런타임이 아니라, 브라우저 Web API에서 실행된다.

이제 XHR Web API가 실행되는 동안에, 다른 코드는 정상적으로 실행할 수 있다.

콜백이란?

콜백은 다른 함수가 부르는 함수이다.

혹은 앞으로 큐에 쌓이게 될 비동기식 콜백

처리해야 하는 것이 많으면 렌더에도 지장이 간다.

우선 순위 이기는 하지만 자바스크립트는 한번에 하나의 일만 할 수 있기 때문에.

스택에 필요없는 느린 코드를 쌓아서 브라우저가 할일을 못하게 만들지 말아라. 유동적인 UI를 만들어라

이미지 처리나 애니메이션이 너무 잦아졌을 때, 큐 관리에 주의를 기울이지 않으면 느려지는 일이 발생한다.

Run Time

컴파일 과정을 마친 응용 프로그램이 사용자에 의해서 실행되어 지는 '때 ( time) '를 의미

Run Time error

이미 컴파일이 완료되어 프로그램이 실행 중임에도 불구하고 의도치 않은 예외 상황으로 인하여 프로그램 실행 중에 발생하는 오류 형태를 의미한다.

Compile Time

개발자에 의해 C, JAVA 등과 같은 개발 언어로 소스 코드가 작성 되며, 컴파일 과정을 통해 컴퓨터가 인식할 수 있는 기계어 코드로 변환되어 실행 가능한 프로그램이 되는 과정

: Template 프로그래밍은 모두 컴파일 타임에 결정 또는 실행됨

Compile time error

소스 코드가 컴파일 되는 과정 중에 발생하는 Syntax error, 파일 참조 오류 등과 같은 문제들로 인해 컴파일이 방해되어 발생하는 오류들

• 컴파일 에러 발생 시, 현재 문제가 되는 소스 코드를 알려준다.

런타임 에러

1. 0 나누기 오류
2. Null 참조 오류
3. 메모리 부족 오류

컴파일 타임 에러

1. Syntax error
2. Type check error