자바스크립트 개발 환경과 실행 방법
자바스크립트 실행 환경
브라우저는 HTML, CSS, JavaScript를 실행해 웹 페이지를 브라우저에 렌더링하는 것이 주된 목적.
Node.js는 브라우저 외부에서 JavaScript 실행 환경을 제공하는 게 주된 목적
브라우저, Node.js 모두 JavaScript 코어인 ECMAScript를 실행할 수는 있지만, 브라우저와 Node.js에서 ECMAScript이외에 추가로 제공하는 기능은 호환되지 않는다.
브라우저는 파싱된 HTML요소를 선택하거나 조작하는 기능 집한인 DOM API를 기본적으로 제공(Node.js는 제공하지 않음. 브라우저 외부 환경 에서는 HTML 요소를 파싱해서 객체화한 DOM을 직접 다룰 필요가 없음.)
Node.js에서는 파일을 생성하고 수정할 수 있는 파일 시스템을 기본으로 제공함. ( 브라우저 환경의 자바스크립트는 보안상을 이유로 파일 시스템 제공하지 않음. )
즉, 브라우저는 ECMAScript와 클라이언트 사이드 WEB API지원, Node.js는 ECMAScript와 Node.js 고유 API지원
웹 브라우저
크롬은 ECMAScript 사양을 준수하고, 시장 점유율도 가장 높음.
-
개발자 도구
웹 애플리케이션 개발에 필수적인 강력한 도구
Elementes : 로딩된 웹페이지 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있음. 편집한 내용이 저장되지는 않음. 웹페이지가 의도된 대로 렌더링되지 않았다면 이 패널을 확인해 유용한 힌트를 얻을 수 있음.
Console : 로딩된 웹페이지 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log메서드 실행 결과를 확인할 수 있음
Sources : 로딩된 웹페이지 자바스크립트 코드를 디버깅 할 수 있음.
Network : 로딩된 웹페이지 관련된 네트워크 요청과 정보와 성능을 확인할 수 있음.
Application : 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있음. -
콘솔
에러 발생시 가장 우선적으로 살펴볼 곳. 항상 열어두고 개발하는 것이 좋음 ( 에러 났는지 모를 수도 있어서 )
console.log()메서드 : 소괄호 안의 코드를 평가해서 그 결과를 콘솔에 출력하는 함수
줄바꿈이 필요할 시 shift + Enter
Node.js
브라우저(클라이언트 사이드)에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발 가능. 하지만, 프로젝트 규모가 커짐에 따라 React, Angular, Lodash같은 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint등 여러가지 도구를 사용할 필요가 있음. 이때 Node.js와 npm이 필요함.
npm (자바스크립트 매니저) : Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI제공.
비쥬얼 스튜디오 코드
브라우저 console 또는 Node.js REPL에서 자바스크립트 코드를 실행할 수 있지만 애플리케이션 개발하는 단계에서 사용하기는 부족함이 많음.
코드 에디터를 사용하면 코드 자동 완성, 문법 오류 감지, 디버깅, Git 연동 등 강력하고 편리한 기능 활용 가능.
Code Runner 확장 플러그인
alert함수는 브라우저에서만 동작하는 클라이언트 사이트 WEB API다. 브라우저 환경에서만 유효
Code Runner 확장 플러그인은 Node.js 환경을 사용해 자바스크립트 실행함. 클라이언트 사이트 WEB API인 alert함수를 Node.js 환경에서는 알 수 없어서 에러 발생
Live Server 확장 플러그인
클라이언트 사이드 WEB API가 포함된 자바스크립트를 실행하려면 브라우저에서 실행해야 함. 개발자 도구 console에서 실행하거나, 자바스크립트 코드를 HTML에 삽입한 다음 HTML파일을 브라우저에서 열어야 함. Live Server 확장 플러그인은 소스코드를 수정할 때 마다 브라우저에 자동으로 반영함.
