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

3.1 자바스크립트 실행 환경

1. 자바스크립트는 브라우저, Node.js 환경에서 실행할 수 있다.

1) 단, 브라우저와 Node.js는 용도가 다르다.

- 브라우저는 HTML,CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이다.

- Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적이다.

- 예를 들면 브라우저는 DOM API를 제공하지만 Node.js는 제공하지 않는다.

3.2 웹 브라우저

1. 개발자 도구

- 크롬 브라우저가 제공하는 개발자 도구는 웹 어플리케이션 개발에 필수적인 강력한 도구다.

- 별도로 설치할 필요가 없고 단축키는 윈도우의 경우 F12 나 Ctrl+Shift + I 를 누르면 되고 masOS인 경우에는 command + option + I를 누르면 된다.

크롬 브라우저의 개발자 도구

- 개발자 도구의 기능은 아래와 같다.

1) Elements : 로딩된 페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있다.

                      (단, 편집한 내용이 저장되지는 않는다.)

2) Console : 로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 메서드의 실행 결과를 확인할 수 있다.

3) Sources : 로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.

4) Network : 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다.

5) Application : 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.

3.3 Node.js

1. Node.js 설치 페이지 : https://nodejs.org/ko/

Node.js

1) 설치 확인하기 : 윈도우에서는 명령 프롬프트를 열어 Node.js와 npm 버전을 확인한다.

$ node -v
$ npm -v

3.4 비주얼 스튜디오 코드

1. 비주얼 스튜디오 코드 설치 페이지 : https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

1) 내장 터미널 단축키 : Ctrl + `

2) Code Runner 확장 플러그인 설치 : 내장 터미널에서 자바스크립트를 실행할 수 있다.

(단축키 : 윈도우인 경우 Ctrl + Alt + N, macOS : Control + option + N)

3) Live Server 확장 플러그인 설치 : 브라우저에서 실행할 수 있다.

 

Review

- 실행환경 구축 단계여서 그림이 많고 내용은 짧은 편이었다. 확장 플러그인 같은 경우는 내가 필요한 것을 설치하면 나중에도 유용하게 쓸 수 있을 것 같다. 라이브 서버는 브라우저 상에서 확인할 때 쓰고 코드 러너의 경우는 노드제이에스를 실행시킬 때 쓰이는 것 같다. 이제 다음 장부터 본격적으로 문법 공부가 시작되는데 떨린다.

 

출처 : https://wikibook.co.kr/mjs/

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리