[자바스크립트 딥다이브] 3장 자바스크립트 개발 환경과 실행 방법

# 자바스크립트 실행 환경

모든 브라우저 는 자바스크립트를 해석하고 실행 할 수 있는 자바스크립트 엔진 을 내장하고 있다.
또한 브라우저 뿐만 아니라 Node.js 도 자바스크립트 엔진 을 내장하고 있다.
따라서 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있다.

 

1. 브라우저와 Node.js의 주된 목적

브라우저 : HTML, CSS, 자바스크립트 를 실행해 웹페이지를 브라우저 화면에 렌더링 하는 것
Node.js : 브라우저 외부 에서 자바스크립트 실행 환경을 제공하는 것

브라우저와 Node.js 모두 자바스크립트의 코어 기능인 ECMAScript 를 실행할 수 있지만 브라우저와 Node.js에서 ECMAScript 이외에 추가로 제공하는 기능은 호되지 않는다.

1) 브라우저

• 파싱된 HTML 요소 를 선택하거나 조작하는 기능의 집합인 DOM API 제공
• 파일 시스템 미제공 (악성코드 노출, 보안이슈)
• 클라이언트 사이드 Web API 지원

2) Node.js

• DOM API 미제공 (별도의 node.js 라이브러리를 통해 DOM 접근 가능)
• 파일 생성, 수정 할 수 있는 파일 시스템 제공
• ECMAScript와 Node.js 고유의 API 지원

 

# 웹 브라우저

1. 개발자 도구

1. Elements: 로딩된 페이지의 DOM 과 CSS 를 편집해서 렌더링 된 뷰를 확인 해 볼 수 있다. 단, 편집한 내용이 저장되지는 않는다. 웹페이지가 의도된 대로 렌더링되지 않았다면 이 패널을 확인해 유용한 힌트를 얻을 수 있다.
2. Console: 로딩된 웹 페이지의 에러 를 확인하거나 자바스크립트 소스 코드 에서 작성한 console.log 메서드의 실행 결과를 확인할 수 있다.
3. Sources: 로딩된 웹페이지의 자바스크립트 코드를 디버깅 할 수 있다.
4. Network: 로딩된 웹페이지에 관련된 네트워크 요청(Request) 정보와 성능을 확인할 수 있다.
5. Application: 웹 스토리지, 세션, 쿠키 를 확인하고 관리 할 수 있다.

 

2. 디버깅

디버깅이란 에러 메세지를 확인하고 에러 가 발생한 원인 을 제거하는 것

 

3. Node.js

2009년, 라이언 달이 발표한, 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 이다.
브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경

 

4. npm (node package manager)

• 자바스크립트 패키지 매니저
• Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할
• 패키지 설치 및 관리를 위한 CLI(Command Line Interface)제공
• LTS(Long Term Support)버전: 장기적으로 안정된 지원 보장
• Current 버전: 최신 기능을 제공하지만 업데이트가 발생하는 버전으로 안정적이지 않을 수 있다.