0. 초창기
초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적으로 사용됨
- 웹 서버 -> 대부분의 로직 실행
- 브라우저 -> 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준
1. Ajax
1996년 Ajax의 등장
Javascript를 이용해 서버와 브라우저가 비동기(asynchronous) 방식으로 데이터를 교환하는 통신을 의미한다.
이전의 웹 페이지
<html>로 시작해 </html>로 끝나는 완전한 html 코드를 서버로 부터 전송받아 웹페이지 전체를 렌더링함
- 필요없는 부분까지 전부 렌더링 -> 불필요한 데이터 통신 발생
- 성능 불리
- 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링 -> 화면 깜빡임 현상 발생
Ajax 도입 후
서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이 가능해짐
- 웹 브라우저에서도 데스트톱 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환이 가능해짐
2. jQuery
2006년 jQuery의 등장
- DOM(Document Object Model) 더 쉽게 제어 가능해 졌다
- *크로스 브라우징 이슈 해결
- javascript보다 직관적이다
*크로스 브라우징
모든 브라우저에 깨지지 않고 의도한대로 나오게 하는 작업(호환성)
3. V8 자바 스크립트 엔진
2008년 V8 자바스크립트 엔진 등장
V8은 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진이다. 구글 크롬 브라우저와 안드로이드 브라우저에 탑재되어 있다
- V8 JS엔진의 등장 -> JS는 데스크톱 애플리케이션과 유사한 사용자경험(UX)제공
- 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동
- 웹 개발에서 프론트엔드 영역이 주목받는 계기로 작용함
4. Node.js
2008년 Node.js 등장
V8 자바스크립트 엔진으로 빌드된 JS 런타임 환경이다.
- JS를 브라우저 이외의 환경에서도 동작할 수 있도록 해줌
- 서버 사이드 애플리케이션 개발에 주로 사용되며 이에 필요한 모듈, 파일 시스템, HTTP등 빌트인 API 제공한다.
- front와 back에 같은 언어(JS)를 사용해 동형성이 생김
- 비동기 *I/O를 지원하며 * 단일 스레드 * 이벤트 루프 기반으로 동작 → 요청 처리기능이 좋음
- Node.js는 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA(Single Page Application)에 적합
- CPU 사용률이 높은 애플리케이션에는 권장 X
- 이제 자바스크립트는 크로스 플랫폼을 위한 가장 중요한 언어로 주목받고 있음
*I/O
Input/Output
입력/출력의 약자
컴퓨터 및 주변장치에 대하여 데이터를 전송하는 프로그램, 운영 혹은 장치를 일컫는 말
* 스레드
프로그램이 동작하는 데 사용되는 실행 단위
일반적으로 멀티스레드 환경에서는 여러 개의 스레드가 동시에 작업을 수행할 수 있다.
* 단일 스레드
하나의 스레드에서 모든 작업을 처리
이러한 특성 때문에 하나의 요청이나 연산이 블로킹(Blocking)되면 다른 요청이나 연산을 처리하는 데 영향을 줄 수 있음
* 이벤트 루트
이벤트 루프는 계속해서 이벤트 큐(Event Queue)를 체크하고, 이벤트가 발생했을 때 등록된 콜백 함수를 호출하는 역할을 함
-> 이 과정에서 하나의 이벤트가 처리될 때까지 기다리지 않고 다음 이벤트를 처리할 수 있어서, Node.js는 매우 효율적으로 다수의 요청을 처리할 수 있음
4. SPA 프레임워크
- 모던 웹 애플리케이션은 데스크톱 애플리케이션과 비교해도 손색 없는 성능과 사용자 경험을 제공하는 것이 필수가 되었다. +개발 규모와 복잡도도 상승
- 이전 개발 방식으로는 복잡해진 개발 과정을 수행하기 어려워짐 -> 많은 패턴과 라이브러리가 출현
- 이러한 요구에 발맞춰, * CBD(Component Based Development) 방법론을 기반으로 하는 SPA가 대중화
- Angular,React,View.js 등 다양한 SPA 프레임워크/라이브러리 또한 많은 사용층 확보 중
* CBD
- 재사용 가능한 컴포넌트의 개발 또는 상용 컴포넌트들을 조합하여, 어플리케이션 개발 생산성과 품질을 높이고, 시스템 유지보수 비용을 최소화 할 수 있는 혁신 개발방법론
Reference
https://g.co/kgs/K7K89Lj
모던 자바스크립트 Deep Dive(위키북스 프로그래밍 & 프랙티스 시리즈 26)
이웅모의 책
www.google.com
