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

🖼️3.1 자바스크립트 실행환경

JS는 브라우저 환경 또는 NodeJS 에서 동일하게 동작한다.

브라우저와 NodeJS는 용도가 다름. 

 

🎵 브라우저 (웹 어플리케이션의 JS)

- HTML, CSS, JS 를 실행해 웹페이지를 브라우저 환경에 렌더링 하는 것이 주 목적

- DOM API 를 기본 제공

- 파일 생성, 수정의 기능을 제공하지 않는 이유는 브라우저 상에서 보이기 때문 -> 보안상 이유

 

🎵 NodeJs 

- 브라우저 외부에서 JS 실행환경을 제공하는 것이 주된 목적. 

- 파일 생성, 수정 할 수 있는 파일 시스템 기본 제공

- 고유의 API 제공

-> HTML 요소를 파싱해서 객체화한 DOM (Document Object Model) 를 직접 다룰 필요가 없기 때문. 

 

-> 둘 다 ECMAScript 사용 가능 but 그 외 기능들은 호환되지 않음. 

 

 

 

🖼️ 3.2 웹 브라우저

3.2.1 개발자 도구

 

F12 또는 Ctrl+Shift+I

 

Source - 디버깅 가능

Application - 웹스토리지, 세션, 쿠키 확인 & 관리 가능

 

 

3.2.2. 콘솔

에러 발생 시 가장 우선적으로 살펴볼 것.

 

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

- 에러 확인 가능

 

3.2.4 디버깅

- Source 패널에서 디버깅 가능. 

- 코드 줄 번호를 클릭하면 파란색 마크가 생기는데 이게 브레이크 포인트임. 

- 디버깅 : 에러 메세지를 확인하고, 에러가 발생한 원인을 제거 하는 것. 

 

 

🖼️ 3.3 Node.js

프로젝트가 커짐에 따라 프레임워크(리엑트, 뷰) 와 바벨, 웹펙 같은 도구를 사용할 필요가 있는데, 

이때 Node.js 와 npm 이 필요하다.

 

3.3.1 Nodejs 와 npm 소개

npm

- 자바스크립트 패키지 매니저

- nodeJs 에서 사용할 수 있는 모듈들을 패키지화 해서 모아둔 저장소 역할

- & 패키지 설치를 위한 CLI 를 제공

 

3.3.2 Node.js 설치

- LTS : 장기적 안정이 지원된 버전

- current : 최신 버전

https://nodejs.org/ko/download

다운로드 | Node.js

 

 

🖼️ 3.4 비주얼 스튜디오 코드

3.4.1 설치

 

3.4.2 내장 터미널

- ctrl + ` : 내장 터미널을 여는 단축키. 

 

3.4.3 Code RUnenr 확장 플러그인

- NodeJs 환경을 이용해 JS를 실행함. 따라서 브라우저 API는 사용할 수 없음. 

- arert 함수는 브라우저에서만 동작하므로, NodeJS 에서는 사용할 수 없다. 

 

3.4.4 Live Server 확장 플러그인

- 소스 코드 수정 시 수정 사항을 브라우저에 자동으로 반영해주기 때문에 편리함.