02장 자바스크립트란?

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 를 읽고 정리한 내용입니다.

https://www.google.com/search?q=jquery+%EB%8B%A8%EC%A0%90&rlz=1C5CHFA_enKR880KR881&oq=jquery+%EB%8B%A8%EC%A0%90&aqs=chrome..69i57j0l4j0i30l3.3030j1j7&sourceid=chrome&ie=UTF-8