0%

자바스크립트의 개발환경

1. 자바스크립트 실행환경


모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. node.js 또한 자바스크립트엔진을 내장하고 있으며, 자바스크립트는 nodejs 와 브라우저환경에서 실행 할 수 있다.
브라우저에서 자바스크립트의 목적은 html,css,자바스크립트를 실행하여 웹에 보여주는 것이 주된 목적이고, node.js는 서버 개발 환경을 제공하는 목적을 가진다.
또한 모두 자바스크립트의 코어인 ECMAScript를 실행할 수 있지만 ECMAScript의 추가적으로 제공하는 기능은 호환 불가능하다.
브라우저에서는 DOM API를 기본적으로 제공하지만 , node.js 에서는 DOM API를 제공하지 않는다.

2. 웹


자바스크립트가 가장 많이 사용되는 분야는 웹페이지와 웹 애플리케이션이다. 웹 애플리케이션은 웹 브라우저 에서 html과css와 자바스크립트가 함께 실행된다.

웹 브라우저 환경을 고려할 때, 보다 효율적인 자바스크립트 프로그래밍이 가능하다.
자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리를 한다,html파서는 script태그를 만나면 자바 스크립트 코드를 실행하기 위해서 DOM생성 프로세스를 중지하고 자바 스크립트 엔진으로 제어권한을 넘긴다.제어 권한을 넘겨받은 자바 스크립트엔진은 script태그의 자바스크립트 파일을 파싱한다.

자바스크립트는 명시적인 컴파일러 단계를 거치지 않지만 인터프리터 언어의 장점인 동적기능지원을 살리면서 실행속도가 느리다는 단점을 극복한다.

head 요소 내부에 script 태그를 위치시키면 HTML 요소가 파싱되어 DOM 객체로 변환되기 이전에 자바스크립트가 실행된다. 따라서 body태그 아래에 script태그를 두는것이 바람직하다.

async : 웹 페이지 파싱과 외부 스크립트 파일의 다운로드가 동시에 진행된다. 스크립트는 다운로드 완료직후 실행된다.
defer : 웹페이지 파싱과 외부 스크립트 파일의 다운로드가 동시에 진행된다.스크립트는 웹페이지 파싱완료 직후 실행된다. 두개의 차이점은 스크립트의 실행 시점이다르다.

어트리뷰트는 스크립트 로딩으로 인한 병목을 근본적으로 방지하기 위해서 html5부터 script태그에 추가되었다.

node.js는 클라이언트 사이드, 즉 웹 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발을 할 수 있다.
하지만 프로젝트의 규모가 커짐에 따라 React, jQuery와 같은 외부 라이브러리를 도입하거나 Babel, Webpack, ESLint 등 여러 가지 도구를 사용해야 할 필요가 있다. 이때 Node.js와 npm이 필요하다.