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

• 모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있습니다. 브라우저뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있어서 자바스크립트는 브라우저와 Node.js 환경에서 실행할 수 있습니다. 기본적으로 브라우저에서 동작하는 코드는 Node.js 환경에서도 동작합니다.
• 하지만 브라우저와 Node.js는 용도가 서로 다릅니다. 브라우저는 HTML, CSS, 자바스크립트를 실행해서 웹페이지를 화면에 렌더링하는 것이 주된 목적이지만 Node.js는 브라우저에서만 실행되던 자바스크립트를 브라우저 외부에서도 실행될 수 있도록 환경을 제공하는 것이 주된 목적입니다.
• 브라우저와 Node.js 모두 자바스크립트 코어인 ECMAScript를 실행할 수 있지만 ECMAScript 이외에 추가로 제공하는 기능(DOM API, 파일 시스템 등)은 서로 호환되지 않습니다.

3.2. 웹 브라우저

• 다양한 웹 브라우저가 있지만 그 중에서 구글 크롬 브라우저 사용을 권장합니다.
• 크롬은 ECMAScript 사양을 준수하는 것은 물론이고, 사용자도 많으며, 강력한 개발자 도구 제공으로 에러 확인이나 디버깅을 쉽고 빠르게 처리할 수 있습니다.
• 그리고 브라우저 업데이트가 자동으로 이루어지기 때문에 항상 최신 버전이 유지되며, 크롬 브라우저의 V8 자바스크립트 엔진은 Node.js에서도 사용하고 있습니다.

3.2.1. 개발자 도구 (Developer Tools)

• 브라우저에서 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 도구이며, 보통 브라우저에 기본 내장되어 있기 때문에 별도로 설치할 필요는 없습니다. F12 키나 Ctrl+Shift+I 키를 누르시면 개발자 도구를 확인할 수 있습니다.
• 개발자 도구는 여러가지 기능이 제공되는데 그 중 자주 사용하는 기능은 다음과 같습니다.
• Elements 패널 : 로딩된 웹페이지의 html 코드와 CSS를 확인할 수 있으며, 수정 내용이 저장되지는 않지만 직접 수정을 통해서 렌더링된 뷰를 바로 확인해 볼 수 있습니다.
• Console 패널 : 로딩된 웹페이지의 에러를 확인하거나 자바스크립트 코드에 작성된 console.log 메서드의 실행결과를 확인할 수 있습니다.
• Network 패널 : 로딩된 웹페이지와 관련된 모든 네트워크 요청 정보(요청 시간, 상태 코드 등)와 페이지 성능(로딩 시간 등)을 확인할 수 있습니다.

3.2.2. 콘솔(Console) 패널

• 자바스크립트 코드 에러 발생으로 정상 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳 입니다. 구현 단계에서는 수도 없이 에러가 발생되고 에러 발생 여부를 놓치는 경우가 있기 때문에 콘솔 패널은 항상 열어둔 상태에서 개발하는 것이 좋습니다.