자바스크립트 싱글스레드

도입

최근 현장실습 가서 어노테이션 툴을 개발하다가 생긴 의문점이었다.

react같은 프레임워크를 사용하지않고 html, css, javascript를 쓰고

bootstrap, fastapi를 사용했다.

본문

1. fabric.js 를 사용하는데 객체를 edit, add 할 때 변수등의 데이터를 어떻게 관리해야할까?

- local storage, session storage 를 사용하여 새로고침 또는 종료해도 작업하던 데이터가 남아있게했다.

- 변수처럼 class, id를 사용했는데 이는 이렇게 사용하는게 맞는지를 잘 모르겠다.

 

2. 바닐라 자바스크립트로 개발을 하다 보니 html 파일 밖으로 빼서 관리를 해주는데 어떤 코드들은 html 내부에서 <script>로 실행하면 동작하는데 어떤 코드들은 분리하니 작동을 잘 안했다. 왜일까?

 

이것에대한 원인을 찾아보니 동기, 비동기 에 관해서 다시보게 되었고, 자바스크립트는 싱글스레드 언어라는것을 알게되었다.

 

싱글스레드란?

싱글 스레드(동기) 언어는 한번에 하나의 작업만 할 수 있다. 운영체제에서 처럼, 스택을 이용하여 함수의 실행을 관리한다.

Memory Heap과 Call Stack에 대해서 알아야한다. 메모리 구조를 공부해봤다면 들어봤을 개념들이다. Heap에서는 메모리를 할당 Stack에서는 함수 실행을 관리한다.

 

비동기?

하지만 자바스크립트는 비동기 처리도 가능하다. 브라우저에서 진행하는 별도의 API가 존재하며 event loop 라는것을 이용하여 실행된다. 

비동기 함수 호출 -> WebAPI 이벤트 발생 -> Callback Queue -> Call Stack -> 실행

 

addEventListner 등의 이벤트 처리가 순서에 따라 다르게 동작하는 것 같아서 리액트로 개발했을때는 몰랐던 javascript 동작에 대해서 알게되었다.