3. 자바스크립트 개발 환경과 실행 방법
자바스크립트 실행 환경 (자바스크립트 엔진 내장) : 브라우저, Node.js 환경
cf) 존재 목적
- 브라우저 : HTML, CSS, 자바스크립트를 실행하여 웹 페이지를 화면에 렌더링하는 것
DOM API 기본 제공 - Node.js : 서버 개발 환경을 제공하는 것
File 시스템 기본 제공
주로 서버 사이드 애플리케이션 개발에 사용되며 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공
데이터를 실시간 처리하여 빈번한 I/O가 발생하는 SPA에 적합
개발자 도구 기능
- Elements
로딩된 웹 페이지의 DOM과 CSS를 편집하여 렌더링된 뷰 확인 가능 - Console
로딩된 웹 페이지의 에러 및 console.log 메소드 결과 확인 - Sources
로딩된 웹 페이지의 자바스크립트 코드 디버깅 가능 - Network
로딩된 웹 페이지에 관련한 네트워크 요청(request) 정보와 퍼포먼스 확인 가능 - Application
웹 스토리지, 세션, 쿠키 확인 및 관리
4. 브라우저 동작 원리
브라우저의 핵심 기능 : 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것
-
브라우저가 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답 받음 -> HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합 -> 브라우저는 렌더 트리를 기반으로 웹 페이지 표시
-
자바스크립트 코드는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리
HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘김 -> 제어 권한을 넘겨 받은 자바스크립트 엔진은 script 태그 내의 자바스크립트 코드 또는 script 태그의 src 어트리뷰트에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행 -> 자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM 생성을 재개 -
이처럼 브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript을 처리
<=> script 태그의 위치에 따라 블로킹이 발생하여 DOM 생성 지연 가능
따라서 body 요소의 가장 아래에 자바스크립트를 위치시키는 게 좋음
이유 1) HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
이유 2) DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.
