인트로

스크립트 동작 원리를 이해하는 것은 코딩을 잘짜기 위한 준비 단계이다. 그렇게 때문에 우리는 스크립트 동작 원리를 정확하게 이해해야 한다.
이미 제목이 틀렸다. 스크립트 동작원리 인데 엔진과 WebAPI를 설명한다는 것이 제목과 맞지 않다. 그럼에도 불구하고 나는 글을 작성해 볼려고 한다.

엔진

엔진에는 여러가지가 있다. 어떤 엔진을 사용하느냐에 따라서 성능이나 속도가 달라진다. 그래서 엔진을 잘 선택한 브라우저를 찾는것도 일이다. 보통 요즘은 v8 엔진을 사용하는 크롬 브라우저를 많이 쓰는 편이다. 불과 몇년전만 해도 모든 사람들이 ie를 썼는데도 이렇게 세상이 바뀔줄은 몰랐다. 역시 세상은 계속 살고 볼 일이다.
v8 엔진에 특징이 무엇이 있을까? 실행컨텍스트가 존재하여 실행컨텍스트 스택으로 식별자(함수, 변수, 클래스등)을 스코프를 구분하여 등록하고 상태 변화를 지속적으로 관리 한다.
여기 console.log(a); 문법이 있다. 이 문법을 해석하기 위해서는 console.log라는 함수를 찾아야 하고, a라는 변수를 찾아야 한다. 그리고 두 식별자를 실행시켜야 한다. 여기서 찾아서 나열하는 것을 우리는 평가 단계라고 하고 평가를 모두 마치고 실행을 시켜 렌더링하는 부분을 실행단계라고 한다. 즉, js엔진이 하는 역할은 평가하고 단지 실행하는 것이다.

webapi

webapi가 하는 역할은 js엔진에서 단순하게 나열해서 실행만 시키면 떨어지는 성능을 도와주는 역할을 한다. 즉, 동기로 작성된 코드를 비동기처럼 효과를 낼 수 있도록 도와주는 여러가지 기술들을 제공한다. callback, promise, setTimeout, async/await 같은 기술 말이다. 아마도 스크립트 공부를 하거나 개발을 하다보면 많이 접하는 문법일테니 익숙할 것이다. 우리는 생각없이 쓰지만 js엔진과 webapi는 무지 바쁘게 이 모든일을 일사분란하게 분업해서 처리하고 있는 것이다. 즉, stack이 계속 많이 싸이게 되면 stack overflow가 나오는 현상도 아마도 개발자가 개발을 잘 못해서 계속 stack이 쌓이도록 작성했기 때문이다. 그렇게 때문에 동작원리를 알고 짜는게 굉장히 중요하다고 본다.

활용

실세계에서 이를 활용한 기술스택은 여러군데에서 찾아 볼 수 있다. nginx 같은 서버나 nodejs를 이용한 express 서버 같은 경우에도 논블록킹 + 싱글쓰레드 + 웹서버라고 불리우는 것들인데 이것들이 모두 이런 원리로 작동하고 있다고 보면 쉽게 이해할 수 있다.
문법으로 보여주고, 코드로 한번 쳐보면 쉽게 이해할 수 있는 부분을 이렇게 글로 풀어쓸려니 너무나 어렵고 힘들다. 역시 글을 쓰고 남을 설득하는 작업은 어려운 직업인게 분명하다. 차라리 코딩을 해서 코드와 아웃풋으로 뭔가를 보여주는게 휠씬 더 쉬운 방법이 아닐까 조심스럽게 생각해 본다.