[JS] DeepDive 02. 자바스크립트란?

2.1 자바스크립트의 탄생

• 1995년, 90%의 시장 점유율로 웹 브라우저 시장을 지배하던 넷스케이프 커뮤니케이션즈.
  Brendan Eich가 자바스크립트 개발.
• Mocha -> LiveScript -> JavaScript 로 이름이 바뀜.

2.2 자바스크립트의 표준화

• 1996년 마이크로소프트가 JScript라는 파생 버전을 출시함.
• 넷스케이프 커뮤니케이션즈와 마이크로소프트는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능 추가하기 시작함.
• -> 최초의 크로스 브라우징 이슈
• 넷스케이프 커뮤니케이션즈는 ECMA 인터내셔널에 자바스크립트의 표준화를 요청함.
• 1997년, 자바스크립트는 ECMAScript로 명명됨. (초판, ES1)
• 2015년에 공개된 ECMAScript 6(ECMAScript 2015, ES6)은 범용 프로그래밍 언어로서 갖춰야할 기능을 대거 도입함.

2.3 자바스크립트 성장의 역사

2.3.1 Ajax (Asynchronous JavaScript and XML)

• Ajax: 비동기 방식으로 서버와 브라우저 간 데이터를 교환하는 통신 기능 (XMLHttpRequest).
• 이전 방식: 전체 HTML을 서버에서 받아와 웹페이지 전체를 렌더링.
  • 불필요한 데이터 통신과 성능 저하.
  • 변경 필요 없는 부분도 다시 렌더링, 화면 전환 시 깜박임 발생.
• Ajax의 장점: 필요한 데이터만 서버에 요청하고, 해당 부분만 업데이트하여 성능 개선.
  • 비동기적 처리: 페이지를 새로고침하지 않고도 서버와 통신하며, 사용자 인터페이스가 중단되지 않음.
  • 2005년 구글 맵스: 웹 브라우저에서 자바스크립트와 Ajax를 기반으로 동작. 데스크톱 애플리케이션과 비교했을 때 손색 없는 성능으로 주목 받음.

2.3.2 jQuery

• jQuery: JavaScript 라이브러리로, DOM(Document Object Model)을 쉽게 제어할 수 있도록 도와줌.
• DOM 제어가 쉬운 이유:
  • jQuery는 간결한 문법을 통해 복잡한 DOM 요소 선택, 조작, 이벤트 처리를 간단하게 할 수 있음.
  • 예: document.getElementById('myElement') 대신 $('#myElement')처럼 간단한 문법 제공.
• 크로스브라우징 이슈 해결:
  • jQuery는 브라우저 간의 차이를 내부적으로 처리하여, 여러 브라우저에서 동일한 코드로 일관된 동작 보장.
  • 예: 특정 브라우저에서의 이벤트 처리 문제를 자동으로 보완.

2.3.3 V8 자바스크립트 엔진

• 2008년, 구글의 V8 자바스크립트 엔진의 등장
• 데스크톱 애플리케이션과 유사한 사용자 경험(UX; user experience) 제공 가능
• 웹 서버에서 수행되던 로직들이 클라이언트(브라우저)로 이동하게 됨

-> 웹 어플리케이션 개발에서 프론트엔드 영역 주목 받는 계기

2.3.4 Node.js

• 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(runtime environment)
• 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크리븥 실행 환경
• 특징:
  • 비동기 I/O 지원
  • 단일 스레드(single thread) 이벤트 루프 기반으로 동작.
  • -> SPA(Single Page Application)에 적합. (데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하기 때문)
  • -> CPU 사용률이 높은 애플리케이션에는 권장하지 않음.

2.3.5 SPA 프레임워크

• 모던 웹 애플리케이션: 데스크톱 애플리케이션에 손색 없는 성능 필요, 개발 규모와 복잡도 상승.
• -> CBD(Component based development) 방버론을 기반으로 하는 SPA 대중화.
• Angular, React, Vue.js, Svelte 등 다양한 SPA 프레임워크/라이브러리 등장

2.4 자바스크립트와 ECMAScript

• ECMAScript: 자바스크립트 표준 사양인 ECMA-262
• 각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현함.
• 자바스크립트: ECMAScript(프로그래밍 언어로서의 뼈대, core) + 클라이언트 사이드 Web API를 아우름
  • 클라이언트 사이드 Web API: DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등.
  • 클라이언트 사이드 Web API는 ECMAScript와는 별도로, 월드 와이드 웹 콘소지엄(World Wide Web Consortium; W3C)에서 별도 사양으로 관리함.
  • https://developer.mozilla.org/en-US/docs/Web/API

2.5 자바스크립트의 특징

• 웹 브라우저에서 동작하는 유일한 프로그래밍 언어.
• 인터프리터 언어(interpreter language) : 개발자가 별도의 컴파일 작업을 수행하지 않음.

특징	컴파일러 언어 (Compiled Language)	인터프리터 언어 (Interpreted Language)
번역 및 실행 방식	컴파일 타임에 소스코드를 전체적으로 한 번에 머신 코드로 변환 후 실행	런타임에 문 단위로 한 줄씩 중간 코드(바이트코드)로 변환 후 즉시 실행
실행 파일 생성	실행 파일 생성	실행 파일 생성 없음
단계 분리	컴파일 단계와 실행 단계가 분리됨	인터프리트 단계와 실행 단계가 분리되지 않음
실행 횟수	컴파일은 단 한 번 수행됨	인터프리터는 한 줄씩 바이트 코드로 변환하고 즉시 실행, 이 과정이 반복됨
코드 실행 속도	코드 실행 속도가 빠름 (컴파일과 실행 단계가 분리되어 있음)	코드 실행 속도가 느림

모던 브라우저에서 사용되는 인터프리터는 전통적인 컴파일러 언어처럼 명시적인 컴파일 단계를 거치지 않지만, 실행 중에 일부 코드를 동적으로 컴파일하여 실행한다. 이 과정에서는 자주 사용되는 코드나 최적화가 가능한 부분을 미리 컴파일해 두어, 다음에 같은 코드가 실행될 때 더 빠르게 동작할 수 있도록 한다. 이를 통해 인터프리터 언어의 동적 기능 지원이라는 장점을 유지하면서도, 실행 속도가 느리다는 단점을 극복한다.

2.6 ES6 브라우저 지원 현황

• https://compat-table.github.io/compat-table/es6/
• 브라우저에서 아직 지원하지 않는 최신 기능을 사용하거나 구형 브라우저를 고려해야 하는 상황이라면 바벨(Babel)과 같은 트랜스파일러를 사용해 ES5 이하의 사양으로 다운그레이드 해야 함.

 

🙋 질문: 바벨이 무엇인가요? 어떤 상황에서 사용하나요?

 

 

『모던자바스크립트 Deep Dive』 를 공부하며 정리한 기록입니다.