[공부 필기] JavaScript 문법 공부 2일차

※ 필자는 자바스크립트 초보자입니다

※ 피드백/잘못된 사항 지적은 언제든지 환영합니다

 

---

 

왜 다시 공부를 시작했는지 등은 이전 글을 참고

2022.02.19 - [2. 개발 공부/JavaScript] - [공부 필기] JavaScript 문법 공부 1일차

[공부 필기] JavaScript 문법 공부 1일차

 

1. 이 글은 이렇게 작성될 계획..

너무 좋은 자료(https://ko.javascript.info/)에, 너무 좋은 필기들, 너무 좋은 댓글들이 이미 있기 때문에

별도로 필기를 하며 공부하지는 않고 그냥 글을 쭉쭉 읽어가면서

더 추가적으로 공부한 내용이나, 개인적으로 필기해놓고 싶은 내용, 실습해보기 위해 작성해본 소스코드 등만 본 글에 필기할 계획이다.

2. 사담

저번에 자바스크립트 엔진에 대해서 추가 공부를 하다가 JIT 컴파일 방식을 공부하느라 경로를 이탈했다.

그래서 이번 글에는 다시 경로를 찾아서, 자바스크립트 엔진에 대해서 공부를 먼저 시작한다.

 

---

- 자바스크립트란?

공부자료 출처 : https://ko.javascript.info/intro

자바스크립트란?

 

저번에 위키백과에서 자바스크립트 엔진의 정의를 찾아봤다.

 

위키백과에 따르면 '자바스크립트 엔진(JavaScript engine)은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터'라고 한다.

'자바스크립트 엔진은 전통적인 인터프리터일 수도 있고, 특정한 방식으로 바이트코드로 JIT 컴파일을 할 수 있다'고 기재되어 있다.

   정의를 아는 것도 중요하지만 사실 정의만 가지고는 뭘 응용할 수가 없다.

   그래서 자바스크립트 엔진의 동작 원리 등에 대해서 공부를 해보기로 했다.

 

 

※ 자바스크립트 엔진의 동작원리 공부하기

학습 시 참고한 글1 : https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/

자바스크립트의 동작원리: 엔진, 런타임, 호출 스택

학습 시 참고한 글2 : https://velog.io/@namezin/javascript-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC

javascript 동작 원리

 

 

자바스크립트 엔진은 다양한 종류가 있다고 한다.

   가령 구글의 웹브라우저인 크롬에는 V8,

   애플의 사파리는 웹킷,

   모질라 재단의 파이어폭스는 스파이더몽키를 사용하고 있다.

 

자바스크립트 엔진의 주요 구성요소는 Memory Heap과 Call Stack 이라고 한다.

   여기서 잠깐! 궁금한 점이 생겼다.

   이전 글에서 JIT 컴파일 방식에 대해 공부하면서 분명...

   '자바스크립트 엔진은 인터프리터 방식이나 JIT 컴파일 방식으로 바이트코드를 변환한다'고 했었다.

   그렇다면, 자바스크립트 엔진의 구성요소 중에는 컴파일러나 인터프리터가 있어야 하는게 아닐까.

   왜 memory heap과 call statck만 보이는 것일까.

   아래의 글에서 얼추 해답을 찾아냈다.

   https://soldonii.tistory.com/52

자바스크립트의 작동 원리는?(크롬 V8 엔진)

 

   memory heap과 call statck은 '메모리'이고, 자바스크립트 엔진을 구성하는 요소 중 하나가 맞다.

   메모리만 있는건 아니고,

   parser, interpreter, compiler 등도 자바스크립트 엔진 안에 있다고 한다.

   즉, 자바스크립트 엔진는 파서, 인터프리터, 컴파일러 등과 메모리(memory heap, call statck)로 구성되어 있는 듯 하다.

 

 

자바스크립트 엔진의 작동 원리는 다음과 같다.

   자바스크립트 엔진의 작동 원리에 대한 공부자료의 출처는 아래 글이다.

   글을 읽어보면 그림도 있고 설명도 굉장히 상세해서 필요하면 아래의 글을 읽는 것도 좋을 듯 하다.

   https://soldonii.tistory.com/52

자바스크립트의 작동 원리는?(크롬 V8 엔진)

   작동원리

   1) 자바스크립트 소스코드를 가져와 파서(parser)에게 넘기고 파서(parser)는 파싱한다.

   2) 파싱한 결과는 AST(Abstract Syntax Tree)*가 된다. 

   3) 이 AST는 인터프리터(interpreter)에게 전달되어 바이트코드(byte code)로 변환(ignition)된다.

   4) 인터프리터는 한줄씩 코드를 실행하는 기능을 하기 때문에, 당연히 바이트코드를 실행하게 된다.

   5) 인터프리터(interpreter)가 4)의 과정을 하는 중에 프로파일러(profiler)는 입력받은 코드에서 최적화할 수 있는 부분을 찾아서 기록해놓는다.

         (자주 사용하는 변수 등 데이터를 찾아 모은 후 최적화하는데, 최적화하는 방법도 여러가지가 있다고 함)

   6) 최적화 가능한 부분을 모아 컴파일러(compiler)에게 전달하고

   7) 컴파일러는 그 부분을 기계어로 변환한다.

   8) 이후 최적화한 코드를 수행할 차례가 오면 바이트 코드로 변환하는게 아닌,

        (컴파일러가) 기계어로 변환한 코드가 그 자리를 대체하여 실행된다고 한다.

 

   7)에서 컴파일러가 기계어로 변환을 한다고 되어 있는데 이전 글에서 JIT 컴파일의 동작원리에 대해서 배울 때 native code로 변환된다고 배웠던 것 같다.

   어떤게 맞는 답인지 알 수가 없어서, 크롬의 V8 엔진을 기준으로 정답을 찾아보기로 했다.

   크롬의 V8 엔진이 사용하는 컴파일러는 TurboFan인데 TurboFan에 대한 정보(docs)가 적힌 사이트는 아래를 참고하자.

   https://v8.dev/docs/turbofan

TurboFan · V8

   "An overview of the TurboFan compiler"를 대충 읽어봤는데 native code라고 한다.

   정확하게 모든 문서를 읽은게 아니기 때문에 한번 더 확인이 필요할 것 같다.

   컴파일러에 의해서 컴파일된 코드는 기계어(0, 1로 이루어진 코드) 보다는 native code가 더 맞는 것 같다.

 

 

* AST(Abstract Syntax Tree) 

AST가 뭔지를 이해하지 못해서 아래 글을 읽으며 AST에 대해서 공부를 좀 했는데,

AST는 "프로그래밍 언어의 문법에 따라 소스 코드 구조를 표시하는 계층적 프로그램 표현"이라고 한다.

또한 트리 구조로 되어있다고 한다.

https://gyujincho.github.io/2018-06-19/AST-for-JS-devlopers

자바스크립트 개발자를 위한 AST(번역)

사실 위의 내용만 봐서는 AST가 어떻게 생긴건지 감이 잘 안온다. 트리 구조라고 했는데 어떻게 트리구조인거지?

그래서 AST를 직접 구하신 분의 글을 찾아왔다.

글이 너무 어려워서 모든 내용을 다 이해하지는 못했지만

대략적인 흐름을 이해하려고 하면 AST가 어떻게 구해지는지와 트리 구조로 어떻게 나오는지 대략적으로 이해할 수 있다.

https://talkingaboutme.tistory.com/entry/Study-Abstract-Syntax-Tree-AST

[Study] Abstract Syntax Tree (AST)

 

   또한 크롬의 V8은 heap memory와 stack을 합쳐서 resident set이라고 하는 듯 하다.

   V8 엔진의 메모리 구조에 대한 부분은 아래 글을 참고하면 좋을 것 같다.

   https://ui.toast.com/weekly-pick/ko_20200228

V8 엔진(자바스크립트, NodeJS, Deno, WebAssembly) 내부의 메모리 관리 시각화하기

 

자바스크립트에 대한 문법도 떼지 못한 상황이기 때문에 더 깊게 공부하는건 잠시 미뤄두기로 했다.

일단 자바스크립트 엔진의 동작 원리는 여기까지 공부하고, 나중에 좀 더 최적화 방법, V8 엔진의 구성요소 등에 대해서 깊게 공부해봐야겠다.

---

자바스크립트 엔진은 굉장히 복잡하게 소스코드를 처리한다는 것을 알 수 있었다.

덕분에 자바스크립트 엔진의 동작 원리는 얼추 이해했다.

 

하지만 동작 원리만 이해했다고 자바스크립트 엔진에 대한 이해가 끝난건 아니다.

아직 자바스크립트 엔진에 대해서 모르는게 더 많기 때문에..

전부를 다 알 수는 없어도

적어도 자바스크립트 엔진을 구성하는 요소 중 하나인 memory heap과 call stack이 어떤 상황에 쓰이는지는 알고 넘어가고 싶다.

 

그래야 본격적으로 자바스크립트 문법(syntax)에 대해서 공부할 때

자바스크립트 엔진 덕분의 메모리에 어떤 코드가 적재되고, 어떤 순서로, 어느 순간에 실행되고 사라지는지 상상해보며 공부할 수 있을 것 같다.

 

그러나, 글이 너무 길어지니까 여기서 한 템포 끊고 다음 글에서 공부를 하기로 하자.

---

그리고 JavaScript engine 동작 원리에 대해서 찾아보다가 웹어셈블리 + JavaScript engine의 최적화 방법 원리에 대해서 이해하면 더 빠른 코드를 작성할 수 있다는 글을 봤는데

당장은 웹어셈블리나 자바스크립트 엔진의 최적화 기법(?)에 대해서 이해하기 어려울 것 같아 스킵하지만

나중에 실력이 향상되면 꼭 찾아서 공부해보고 싶다.