모던 자바스크립트 Deep Dive - 1

✅ 아래 내용들에 대해서 알아보자

- JavaScript란?
- JavaScript 역사
- JavaScript 특징
- Ajax/JQuery/V8 엔진/Node.js
- NPM

 

JavaScript란

 자바 스크립트는 브랜던 아이크가 넷스케이프 커뮤니케이션즈에서 일하면서 1995년에 개발한 언어로 당시 넷스케이프가 잘 나가는 IE의 대항마격인 웹 브라우저를 만드려고 아이크에게 Scheme을 만들어 달라고 했었으나 아이크가 언어 하나를 새로 개발하였고 이름을 모카 ->라이브 스크립트 -> JavaScript(자바가 큰 인기를 끌게 된 시대였음)로 최종적으로 결정되었다.(아이크는 Firefox도 만들었음) 

 

JS가 없는 화면

 

 

JavaScript 역사

 1996년 8월 MS는 Jscript를 IE 3.0에 탑재하였고 이로 인해 JS는 위기를 맞게 된다. 하지만 JScript는 브라우저에 따라 웹페이지가 정상 동작하지 않는 크로스 브라우징 이슈 발생하였고 결과적으로 모든 브라우저에서 정상 동작하는 웹페이지 개발하기가 무척 어려워졌다.

 

이에 표준화된 자바스크립트의 필요성이 대두되기 시작하였고, 이를 위해 넷스케이프는 ECMA 인터내셔널에 JS 표준화를 요청하여 1997년 7월 ECMA-262라 불리는 표준화된 JS 초판 스펙이 완성되었다.(상표권 문제로 JS를 ECMAScript로 명명)

 

초창기 JS는 웹 페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었고, 브라우저는 서버로부터 전달받은 HTML/CSS를 단순히 렌더링 하는 수준이었다(*렌더링 : HTML, CSS, JS로 된 파일들을 해석해서 브라우저에 시각적으로 출력하는 것을 말한다. SSR/CSR 등이 존재한다.)

 

ECMA 스크립트 유래

 

JavaScript 특징

 JS는 웹 브라우저에서 실행되는 동작하는 유일한 프로그래밍 언어로 다양한 특징을 가진다.

• 동적 타입 언어 지원  : 변수의 데이터 타입을 미리 지정하지 않고 런타임시 결정된다
• 함수형 프로그래밍 지원 : 일급 함수, 람다 등 지원
• 객체지향 프로그래밍 지원 : 객체를 생성하고 조작할 수 있는 다양한 기능 제공
• 이벤트 기반 프로그래밍 : 웹 페이지 이벤트(클릭, 마우스 오버 등) 및 콜백함수를 작성하여 인터렉티브 한 event-drivent-develop을 지원한다.
• 다양한 라이브러리와 프레임워크 : 라이브러리(jQuery, React, Vue.js ..) 프레임워크(Node.js, Angular..)

 

 

아래는 컴파일러 언어와 인터프리터 언어의 차이점을 비교하였다.

컴파일러 언어	인터프리터 언어
코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 머신(기계어) 코드로 변환한 후 실행한다.	코드가 실행되는 단계인 런타임에 문 단위로 한줄씩 중간 코드인 바이트코드로 변환 후 실행한다.
실행 파일 생성	실행 파일 생성 x
컴파일 단계와 실행 단계가 분리되어 있다. 명시적인 컴파일 -> 실행 과정으로 실행	인터프리트 단계와 실행 단계가 분리되어 있지 않다. 인터프리터는 한 줄씩 바이트코드로 변환하고 즉시 실행
실행 전 컴파일은 단 한번만 수행됨	코드가 실행될 때마다 인터프리트 과정이 반복 수행됨
컴파일과 실행 단계가 분리되어 있으므로 코드 실행 속도가 빠르다.	인터프리트 단계와 실행 단계가 분리되어 있지 않고 반복 수행되므로 코드 실행 속도가 비교적 느리다.
C, C++, Java, Swift 등	JS, Python, Ruby, PHP

 

 

추가적으로 JAVA vs JS 차이점을 비교해 보았다.

	JAVA	JavaScript
구문	정적 타입 언어로 변수의 타입을 선언해야 함	동적 타입 언어로, 변수 타입이 런타임시 결정됨
실행 환경	JVM 위에서 실행됨	브라우저나 Node.js와 같은 런타임 환경에서 실행됨
문법	세미콜론(;) 사용	세미클론(;) 사용하지 않아도 됨
타입	원시 타입(Primitive), 참조(Reference) 타입으로 나뉨	원시 타입, 객체 타입으로 나뉨

 

 

Ajax

 1999년, JS를 이용해 서버와 브라우저가 비동기(Async) 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 등장하였다.

이전의 웹페이지는 서버로부터 html 코드를 전송받아 렌더링 하는 방식으로 동작하였고, 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 다시 렌더링 하였다.(이러한 방식은 불필요한 통신을 발생시키고 성능면에서도 비효율적, 화면 전환 시 깜박이는 현상 발생하였음)

 

Ajax는 JS를 사용하여 웹 페이지 새로고침 없이도 서버로부터 데이터를 가져와 변경할 필요가 없는 부분은 다시 렌더링 하지 않고 필요한 부분만 한정적으로 렌더링 하는 방식이다. XMLHttpRequest 객체를 사용하여 서버와 통신하고 동적으로 데이터를 받아와 처리하여 불필요한 자원 낭비를 최소화할 수 있다. ex) 구글 맵스

 

 

 

JQuery

 jQuery는 2006년에 등장한 JS 라이브러리 중 하나로 DOM 조작, 이벤트 처리, 애니메이션 등을 쉽게 처리할 수 있도록 다양한 기능을 제공한다. 

• 크로스 브라우징 기능 지원
• 다양한 플러그인이 내포되어 있음 
• 이벤트 처리 및 Ajax 호출 

 

 

V8 JS 엔진

 v8 엔진은 구글에서 개발한 오픈소스 JS 엔진으로 크롬 브라우저와 Node.js에서 사용된다. V8 엔진은 JS 코드를 빠르게 실행할 수 있도록 최적화되어 있다.

• V8 엔진은 JIT(Just-In-TIme) 컴파일러를 사용하여 JS 코드를 컴파일하고 최적화된 바이너리 코드로 변환하여 빠른 실행 속도를 보장해 준다.
• GC를 사용하여 Memory Leak를 방지한다.

 

 

Node.JS

 node.js는 v8 엔진 기반으로 만들어진 오픈 소스 런타임 환경이다. node.js는 브라우저 이외의 환경에서도 js를 동작할 수 있도록 제공하며 다양한 기능 제공 및 특징을 가진다.

• 비동기 I/O 지원하며 단일 스레드 이벤트 루프 기반으로 동작하여 성능이 좋음
• 실시간 처리를 위해 I/O가 빈번하게 발생하는 SPA 적합
• CPU 사용률이 높은 환경에서는 권장되지 않음
• JS를 사용하여 서버 측에서 DB, 파일 시스템, 네트워크 등의 작업 수행 가능
• Restful API, 채팅, 게임 등 개발 가능

 

 

NPM

 npm은 Node.js 패키지 관리자로 Node.js 환경에서 모듈을 설치하고 관리하는데 사용되는 오픈 소스 패키지 관리 도구이다.

JS 기반 프로젝트에서 사용되며 Gradle과 같이 빌드 자동화와 의존성을 관리해주는 도구이다.

---

참고자료

• https://namu.wiki/w/%EB%B8%8C%EB%9E%9C%EB%93%A0%20%EC%95%84%EC%9D%B4%ED%81%AC
• https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8