[javascript] 자바스크립트를 알아보자!

Mandy·2022년 9월 24일
JavaScript엘리스SW엔지니어트랙
0
post-thumbnail

엘리스 SW 엔지니어 트랙 3기를 2주차가 마무리된 시점에서 1~2주차 학습 내용을 회고하려 합니다.
이번 포스트에서는 2주차 수업에서 자바스크립트에 대해 배운것을 정리해보고자 합니다.

자바스크립트는 무엇인가?

JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어입니다.
-mdn-

자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어입니다.
-javascript.info-

Javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어입니다.
-생활코딩-

한마디로 자바스크립트란,
<HTML, CSS로 구성한 웹 페이지에 생동감있고 복잡한 기능을 구현할 수 있도록 해주는 프로그래밍 언어> 입니다.

HTML로 페이지의 구조를 만들고 CSS로 구조가 잡힌 페이지를 스타일 적용시켜 꾸며준 후 자바스크립트로 기능들을 동작하게끔 만들어줌으로써 특정 기능으로 동작하는 꾸며진 페이지가 완성되는 것이라고 볼 수 있습니다.

▲ JavaScript 없이 HTML, CSS로만 구현했을때 (그저 숨만 쉬며 존재하는 중)





▲ HTML, CSS, JavaScript가 삼위일체를 이루어 댄싱머신이 되었다.(이와중에 js가 머리)


하지만, 이렇게 유용한 자바스크립트도 코드의 존재 자체만으로 기능을 동작하게 하는건 아니라는것이 중요합니다! 브라우저에 내재된 자바스크립트 엔진을 통해서 우리가 작성한 자바스크립트 코드를 읽고 화면에 보여주는것입니다.








자바스크립트 엔진

자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이며 모든 자바스크립트 엔진은 ECMAScript의 표준을 따릅니다.
  • ECMA스크립트(ECMAScript)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말합니다. 자바스크립트를 표준화하기 위해 만들어졌습니다.





자바스크립트 엔진의 종류



자바스크립트 엔진은 대표적으로 V8이 있으며, C++로 작성된 Google의 오픈 소스 고성능 JavaScript 및 WebAssembly 엔진입니다. Chrome 및 Node.js 등에서 사용됩니다.
속도 향상을 위해 V8은 JIT Compiler (Just-In-Time)를 구현하였으며, JIT Compiler는 인터프리터와 컴파일러를 합친 것으로 자바스크립트 코드 실행시점에서 인터프리터 방식으로 바이트 코드를 생성합니다. 그 후 V8 Engine은 바이트 코드를 기계어 코드로 만들고, 그 코드를 캐싱하여, 같은 함수가 여러 번 불릴 때 매번 기계어 코드를 생성하는 것을 방지합니다. 복잡한 최적화 과정은 바이트코드 컴파일러가 대신 해주므로 사용자가 고려하지 않아도 되며, 빠른 속도로 수행되는 장점이 있습니다.



V8의 메모리구조

메모리힙(Memory Heap): 사용자에 의해 동적 메모리 할당 및 관리가 이루어지는 곳입니다. 특징으로는 스택보다 느리게 할당되며 용량이 크고 스택 영역보다 유연한 메모리 할당이 가능하다는 것이 있습니다. 다만, 할당된 메모리를 제대로 반환하지 않을 경우 메모리 누수가 발생합니다.

콜스택(Call Stack): 코드가 실행되면서 스택 프레임이 쌓이는 곳입니다. 빠르게 접근과 메모리 할당이 가능하며 메모리 낭비없이 사용이 가능합니다. 그렇지만 용량이 매우 작습니다.

콜스택과 메모리힙으로 안나눴을때 상황.gif (메모리 낭비중)

작성된 프로그램이 얼마만큼의 메모리를 사용할지에 대해서 알 수 없는 상황에서 메모리를 낭비하는 것은 안좋기 때문에 이처럼 메모리힙과 콜스택으로 나누어 메모리를 할당하는 것입니다.



런타임 환경

런타임 환경은 컴퓨터가 실행되는 동안 프로세스나 프로그램을 위한 소프트웨어 서비스를 제공하는 가상 머신의 상태입니다.
운영 체제 자체에 속하는 경우도 있고 운영 체제에서 작동하는 소프트웨어를 뜻할 수도 있습니다.


위에서 알아본 자바스크립트 엔진과 엔진의 메모리구조로 인해 자바스크립트가 어떤 원리로 동작하는지에 대해서 이전에 포스팅한 적이 있는데,


포스팅 당시에는 런타임 환경을 구성하는 각 요소에 대한 기본적인 소개를 건너뛰고 런타임 환경에 대한 이해를 돕고자 쉬운 표현을 사용하여 글을 작성했기에 이번 포스팅에서는 각 요소를 더 자세히 알아보도록 하겠습니다.
본격적으로 Web API 부터 알아봅시다!

Web API

Web API 란 무엇일까요? 단어만 살펴보면 웹의 API 라는 느낌이 드는데, 그러면 API는 또 무엇인가? 라는 생각이 듭니다.

API는 Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말입니다.
소프트웨어 프로그램(애플리케이션) 내부에 존재하는 기능 및 규칙의 집합입니다. 즉, API는 API를 제공하는 애플리케이션과 서드파티 소프트웨어 및 하드웨어 등의 것들 사이의 간단한 계약(인터페이스)이라고도 볼 수 있습니다.

Web API 또는 Web Service API는 웹 서버와 웹 브라우저 간의 애플리케이션 처리 인터페이스입니다. 모든 웹 서비스는 API이지만 모든 API가 웹 서비스는 아닙니다.

한마디로 Web API는 웹 서버와 웹 브라우저간에 애플리케이션 처리 인터페이스이자 애플리케이션 내부에 존재하는 기능 및 규칙의 집합이라고 할 수 있습니다!

mdn의 Web API 문서에서 명세에 포함된 항목들이 모두 Web API들이며 DOM, File API, Network Information API, XMLHttpRequest 등이 있습니다.
그런데, 이 Web API들은 자바스크립트 엔진에서 제공하지 않고 브라우저가 제공합니다!
런타임 환경을 요약한 그림을 가져왔습니다. 어두운 회색의 박스안에 포함된 요소들이 자바스크립트 엔진이며 박스를 포함한 전체 공간이 웹 브라우저라고 볼 수 있습니다.
콜스택과 메모리힙에 대한 내용은 위에서 V8의 메모리 구조를 설명할때 포함되었기에 위 그림을 이해하기 위해서 싱글스레드, 이벤트 루프, 태스크 큐에 대해서 알아보도록 하겠습니다!

싱글스레드

스레드란?
스레드는 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위 입니다.
일반적으로 한 프로그램은 하나의 스레드를 가지고 있지만, 프로그램 환경에 따라 둘 이상의 스레드를 동시에 실행할 수 있습니다. 이러한 실행 방식을 멀티스레드(multithread)라고 합니다.
그리고 이와 상반되게 한 프로세스당 하나의 스레드만을 실행하는 방식을 싱글스레드(singlethread)라고 합니다.

자바스크립트는 기본적으로 단일 호출 스택을 사용하는 엔진 환경에서 작업을 싱글스레드로 처리합니다. 즉, 단 하나의 호출 스택을 사용하며 호출 스택에 쌓인 함수나 코드를 위에서부터 순차적으로 실행합니다.
자바스크립트 엔진은 현재 스택에 쌓여있는 모든 함수들이 실행을 마치고 스택에서 제거되기 전까지는 다른 어떠한 함수도 실행될 수 없습니다.

스택은 후입선출 원리 (LIFO(last in first out))에 따라 정렬된 컬렉션이므로 마지막으로 들어온 함수나 코드를 가장 먼저 실행합니다.

이벤트 루프(Event Loop)

기본적인 자바스크립트의 동작은 싱글스레드이나, 브라우저나 Node.js가 제공하는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원합니다.
Node.js는 비동기 IO를 지원하기 위해 libuv 라이브러리를 사용하며, 이 libuv가 이벤트 루프를 제공합니다.

(Task Queue Task 는 태스크 큐에서 대기중인 작업 이라는 의미입니다. 영알못이라)

이벤트 루프는 콜 스택이 비어있을때, 태스크 큐의 작업을 콜 스택으로 옮겨주는 역할을 합니다.




태스크 큐(Task Queue)

콜백 함수들이 대기하는 큐(FIFO(First In First Out :선입선출) 형태의 배열이며 Web APIs에서 넘겨받은 Callback 함수를 저장하는 공간입니다.


자바스크립트 코드가 실행되는 일련의 과정을 다음과 같이 설명할 수 있습니다.

  1. Call Stack에 자바스크립트로 작성한 함수 main() 과 setTimeout() 메서드가 순차적으로 쌓이게 됩니다.
    그리고 setTimeout() 메서드는 Web API에 속하는 비동기 처리이기 때문에 Web API로 콜백 함수를 전달하고 setTimeout 작업을 요청합니다.
    setTimeout()는 브라우저에게 타이머 이벤트를 요청한 후에 바로 스택에서 제거됩니다. 그리고 쌓여있던 main() 함수가 실행됩니다.


2. main() 함수가 실행되고 나면 Web API는 setTimeout 작업을 실행하고 딜레이 설정 시간 이후 Task Queue로 함수를 보냅니다.
모든 비동기 API들은 작업이 완료되면 콜백 함수를 Task Queue에 추가합니다.


3. Event Loop는 Call Stack이 비어있으면 Task Queue에서 함수를 하나씩 꺼내 Call Stack에 넣고 실행합니다.
만약 Call Stack에 함수들이 너무 많이 차있으면 정확히 타임아웃 딜레이 시간 후에 실행되지 않을 수도 있습니다.
Event Loop는 Call Stack이 비어있을 때만 Task Queue의 함수를 Call Stack으로 가져오기 때문입니다.
그렇기에 setTimeout() 함수를 실행하더라도 딜레이 시간이 정확하지 않을 수도 있습니다.

이처럼 자바스크립트는 비동기적 함수를 처리해주는 브라우저와 동기적으로 처리해주는 엔진 덕분에 더욱 편리하게 사용할 수 있게 되었습니다. 자바스크립트의 정의와 자바스크립트 엔진, 런타임 환경을 알아보며 자바스크립트에 대해 기초적인 지식을 습득하고 이해할 수 있었던 유익한 시간이였습니다. 자바스크립트와 관련된 포스팅을 자주 하며 앞으로 더 알아가고 싶네요!



여기까지 자바스크립트의 기초를 알아보는 과정이였습니다!
읽어주셔서 감사합니다.😉



참조 링크

profile
Mandy
즐코 행코 하세용
이전 포스트

[javascript] 자바스크립트 동작 원리

다음 포스트

[javascript] DOM

0개의 댓글