[모던 자바스크립트 Deep Dive] 03. 자바스크립트 개발 환경과 실행 방법

자바스크립트 실행 환경

---

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

웹 브라우저

---

개발자 도구

• 크롬 브라우저에서 제공하는 개발자 도구의 기능
  • Elements : 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 볼 수 있음
  • Console : 로딩된 웹페이지의 에러를 확인하거나 JS 코드에서 작성한 console.log 메서드 실행 결과 확인 가능
  • Sources : 로딩된 웹페이지의 자바스크립트 코드 디버깅
  • Network : 로딩된 웹페이지 관련 네트워크 요청 정보와 성능 확인 가능
  • Application : 웹 스토리지, 세션, 쿠키 확인 및 관리

브라우저에서 자바스크립트 실행

• 브라우저는 HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드를 실행

Node.js

• 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발 가능하지만, 규모가 커짐에 따라 프레임워크나 라이브러리, 트랜스파일러 등 여러 가지 도구를 사용할 필요가 있음 ⇒ 이때 Node.js와 npm 필요

Node.js와 npm 소개

• Node.js : 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 (2009년 Ryan Dahl)
  • 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있도록 하는 자바스크립트 실행 환경
• npm : 자바스크립트 패키지 매니저
  • Node.js에서 사용할 수 있는 모듈을 패키지화해서 모아둔 저장소 & 패키지 설치 및 관리를 위한 CLI 제공