2.1 자바스크립트의 탄생
- 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정한다. 이렇게 탄생한 것이 자바스크립트 🤤🤤
2.2 자바스크립트의 표준화
- 1996년 8월, 마이크로소프트는 자바스크립트의 파생 버전인 Jscript를 IE 3.0 에 탑재했다. 하지만 문제는 적당히 호환되었다는 것!
- 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하면서 모든 브라우저에서 정상적으로 동작하는 웹페이지를 개발하기가 어려워졌다.
- 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 자바스크립트의 필요성이 대두되면서 ECMA-262라 불리는 자바스크립트 초판이 완성됨
2.3 자바스크립트 성장 역사
2.3.1 AJax
- 1999년, 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 XMLHttpRequest 라는 이름으로 등장!
- 퉵페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이 가능해졌다. 🙊
- 렌더링이란? html, css, js 로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것
2.3.2 jQuery
- 2006년, jQuery의 등장으로 다소 번거롭고 논란이 있던 Dom 을 더욱 쉽게 제어할 수 있게 되었음!
- 크로스 브라우징 이슈도 어느정도 해결됨.
- 하지만 요근레 jQuery의 비효율성을 주장하는 의견이 많아졌다.
- 제이쿼리의 가장 큰 단점은 속도이다. 속도가 순수 자바스크립트로 코딩한 것보다 현저히 느리다. 특히 애니메이션을 할 경우, 브라우저가 지원하는 css 애니메이션보다 느린 경우가 많다. (브라우저는 특정 상황에서 GPU를 사용해서 애니메이션을 표현하기 때문에 훨씬 빠르다)
2.3.3 V8 자바스크립트 엔진
- 구글 맵스를 통해 웹앱 프로그래밍 언어로서의 가능성이 확인된 자바스크립트로 웹앱을 구축하려는 시도가 늘면서 자바스크립트 엔진의 필요성이 대두됨!
- 2008년 구글의 V8 자바스크립트 엔진이 등장하게 되었다.
2.3.4 Node.js
- 2009년, Node.js 는 구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
- 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경
- 비동기 I/O 를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋다.
- 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA(Single Page Application)에 적합하다.
- CPU 사용율이 높은 애플리케이션에서는 권장하지 않음 (이럴 경우 spring, spring boot 를 권장)
2.3.5 SPA 프레임워크
- 모던 웹 애플리케이션은 성능과 사용자 경험을 제공하는 것이 필수가 되었다. (+ 개발 규모와 복잡도 ⬆ )
- 이러한 요구에 맞춰 CBD (Component based development) 방법론을 기반으로 하는 SPA(Single Page Application) 가 대중화되면서 Angular, React, Vue.js, Svelte 등 다양한 프레임워크/라이브러리가 등장했다.
2.4 자바스크립트와 ECAMScript
- ECAMScript는 자바스크립트의 표준 사양인 ECMA-262를 말한다.
- 자바스크립트는 기본 뼈대를 이루는 ECAMScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API, 즉 Dom, Bom, Canvas, XMLHttpRequest, fetch 등을 아우르는 개념이다.
2.4 자바스크립트의 특징
- html, css와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
- 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어
- 명령어, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
🌳 느낀점
- 웹개발을 진행하면서 크로스 브라우징 이슈를 경험한 적이 있었는데, 정말 .. 답이 없었다.
- Javascript 관련 역사들을 살펴보면서 플로우가 머릿속에 정리되었다. 현재 Ajax 와 Jquery를 자주 사용하고 있었는데 역사를 알고 보니 더욱 흥미로웠던 것 같다.
위 글은 위키북스의 모던 자바스크립트 Deep Dive 를 읽고 정리한 내용입니다.
Step by step goes a long way ✨