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

3장 자바스크립트 개발 환경과 실행 방법

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

• 모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다.한가지 주의해야할 점은 브라우저와, Node.js의 용도가 다르다는 것이다.
  브라우저, Node.js 모두 자바스크립트의 코어인 ECMAScript를 실행할수 있지만, 추가로 제공해주는 기능은 호환하지 않는다.

3-2. 웹 브라우저

• 다양한 웹브라우저가 있지만, 이 책에서는 구글의 크롬 브라우저를 사용하며, 크롬의 경우 ECMAScript 사양을 준수하며, 2021년 1월 기준 점유율이 약 65% 정도로 가장 높다.

크롬이 가장 많이 사용되는 이유

1. 개발자 도구

• 크롬에서 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 강력한 도구 이다.

개발자 도구의 패널

패널	설명
Elements	로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링 뷰를 확인 가능, but 내용이 저장되진 않는다
Console	에러를 확인하거나 console.log메서드를 실행시켜 결과 확인가능
Sources	자바 스크립트 코드 디버깅가능
Network	네트워크 요청 정보, 성능 확인가능
Application	웹스토리지, 세션, 쿠키 확인 관리가능

2. 콘솔개발자 도구의 console패널은 자바스크립트 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 먼저 살펴봐야할 곳.
   여러 줄로 이루어진 자바스크립트를 줄바꿈이 필요할 경우 shift 키를 누른상태에서 엔터키를 누른다.
3. 브라우저에서 자바스크립트 실행
4. 디버깅

3-3. Node.js

• 2009년 발표되었으며, 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬수 있도록 만든 실행 환경.

3-4. 비주얼 스튜디오 코드

• Vscode는 코드 자동 완성, 문법 오류 감지, 디버깅, Git연동 등 강력하고 편리한 기능을 가진 코드 에디터
• node.js 설치로 비주얼 스튜디오에서 js를 사용할수 있는 환경을 만들기

VS CODE 에서 JS 실행 환경 만들기(편리 기능 추가)
node.js 설치 -> VSCode 설치 -> Code Runnder 확장 플러그인 설치 -> Live Server 확장 플러그인 설치