[STUDY] JS - 01. Javascript 란

 

01. Javascript 란

• Javascript(ECMAScript, ES) 웹과 Javascript 엔진이 포함된 모든 장치에서 동작하는 프로그래밍 언어

반응형

 

 

 

자바스크립트 런타임(Javascript Runtime)

· Javascript 가 동작하는 환경

 

 

 

자바스크립트 엔진(Javascript Engine)

· Javascript 를 실행

· Javascript 엔진의 기본적인 동작 원리는 다음과 같이 요약

1. 엔진이 스크립트 코드를 읽음 (Parser)
2. 코드를 기계어로 전환 (Compiler)
3. 기계어로 전환된 코드를 실행

 

  V8

  · 구글 크롬(Chrome)

 

  스파이더 몽키(SpiderMonkey)

  · 최초 Javascript 엔진. 파이어폭스(Firefox)

 

  웹킷(Webkit)

  · 사파리(Safari)

 

  차크라(Chakra)

  · 마이크로소프트 인터넷 익스플로러(IE)

 

  라이노(Rhino)

  · Java로만 작성된 자바스크립트 엔진 (모질라)

 

  제리스크립트(JerryScript)

  · 사물 인터넷을 위한 초경량 자바스크립트 엔진

 

· Javascript 는 메모리 또는 CPU 같은 저수준 영역의 조작이 불가한 ‘안전한’ 프로그래밍 언어

브라우저에서 할 수 있는 일

• HTML 추가 또는 Style 수정
• 클릭 등 이벤트 핸들링
• 네트워크를 통해 원격 서버에 요청 또는 파일의 다운로드 / 업로드 (AJAX, COMET)
• 쿠키(COOKIE) 설정 
• 클라이언트 측 데이터 저장 (로컬 스토리지)

브라우저에서 할 수 없는 일

• 하드 디스크에 저장된 임의의 파일을 읽기, 쓰기, 복사, 실행 시 제약 ( <input> 태그를 통해 특정 상황에서만 파일의 접근을 허용, 카메라 또는 마이크 등 외부 장치와 상호 작용을 위해서는 사용자의 명시적인 허가 필요)
• 브라우저 내 창과 탭은 일반적으로 서로 간의 정보를 알 수 없지만, Javascript를 사용해 열린 창은 예외(도메인, 프로토콜, 포트가 다른 경우에는 접근할 수 없음) - 동일 출처 정책(Same Origin Policy)
• 도메인, 프로토콜, 포트가 다른 사이트에서 데이터 통신은 불가 (HTTP 헤더 등을 이용한 원격 서버의 승인이 필요)

 

 

 

자바스크립트 엔진(Javascript Engine) : V8 엔진

 

출처(https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf)

· 위 이미지는 Javascript 엔진을 단순화 한 모습으로 메모리 힙(Memory Heap)과 호출 스택(Call Stack)으로 구성

  메모리 힙(Memory Heap)은 변수, 함수 선언의 메모리 할당이 발생하는 영역

  호출 스택(Call Stack)은 실행되는 코드가 쌓이는 영역

 

출처(https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf)

· Javascript V8 엔진은 동작 과정

1. Javascript 코드를 V8 엔진이 파싱
2. 오류 검사 및 순차적으로 코드를 읽어 기계어로 전환 및 실행
3. 변수 또는 함수 선언을 메모리 힙에 올리고, (실행되는) 함수를 호출 스택에 올림(push)
4. 함수는 return 또는 web api를 호출 시 스택에서 제거(pop)되고 다음 함수를 실행 (※단일 스레드(Single Thread)로 한 번에 한 동작만 수행) 

※ 콜백 큐(Callback Queue)는 콜백 함수(callback function) 저장 되고 먼저 실행 (FIFO). 또 콜백 큐는 아래와 같이 2가지로 구분

  · Microtask Queue : Promise 또는 Mutation Observer 콜백이 추가됨. Task Queue 보다 우선순위가 높고 이벤트 루프는 빌 때까지 콜 스택에 들어감(push)

  · Task Queue : 일반적인 콜백 함수가 추가됨. Microtask Queue 보다 우선 순위가 낮고, 가장 마지막에 들어온 콜백 함수만 콜 스택에 들어감(push)

 

 

 

자바스크립트 비동기(Javascript Asynchronous)

· Javascript 는 단일 스레드(Single Thread) 언어로, 단일 스레드는 한 번에 하나의 작업만 동기적(Synchronous) 실행 - 블록킹(Blocking)

· Web API(DOM, AJAX, setTimeout, setInterval, setImmediate) 나 Node JS 의 API 를 이용하여 비동기적(Asynchronous) 실행 - 논-블록킹(Non-Blocking)