프론트엔드 개발자의 기록 공간

[JavaScript DeepDive] 1~3장 본문

모던 자바스크립트 Deep Dive

[JavaScript DeepDive] 1~3장

[리우] 2022. 1. 20. 17:02

📖 학습 목차

  • 01장_프로그래밍
  • 02장_자바스크립트란?
  • 03장_자바스크립트 개발 환경과 실행 방법

 

✅ Ajax

초창기 자바 스크립트는 웹페이지의 보조 기능을 수행하기 위한 용도로 사용되었다.

대부분의 로직은 웹 서버에서 실행되었고, 브라우저는 서버로부터 받은 HTML과 CSS를 단순 렌더링하는 수준이었다.

1999년, 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 Ajax XMLHttpRequest라는 이름으로 등장했다.

 

초기의 웹페이지는 변경이 필요할 때, 서버로 부터 받은 HTML 파일을 교체하는 방식으로 렌더링이 진행 됐다.

때문에, 바뀌지 않아야 할 부분까지 다시 전송 받고 렌더링해야하기 때문에 불필요한 통신이 발생하고, 깜빡거림 등과 같은 성능적으로 이슈가 있었다.

 

하지만 Ajax의 등장으로 변경이 필요한 부분만 서버로 부터 전송받아 변경하는 한정적인 렌더링 방식으로 빠른 성능과 부드러운 화면 전환이 가능해졌다.

 

대표적으로 2005년, 구글에서 JS와 Ajax 기반으로 동작하는 구글 맵스는 데스크톱 애플리케이션과 비교했을 때 손색이 없을 정도의 성능과 부드러운 화면 전환을 보여주었다.

 

✅ jQuery

jQuery 등장으로 DOM을 더욱 쉽게 제어할 수 있게 되었고, 크로스 브라우징 이슈도 어느 정도 해결되었다.

자바스크립트 보다 배우기 쉽고 직관적인 jQuery 문법 덕분에 많은 인기를 얻었다.

HTML
//menu id의 li들의 색상 바꾸는 예시

<body>
	<ul id="menu">
    	<li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
    </ul>
</body>
JavaScript
//menu 노트 찾기
var menu = document.getElementById("menu");
//li 리스트 구하기
var liList = menu.getElementsByTagName("li");
//li 개수만큼 루프 돌며 스타일 변경
for(var i=0;i<liList.length;i++){
	//i번째 li 접근
    var li = liList[i];
    //스타일 변경
    li.style.color="#f00";
}

 

jQuery
$("#menu li").css("color", "#f00");

 

✅ V8 자바스크립트 엔진

Ajax등 웹 애플리케이션의 발전으로 더욱 빠르게 동작하는 자바스크립트 엔진의 필요성이 대두되었다.

2008년 구글은 V8 자바스크립트 엔진을 만들었다. V8은 Google Chrome과 NodeJS에서 사용되고 있으며 ECMAScript와 Web Assembly를 표준에 맞게 구현하였다.

 

V8 자바스크립트 엔진으로 괴거 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동했고, 이는 웹 애플리케이션 개발에서 프론트엔드 영역이 주목받는 계기로 작용했다.

 

✅ Node.js

2009년, 라이언 달이 발표한 Node.js는 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.

 

Node.js는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다. Node.js는 다양한 플랫폼에 적용할 수 있지만 서버 사이드 애플리케이션 개발에 주로 사용되며, 이에 필요한 모듈, 파일 시스템, HTTP등 내장 API를 제공한다.

 

Node.js는 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋다. 따라서 Node.js는 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합하다. 하지만 CPU 사용률이 높은 애플리케이션에는 권장하지 않는다.

 

✅ JavaScript

자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API, 즉 DOM, BOM, Canvas, XMLHttpRequest, fetch 등을 아우르는 개념이다.

 

🟦 자바스크립트 특징

자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.

대부분의 모던 자바스크립트 엔진(크롬 V8, 사파리 JavaScriptCore 등)은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결했다.

하지만 대부분의 모던 브라우저에서 사용되는 인터프리터는 전통적인 컴파일러 언어처럼 명시적인 컴파일 단계를 거치지지는 않지만 복잡한 과정을 거치며 일부 소스코드를 컴파일하고 실행한다.

이를 통해 인터프리터 언어의 장점인 동적 기능 지원을 살리면서 실행 속도가 느리다는 단점을 극복한다.

 

🟦 자바스크립트 실행 환경

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다.

Node.js도 자바스크립트 엔진을 내장하고 있다. 따라서 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있다. 

하지만 용도가 다르기 때문에 브라우저와 Node.js 모두 자바스크립트 코어인 ECMAScript를 실행 할 수 있지만 그 외에 추가로 제공하는 기능은 서로 호환되지 않는다.

 

예를 들어, 브라우저는 HTML요소를 조작하는 DOM API를 기본적으로 제공해서 사용할 수 있다. 하지만 Node.js에서는 이러한 DOM API가 없기 때문에 사용할 수 없다.

반대로 Node.js에서는 파일을 생성하고 수정하는 파일 시스템을 기본 제공하지만 브라우저는 이를 지원하지 않는다.

브라우저와 Node.js 환경

 

👨‍💻 첫 번째날은 JavaScript의 역사와 특징 위주로 학습을 진행했다. 솔직히 V8, Node.js, Ajax 등 각각의 개념에 대해서는 알고 있었지만, 어떤 흐름을 통해 탄생이 되었고 서로 어떤 상호작용이 있는지에 대해서는 관심이 없었었다.

이번에 각각의 개념에 대해서 명확하게 알 수 있었고, 블로그에 정리하는 과정을 통해 온전히 이해할 수 있었다.

앞으로도 학습할 때마다 정리본과 더불어 TIL을 작성할 예정이다.

728x90
저작자표시

'모던 자바스크립트 Deep Dive' 카테고리의 다른 글

[JavaScript DeepDive] 13~15장  (0) 2022.02.10
[JavaScript DeepDive] 12장_함수  (0) 2022.02.09
[JavaScript DeepDive] 10~11장  (0) 2022.01.27
[JavaScript DeepDive] 7~9장  (0) 2022.01.25
[JavaScript DeepDive] 4~6장  (0) 2022.01.24
'모던 자바스크립트 Deep Dive' Related Articles more
Comments