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

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

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

 

0. 사담

여러 언어를 조금씩 공부해봤는데 가장 흥미로웠던 분야는 프론트엔드 개발이었다.

정확하게 말하면 앱개발이었지만, 이왕 배우는거 웹부터 앱까지 확장해가면 좋을 것 같아서 웹부터 다시 복습중.

 

다른 언어들을 조금씩 배워보고 다시 JavaScript 문법으로 돌아오니 그 사이에 다 까먹었다..

그래서 복습 + 좀 더 능동적으로 배워보고자 다시 JavaScript 문법 공부를 시작했다.

 

 

공부할 때 참고할 자료는 https://ko.javascript.info/ 와 구글!

모던 JavaScript 튜토리얼

 

1. 왜 "코어" 자바스크립트를 공부?

웹, 앱 프론트엔드 개발이 목표이기 때문에 자바스크립트의 문법에 오랜 시간을 쏟을 필요가 없지 않나 싶을 수 있다.

당장 브라우저를 제어할 수 있는 DOM을 배우는게 낫지 않는가하고 말이다.

 

하지만 나는 바보똥멍청이(?)라서 '왜(why)'를 제대로 이해하지 못하면 응용을 못하는 편이다.

그래서 단순암기에 굉장히 취약함..

 

가령 어떤 이벤트나 API를 구글에서 사용법을 찾아서 가져다 쓴다고 가정하자.

당장은 어떻게든 넘어가는데 비슷한 상황이 다시 올 때 다시 사용하지 못한다. (완전히 똑같은 상황이 온다해도 응용을 못한다)

반대로 이 함수가 어떻게 동작하는지 끝까지 물고 넘어지면서 공부하면 어떻게든 응용할 수 있다.

 

여기에서 '끝가지 물고 넘어지면서 공부한다'는 것은 자바스크립트 엔진 동작원리까지 다 들어가서 공부하고 온다는 이야기이다.

그럴려면 차라리 코어 자바스크립트부터 배우는게 더 나을 것 같아서

코어 자바스크립트 문법부터 공부하기로 했다.

 

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

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

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

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

---

- 자바스크립트란?

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

자바스크립트란?

 

스크립트(자바스크립트로 작성한 프로그램)는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있다고 한다.

프로그래밍 언어 중 C 같은 경우 컴파일러, 링커 등 필요한 것들이 많은데 스크립트는 그렇지 않다는 차이점이 있는 듯 하다.

 

자바스크립트는 웹브라우저(Web Browser) 뿐만 아니라 서버에서도 실행할 수 있다고 한다.

이는 자바스크립트 엔진(JavaScript Engine) 덕분이라고 한다.

 

 

※ 자바스크립트 엔진에 대해서 더 공부

그 '자바스크립트 엔진'이라는게 뭐길래 웹브라우저나 서버에서 스크립트가 실행 가능한 것일까.

씹고 뜯고 맛보면서 탐구해보고 싶은 주제이다. 그래서 구글을 통해 좀 더 공부해보기로 했다.

 

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

   당연한 정의라서 가볍게 넘어가자.

 

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

   인터프리터 방식은 실행하는 시점에 한 줄씩 코드를 읽어가면서 실행하는 방식이고,

   JIT 컴파일은 Just-In-Time Compilation의 약자로, 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법이라고 한다.

   인터프리터 방식은 원래 알고 있었던 방식이니 넘어가기로 했다. (참고로 python도 인터프리터 방식임)

 

   대신 JIT 컴파일 방식에 대해서 좀 더 찾아봤다. 

 

 

※ JIT 컴파일에 대해서 더 공부

구글링 하면서 공부를 하고 있는데 'JIT 컴파일'은 'Java'와 굉장히 연관이 깊은 듯 하다. (JVM에서 JIT 컴파일 방식을 사용 하는듯)

하지만 JavaScript를 공부할 때도 JIT 컴파일을 알아두면 좋다고 한다.

그 이유는 구글 크롬의 자바스크립트 엔진(JavaScript engine)인 V8에서도 JIT 컴파일이 사용되기 때문이라고 한다.

(그리고 사실 대부분의 자바스크립트 엔진이 JIT 컴파일 방식을 사용한다고 한다)

 

JIT 컴파일은 '프로그램을 실행하는 시점(runtime)에 바이트 코드를 기계어로 번역하는 컴파일 기법'이라고 한다.

   사실 이 내용만 읽어서는 무슨 말인지 이해가 안된다.

   JIT 컴파일의 동작 과정을 찾아보면서 정의를 이해하려고 노력해봐야겠다.

 

   NHN Cloud의 포스팅에는 JIT 컴파일의 수행 과정이 그림으로 표현 되어있다.

   아래의 글을 참고하자.

   https://meetup.toast.com/posts/77

자바스크립트 엔진의 최적화 기법 (1) - JITC, Adaptive Compilation : NHN Cloud Meetup

 

   일단 프로그래머가 자바스크립트를 작성하게 되면 기본적으로 텍스트 형태로 배포되기 때문에 변환을 먼저 해주어야 한다고 한다.

   그래서 파싱 과정을 거쳐서 소스코드를 중간언어(intermediate representation)인 바이트코드로 변환을 한다고 한다.

 

   그 다음에 인터프리터 방식이라면 이 바이트코드를 하나씩 읽어가며 동작을 수행하고

   JIT 컴파일 방식이라면 이 바이트코드를 native code(OS가 해석 가능한 코드)로 컴파일한다고 한다.

 

   여기에서 [native code]가 기계어(0과 1로 이루어진 컴퓨터가 이해할 수 있는 언어)인가 싶어 찾아봤는데

   기계에는 아니고 원시코드라고 한다.

   native code를 어디선가 잠깐 봤는데 0과 1로 구성된 코드는 아니였고

   굳이 따지자면 어셈블리어(assembly)에 더 가까운 형태로 생겼었다.

 

   여기에서 중요한 사실은 지금 이 과정들은 모두 실행 과정(runtime)에서 하고 있는 작업들이라는 점이다.

   C언어처럼 컴파일 과정이 따로 있는게 아니라

   런타임에서 바이트코드로 변환하고, native code로 컴파일하는 것까지 다 하고 있는 것이다.

 

여기까지는 이해했다.

하지만, JIT 컴파일을 이해하기에는 조금 부족하다.

뒷부분에 더 어떻게 동작하는지 나와있지 않기 때문에 다른 글을 서칭해서 찾아냈다.

 

JVM(자바 가상 머신)에 대한 설명을 하는 글이지만 여기에서 jit 컴파일러에 대한 동작방식도 찾을 수 있었다.

아래 글을 참고하자.

https://steady-snail.tistory.com/67

[JAVA] JVM 동작원리 및 기본개념

 

   그 뒤의 과정은 생각보다 별 것 없었다.

   위의 글에 의하면 native code로 변경이 됐다면 이후에는 그냥 native code를 실행한다고 한다.

 

그리고 이 JIT 컴파일에게는 장점이 있는데, 바로 '캐시를 이용한다는 점'이라고 한다.

   일단 자바스크립트 코드를 바이트 코드로 변환하는 과정까지는 왔다.

   이때 인터프리터 방식을 사용하면 바이트 코드를 한 줄씩 읽고 실행하기 때문에

   반복되는 부분도 계속 바이트코드를 해석하고, 실행하고, 해석하고, 실행하게 된다고 한다.

 

   하지만 JIT 컴파일은 native code를 캐시에 보관하고 있기 때문에 반복되는 부분은 캐시에 보관된 native code를 실행한다고 한다.

   바로 캐시에서 꺼내 실행하기 때문에 빠르게 수행할 수 있다고 한다.

   (JIT 컴파일은 마치 뭐라고 해야할까. 인터프리터 방식에 컴파일 방식을 약간 조미료처럼 첨가한 느낌이다)

   대신 JIT 컴파일러가 컴파일 하는 과정은 인터프리터 방식보다 더 오래 걸린다고 한다.

 

얼추 JIT 컴파일의 동작 과정을 찾고 보니까 JIT 컴파일 방식과 인터프리터 방식이 어떻게 다른지 알 것 같다.

 

추가적으로, JIT 컴파일은 JavaScript에서 사용하기에는 몇가지 문제가 있기 때문에

최근의 자바스크립트 엔진들은 대부분 Adaptive JIT Complilation 방식을 사용한다고 한다.

그 부분과 최적화에 대한 설명은 NHN Cloud의 글을 마저 참고하자.

https://meetup.toast.com/posts/77

자바스크립트 엔진의 최적화 기법 (1) - JITC, Adaptive Compilation : NHN Cloud Meetup

 

또한, 소스코드에서 반복되는 코드는 어떻게 JIT가 처리한다는 것인지 아래의 글에 잘 나와있었다.

어느정도 자바스크립트를 잘 알고 있을 때, 꼭 읽어보면 좋을 것 같다.

https://dongwoo.blog/2017/06/06/%EB%B2%88%EC%97%AD-%EC%A0%80%EC%8A%A4%ED%8A%B8-%EC%9D%B8-%ED%83%80%EC%9E%84jit-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC-%EC%A7%91%EC%A4%91-%EC%BD%94%EC%8A%A4/

[번역] 저스트-인-타임(JIT) 컴파일러 집중 코스

 

 

자바스크립트 엔진에 대해서 공부하려다가 인터프리터와 JIT 컴파일에 대해서 너무 깊게 알아버린 것 같다.

덕분에 글이 너무 길어져서 한템포 끊고 가기로 했다.

다음에 마저 자바스크립트 엔진에 대해서 공부해야겠다.

---

참고자료1 : 위키백과-자바스크립트 엔진

자바스크립트 엔진 - 위키백과, 우리 모두의 백과사전

 

참고자료2 : https://samslow.github.io/development/2020/07/06/JIT/

Javascript 기초 - JavaScript 개발한다면 JIT은 알아야JIT

 

참고자료3 : https://meetup.toast.com/posts/77

자바스크립트 엔진의 최적화 기법 (1) - JITC, Adaptive Compilation : NHN Cloud Meetup

 

참고자료4 : https://ko.wikipedia.org/wiki/JIT_%EC%BB%B4%ED%8C%8C%EC%9D%BC

JIT 컴파일 - 위키백과, 우리 모두의 백과사전

 

참고자료5 : https://steady-snail.tistory.com/67

[JAVA] JVM 동작원리 및 기본개념

 

---

예전에 Java를 공부하면서 어디에선가 그런 이야기를 들었다.

컴파일러에게 너무 많고 유용하고 완벽한 기능들을 탑재시키면, 프로그래머는 편하겠지만

컴파일러가 너무 무거워져서 코드를 한번 실행할 때마다 식사를 하고 와야할지도 모른다는 이야기 말이다.

 

그래서 인터프리터나 JIT 컴파일러도 너무 많은 기능을 갖고 있지 않은 것이겠지.

 

 

한가지 더 깨달은 점은 자바스크립트 엔진이 소스코드를 실행하는 방식에 대해서 알아보다보니

정말 개발에 능한 능력자분들은 JIT 컴파일의 동작 원리를 충분히 이해하고 (JIT 컴파일러의 캐싱 등)

이 과정에서 어떻게 더 빠르게 코드를 실행시킬 수 있을지 고민을 많이 하고 계시다는 것을 알 수 있었다.

 

가령, JIT 컴파일에 대해 공부하기 위해 여러 글을 읽다보니 대충 아래와 같은 이유로 코드를 대충 휘갈기면 안되고(?)

최적화가 필요한거구나 깨달았다.

 

1. JIT 컴파일러는 동일한 반복 작업 등을 발견하면

    굳이 컴파일을 다시 하지 않고 (캐시에 저장된) 컴파일된 버전을 수행한다. 이런 과정 덕분에 속도가 향상된다.

2. 하지만 99번은 항상 같은 모양을 하다가 100번째에서 프로퍼티가 하나 빠졌다면? 다른 모양이라면?

     컴파일러는 컴파일된 버전을 수행하지 않고 다시 인터프리터 버전으로 돌아간다.

     이러면 인터프리터 방식보다 훨씬 느려지게 된다. (100번째까지 같은 모양인지 체크를 하는 과정에 시간을 다 써서)

3. 이런 것들이 실행 속도에 영향을 주기 때문에

     코드를 작성할 때 어떤 어떠한 것을 고려해야한다. (최적화 기법 등)

 

하나의 개념을 파고 파며 공부를 해도 아직 공부할게 남아있다니 실로 놀랍다.