1. JavaScript란?
동적인 웹페이지를 만들기 위한 프로그래밍 언어. (HTML/CSS와 완전히 통합 가능)
웹페이지를 조작하고, 클라이언트-서버 간 상호작용에 관한 모든 일을 관여한다.
JS로 작성한 프로그램을 script라고 부른다. script는 웹페이지의 html 안에 작성할 수 있으며, 웹페이지를 불러올 때 script가 자동으로 실행된다.
+) JS는 브라우저뿐만 아니라 서버에서도 실행 가능하며, JS엔진이 들어있는 모든 디바이스에서도 동작한다.
-
node.js 환경) 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원한다.
-
브라우저 환경) 웹페이지 조작, 클라이언트-서버 간 상호작용에 관한 모든 일을 한다.
2. 웹의 역사와 JavaScript
- 동적 웹사이트의 필요성 대두
: 초기 웹사이트들은 html, css로만 만들어진 정적인 웹사이트였다. (링크를 걸어 다른 사이트로 이동하는 식..)
- scripting 언어 개발
: 동적 웹사이트 개발을 위해, netscape 사의 브라우저에서 동적으로 돌아갈 수 있는(DOM조작 가능) scripting 언어를 만들게 되었다. (1995년, by Brendan Eich of Netscape)
처음에는 모카(Mocha)라는 이름으로 개발되었으나, 그 후에 라이브스크립트(LiveScript), 최종적으로는 자바스크립트(JavaScript)라는 이름으로 변경된다.
- ECMAScript의 등장
: 다른 브라우저들도 JS를 조금씩 변형해서 쓰기 시작했고, 이에 따라 웹사이트마다 잘 작동하는 브라우저가 다를 수밖에 없었다.(혼돈의 시작..)
결국, netscape 사는 ECMA international이라는 단체에 JavaScript 표준화를 의뢰하여, ECMAScript가 나오게 된다!
ECMAScript
브라우저에서 JavaScript를 동작시키기 위한 문법을 표준화 시킨 문서
-
jQuery의 등장
: 2000년대, IE의 사용자가 폭발적으로 늘어나면서, IE는 자신들이 표준이라며 더이상 ECMAScript에 참여하지 않게 되었다. (다시 제자리..)
웹개발자들은 브라우저별 기능 구현을 하나하나 신경쓰기 힘들었고, 이에 관련 library들이 나오게 된다. (jQuery, dojo, mootools)
즉, 해당 library에서 제공하는 함수만 호출하면, 각각의 브라우저들은 신경쓰지 않아도 되게끔!
-
Chrome의 등장
: 2008년, JIT(just-in-time compilation)이라는 강력한 엔진 (JS 속도가 매우 빨라짐)이 포함된 Chrome 브라우저가 출시되었다!
이를 계기로 다시 브라우저들의 단합?이 진행되어 ECMAScript 5, 6가 나오게 되었다.
이후 매년 새 버전이 나오고 있지만, 가장 큰 변화는 5, 6 버전이다. 모든 브라우저들이 표준 사항을 잘 지키고 있기 때문에, 이제는 다른 library를 사용하지 않고도, JS가 모든 브라우저에서 동작할 수 있게 되었다!
-
JS transcompiler
: 그러나, 모든 사용자들이 최신 브라우저를 사용하는 것은 아니다. 따라서 개발자들은 최신 ECMAScript로 JS개발을 하고, 배포할 때는 JS transcompiler (ex. babel)를 사용한다. 이를 통해, 이전 버전도 호환 가능하도록 JS 문법을 변환해준다.
-
FE Framework
: SPA(single page application) - 하나의 페이지 안에서 필요한 부분만 업데이트 하는 개념이 뜨고 있다. 이를 쉽게 만들기 위해 React, Vue, Angular와 같은 프레임워크가 등장했다.
3. JS 엔진
자바스크립트 코드를 해석하고 실행시켜주는 프로그램 혹은 인터프리터. (JS 엔진은 인터프리터로 구현될 수도, JIT 컴파일러로도 구현될 수도 있다.) 가능한 짧은 시간 내에 가장 최적화된 코드를 생성하는 것이 목표이다.
JS엔진은 ECMAscript라고도 불리며, (특정 버전의 ECMAscript를 구현하기 때문에) ECMAscript가 발전하는 만큼 엔진도 발전한다. 웹 브라우저마다 사용하는 엔진이 다른데, 크롬에서는 구글의 V8 엔진을 사용한다.
-구성)
: JS 엔진은 크게 Heap 이라는 메모리를 관리하는 영역과, 실행할 태스크를 관리하는 Stack 영역으로 구분된다.
-Chrome의 V8)
: V8은 웹 브라우저 내부에서 자바스크립트 수행 속도의 개선을 목표로 처음 고안되었다. 속도 향상을 위해 V8은 인터프리터를 사용하는 대신, 자바스크립트 코드를 더 효율적인 머신 코드로 번역한다. JIT(Just-in-time) 컴파일러를 구현함으로써, 코드 실행 시에 자바스크립트 코드를 머신 코드로 컴파일한다.
-엔진 동작 기본원리)
- 엔진이 script를 parsing
- script를 기계어로 compile
- 기계어로 전환된 코드가 실행됨 (기계어로 전환되었으므로, 속도가 빠름)
4. JavaScript의 역할
-브라우저에서의 역할
: JS는 안전한 프로그래밍 언어로, 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않는다.
- 페이지에 새로운 HTML을 추가 / 기존 HTML 및 스타일 수정
- 사용자 행동에 반응하기 (마우스 클릭/ 포인터 움직임/ 키보드 눌림 등..)
- 네트워크를 통해 서버에 요청을 보내거나, 파일 다운로드, 업로드
- 쿠키를 가져와 설정. 사용자에게 질문을 건네거나 메시지 보여주기
- 클라이언트 측에 데이터 저장하기 (로컬 스토리지)
-브라우저에서 할 수 없는 일
: 보통 보안에 위협가는 기능에 제약이 있다.
- 디스크에 저장된 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받음.
- 카메라/마이크와 같은 디바이스와 상호작용 시, 사용자의 허가가 있어야 함.
- 브라우저 내 탭과 창은 서로의 정보를 알 수 없음. (한 창에서 다른 창을 열 때도 same origin policy가 적용됨.)
- 타 사이트나 도메인에서 데이터를 받아오는 것은 불가능. (HTTP헤더를 이용해 원격 서버에서 승인해주어야 함.)
5. JavaScript의 특징
-
인터프리터 언어
: 인터프리터 언어이지만, 웹 브라우저 대부분에는 JIT 컴파일러(실행 시간에 js코드를 컴파일함)가 내장되어 있어, 실행 속도가 매우 빠르다. -
객체 기반의 script 언어
-
동적 프로토타입 기반 객체 지향 언어
: 클래스가 아닌, 프로토타입을 상속. -
일급 객체 함수
: 고차 함수를 구현할 수 있어 함수형 프로그래밍이 가능.
=> 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.
-
동적 타입 언어
: 변수 타입이 없기 때문에, 프로그램 실행 도중 변수에 저장되는 데이터 타입이 동적으로 바뀔 수 있다. (Type Coercion) -
single thread 기반 언어
: stack 위에 함수를 올려 실행하고, 끝나면 stack에서 제거한다. (한 번에 하나의 task만 처리, 동기적.) -
non-blocking 언어
: event loop와 callback queue가 있기 때문에, single thread 기반이어도 다른 이벤트를 비동기적으로 처리할 수 있다. (ex. setTimeout, async await..)
참고 링크)
