프로그래밍
요구사항을 분석하여 적절한 자료구조와 함수의 집합으로 변환 후 , 그 흐름을 제어하는 것.
프로그래밍 언어가 제공하는 문법을 적절히 사용하여 변수를 통해 값을 저장,참조하고 연산자로 값을 연산,평가하고 조건문과 반복문에 의한 흐름제어로 코드의 실행 순서를 제어하고 함수로 재사용 가능한 집합을 만들며 객체,배열 등으로 자료를 구조화 한다
자바스크립트 탄생
1996년 3월, 넷스케이프 내비게이터2 브라우저에 탑재
1996년 8월, 마이크로소프트가 자바스크립트의 파생 버전 'JScript'를 IE에 탑재
넷스케이프 VS MS 자사 브라우저 점유율을 높히기 위해 각자 브라우저에서만 동작하는 기능을 추가
웹페이지가 브라우저에 따라 정상적으로 동작하지 않는 크로스 브라우징 이슈 발생
표준화된 자바스크립트의 필요성 대두
1997년 ES1 : 초판
2009년 ES5 : HTML5와 함께 출연
2015년 ES6 : let/const, 화살표 함수, 클래스, 탬플릿 리터럴 등...
자바스크립트의 성장
초창기 : 브라우저는 HTML,CSS 렌더링 하는 수준이고 대부분의 로직은 웹 서버에서 실행
Ajax 등장
1999년, 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터 교환
서버로부터 필요한 데이터만 전송받아 변경해야하는 부분만 렌더링
이전의 방식 : html태그의 시작~끝 까지의 모든 내용을 서버로부터 받아서 페이지 전체를 렌더링
--> 불필요한 데이터 통신 + 변경할 필요가 없는 부분도 리렌더 = 성능 저하
jQuery
2006년 등장, DOM조작을 보다 더 쉽게
V8 자바스크립트 엔진
2008년 구글이 개발
데스크톱 애플리케이션과 유사한 UX를 제공할 수 있는 웹 애플리케이션 개발이 자바스크립트로 가능해짐
웹 서버에서 동작하던 로직이 클라이언트로 이동
Node.js
자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경
브라우저가 아니어도 자바스크립트를 실행 가능
비동기 I/O, 단일 스레드 이벤트 루프 기반
실시간 데이터 처리를 위해 I/O가 빈번히 발생 하는 SPA에 적합
CPU 사용률이 높은 앱에는 권장 X
SPA 프레임워크
Component Based Development 방법론을 기반으로 하는 SPA가 대중화되면서 React,Angular,Vue.js,Svelte 등장
자바스크립트의 특징
- 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
- 프로토타입 기반의 객체지향 언어
- 인터프리터 언어
- 대부분의 모던 자바스크립트 엔진은 인터프리터+컴파일러 장점 결합
- 대부분의 브라우저에서 인터프리터는 명시적 컴파일 과정을 거치진 않지만 복잡한 과정을 통해 일부 소스코드를 컴파일하고 실행
인터프리터 언어의 동적 기능 지원을 살리면서 실행 속도 느린 단점 극복
| 컴파일러 언어 | 인터프리터 언어 |
|---|---|
| 코드 실행 전 소스코드 전체를 머신코드로 변환 후 실행 | 코드 실행시 한 줄씩 바이트코드로 변환 후 실행 |
| 컴파일과 실행이 분리되어 실행이 빠름 | 인터프리트 단계와 실행 단계가 분리되어 있지 않고 반복 수행되므로 실행이 비교적 느림 |
ES6 브라우저 지원 현황
IE제외 거의 100%
구형 브라우저, IE는 바벨을 통해 ES5 이하로 소스를 다운그레이드 해야함
자바스크립트 실행 환경
브라우저 : 웹페이지를 렌더링 하는 것이 목적
Node.js : 브라우저 밖에서 자바스크립트 실행 환경을 제공하는 것이 목적
둘 다 ECMAScript를 실행 가능, 추가 기능은 호환 안됨
ex)
브라우저 : DOM API 제공, 파일 시스템 제공 X
브라우저를 통해 다운되고 실행되는 자바스크립트가 로컬 파일에 접근할 수 있다면 심각한 보안의 문제
Node.js : DOM API 제공 X, 파일 시스템 제공
이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스(2021)
