[JS] DOM, JS비동기

zero_0·2022년 6월 28일
0

FE 학습

목록 보기
21/22
post-thumbnail

DOM이란?

  • 브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화 시켜서 트리구조 로 만든 객체 모델이다.
  • 브라우저의 렌더링 엔징은 HTML 페이지를 로드한 후, 파싱하여 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라고 한다.
  • 정적 페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는 DOM을 변경하는 것이다.

JS비동기

들어가며

왜 이것을 알아야 하는가?

  • 자바스크립트가 어떻게 동작하는 지를 먼저 알고 개발해야
    오류가 왜 나는 것인지 알 수 있고 해결할 수 있기 때문이다.

자바스크립트 동기인가? 비동기인가?

자바스크립트는 동기식 언어이다.
한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다린다.
하나의 프로그램은 동시에 하나의 코드만 실행할 수 있다. 이런 동작은 싱글 스레드, 동기(Synchronous)라고 부른다.
한 번에 하나의 콜 스택을 가지고 있다는 것인데 그렇다면 자바스크립트는 여러 작업이 동시에 처리될 수 없는 것일까? 먼저 자바스크립트 엔진인 V8의 구조를 보자!

자바스크립트 Engine(V8)

자바스크립트 엔진 V8의 구조를 먼저 보면 Memory HeapCall Stack으로 되어 있다.

Memory Heap에서는 변수와 객체의 메모리 할당이 일어나고,

Call Stack에서는 코드 실행에 따라 스택 프레임이 쌓이는 곳이다. (LIFO)

자바스크립트에서 함수를 호출하면 Call Stack에 호출 순서대로 차곡차곡 쌓인다. 그러고 Stack은 맨 마지막에 호출된 함수가 맨 먼저 반환된다. 이를 Last In First Out(LIFO:후입선출) 구조라고 한다.

Call Stack

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

  1. 가장 먼저 실행되는 코드 자체를 말하는 main()함수를 스택에 넣고 그 안에 들어있는 함수들이 정의가 된다.
  2. 마지막 줄에 printSquare(4)를 만나게 되는데 여기서 함수를 호출하므로 스택에 함수를 추가한다.
  3. 순서대로 호출하는 함수들을 Stack에 추가한다.
  4. 함수 내에서 return할 때마다 스택 위에서 하나씩 꺼내게 된다. pop() 값을 반환하고 스택에서 사라진다.
  5. 최종적으로 콘솔 창에 반환된 값이 찍힌다.
  6. 마지막까지 도달하면 stack이 텅 빈다.

비동기란?

자바스크립트는 동기식으로 동작하지만, 비동기 동작도 가능하다.
비동기(Asynchronous)란, 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식이다.

자바스크립트에서는 싱글 스레드의 한계를 보완하기 위해 비동기 콜백을 이용한다. 비동기 콜백에는 webAPIs와 Promise가 있다.

필요한 이유?

웹 페이지가 로딩되거나, 어떤 event가 30초 이상 걸리면 웹 페이지는 동작이 끝날 때까지 화면에 나타나지 않거나 다음 동작을 수행하지 못하게 된다. 사용자들은 느리고 응답없는 웹사이트를 원하지 않기 때문에 자바스크립트가 웹 사이트에서 동작할 때, 비동기적으로 동작할 수 있어야 한다.

브라우저에서 동작하는 JavaScript

브라우저에서는 자바스크립트 엔진 만으로 동작하지 않는다. 자바스크립트 실행 환경(Runtime)에서는 자바스크립트 엔진 자체가 제공하지 않는 일부 기능인 DOM, AJAX와 같은 비동기 처리를 위한 webAPI를 제공한다.

또 이를 제어하기 위한 이벤트 루프(Event Loop), 콜백큐(Callback Queue)가 존재한다.

  • Web APIs : DOM, AJAX, Timer 등 브라우저에서 제공하는 api
  • Callback queue : 콜백 함수들이 대기하는 곳(FIFO 선입선출)
  • Event Loop : call stack이 비워질 때마다 callback queue에 대기 중인 콜백함수가 있다면, callback 함수를 call stack에 보내줌.

+ 이벤트 루프

이벤트 루프는 call stack과 task queue를 주시하는 작은 파트를 말하는데

스택이 비어있으면 task queue의 첫번째 call back부터 스택에 쌓아 효과적으로 실행할 수 있게 해준다. stack이 비어있고 task queue에는 callback이 하나 있다면 이벤트 루프는 callback을 stack에 넣는다.

최종 정리

자바스크립트는 싱글 스레드인 동기적인 언어고,
자바스크립트가 브라우저에서 별도의 API를 통해서 비동기 처리를 할 수 있게 한다.
즉 자바스크립트 엔진은 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작한다.

추가로 동기가 나쁘고 비동기가 좋다는 것은 아니다. 각각의 장단점이 있다.
첫번째 그림처럼 동기를 사용하여 커피를 받아가면 커피가 잘못 전달될 확률이 적다.

그러나 두번째 사진처럼 비동기를 사용하면 완성된 커피가 다른 이에게 전달 될 수 있는 확률이 동기보다 높다. 결론은 동기 방식은 속도가 느리지만, 안정적이고 비동기 방식은 속도가 빠른 대신 불안정적일 수 있다는 것이다.

참고 : https://ljtaek2.tistory.com/129?category=897337
참고 : http://www.hanb.co.kr/ebook/look.html?isbn=9788968486111

profile
차근차근 채워가는 it일지

0개의 댓글