[02-3] 자바스크립트 성장의 역사

02-3 자바스크립트 성장의 역사

초창기 자바스크립트: 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용됨

• 대부분의 로직은 웹 서버에서 실행
• 브라우저는 서버로부터 전달받은 html과 css를 단순히 렌더링하는 수준

02-3.1 Ajax

Ajax란?

→서버와 브라우저가 ‘비동기’ 방식으로 데이터를 교환하는 통신 기능

→XMLHttpRequest라고 함

 

이전의 웹페이지

→ Html 태그로 시작해 Html 태그로 끝나는 완전한 Html 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작

→ 화면이 전환되면 서버로부터 새로운 html 코드를 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링함

→변경이 필요없는 부분까지 포함한 html 코드를 서버로부터 다시 전송받음

→불필요한 데이터 통신/ 성능 면에서 불리

→ 화면이 전환되면 화면이 순간적으로 깜박이는 현상이 발생하고, 이는 웹페이지의 어쩔 수 없는 한계였음

 

Ajax의 등장 후

→ 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경

→ 한정적으로 렌더링하는 방식이 가능해짐

02-3.2 jquery

jQuery의 등장

• 웹페이지에서 자주 사용되는 기능들을 간편하게 구현 가능
• 다양한 브라우저에서 동일한 동작 보장
• Ajax 통신을 쉽게 구현 가능

jQuery의 인기

• 많은 웹 개발자들이 사용하여 생산성 향상
• 많은 플러그인 제공으로 다양한 기능 구현 가능
• jQuery를 기반으로 한 다양한 JavaScript 라이브러리와 프레임워크 등장

02-3.3 V8 자바스크립트 엔진

V8 자바스크립트 엔진의 등장

• 구글 크롬 웹 브라우저의 등장과 함께 발표
• 빠른 속도로 자바스크립트 코드를 실행할 수 있게 됨
• 자바스크립트의 서버 사이드 프로그래밍이 가능해짐

엔진으로 촉발된 자바스크립트의 발전으로 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트로 이동했고,

웹 애플리케이션 개발에서 프론트엔드 영역이 주목받는 계기가 됨

02-3.4 Node.js

: 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경

• 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있게 함. (실행환경)
• 서버 사이드 애플리케이션 개발에 자주 사용됨

서버사이드 애플리케이션은 서버에서 실행되는 애플리케이션으로, 클라이언트에서 요청한 데이터를 받아 처리하고 결과를 반환한다. 이를 통해 웹사이트나 모바일 앱 등에서 서버와 데이터를 주고받을 수 있다.

• 아예 필요한 모듈, 파일 시스템, Http 등 빌트인 api를 제공한다
• 자바스크립트 엔진을 기반으로 함으로 노드 환경에서 동작하는 애플리케이션은 자바스크립트를 사용해 개발
• 비동기 I/o 지원
• 단일 스레드 이벤트 루프 기반으로 동작 → 요청 처리 성능이 좋다
• cpu사용량이 많은 어플리케이션엔 추천하지 않는다

💡 Node.js는 대규모 애플리케이션에 적합하지 않은 경우가 있음

• 대규모 트래픽 처리 및 CPU 집약적인 작업 처리와 같은 경우에는 다른 기술과 조합해 사용하는 것이 좋음
• 대표적으로는 멀티 프로세싱을 지원하는 PM2 등이 있음 

02-3.5 SPA 프레임워크

Single Page Application(SPA)는 페이지가 하나인 애플리케이션으로, 필요한 부분만 동적으로 변경되는 방식으로 동작

• 브라우저에서 필요한 부분만 데이터를 요청하고, 받아서 화면을 갱신하는 방식으로 동작
• 초기 구동 시간이 길고 검색 엔진 최적화(SEO)에 취약하다는 문제점이 있었으나, 이러한 문제점을 해결하기 위한 다양한 방법이 등장
• 대표적인 SPA 프레임워크로 Angular, React, Vue.js 등이 있음