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

 

---

 

모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다.

---

 

3.1 자바 스크립트 실행 환경

 

웹 크롤링

서버에서 웹 사이트의 컨텐츠를 수집하기 위해 HTML 문서를 가져온 다음 가공해서 필요한 데이터만 추출

브라우저	Node.js
HTML, CSS, JS 를 실행하여 웹페이지를 브라우저 화면에 렌더링	브라우저 외부에서 자바스크립트 실행 환경을 제공
파일 시스템 미제공	파일 시스템 기본 제공
클라이언트 사이드 Web API 지원	Node.js 고유의 API 지원
ECMAScript 지원
자바스크립트 코어인 ECMAScript 실행 가능

 

 

---

 

3.2 웹 브라우저

 

개발자 도구

윈도우 : Ctrl + Shift + I

패널	설명
Elements	로딩된 웹페이지의 DOM, CSS 편집하여 렌더링 된 뷰 확인 가능 편집 내용 저장 불가
Console	로딩왼 웹페이지의 에러 확인 console.log  메서드의 실행 결과 확인
Sources	로딩된 웹페이지의 자바스크립트 코드를 디버깅
Network	로딩된 웹피이지에 관련된 네트워크 요청 정보와 성능 확인
Application	웹 스토리지, 세션 쿠키 확인 및 관리

 

 

콘솔

자바스크립트의 코드에서 에러가 발생했을 떄 가장 우선적으로 살펴볼 곳

코드의 실행 결과를 확인하면서 개발 진행

 

console.log(...) : 소괄호 안의 코드를 평가해서 그 결과를 콘솔에 출력 

 

 

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

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

만약 자바 스크립트 코드 내에서 console.log 메서드가 호출 되었다면 콘솔에 실행 결과 출력

 

 

디버깅

컴퓨터 프로그램 개발 단계중에 발생하는 시스템의 논리적인 오류나 버그를 찾아내고 수정하는 작업 과정

 

참고 사이트 : https://ko.javascript.info/debugging-chrome

Chrome으로 디버깅하기

 

 

---

 

3.3 Node.js

 

Node.js

브라우저 이외의 환경에서 동작시킬수 있는 자바스크립트 실행 환경

 

 

npm

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

Node.js 에서 사용할 수 있는 모듈들을 패키지화 하여 모아둔 저장소 역할

패키지 설치 및 관리를 위한 CLI 제공

자신이 작성한 패키지를 공개 및 검색 사용 가능

 

참고 사이트 : https://poiemaweb.com/nodejs-npm

Node.js & npm | PoiemaWeb

 

 

Node.js REPL

터미널에서 간단한 자바스크립트 코드 결과 확인 가능

 

 

---

 

3.4 비주얼 스튜디오 코드

 

코드 에디터

브라우저의 콘설, REPL 에서 자바스크립트의 코드를 실행 할 수 있지만 부족함이 많음

코드에디터의 사용으로 코드 자동 완성, 문법 오류 감지. 디버깅, git 연동 등 가능

 

 

내장 터미널

브라우저의 콘설, REPL 에서 자바스크립트의 코드를 실행 할 수 있지만 부족함이 많음

코드에디터의 사용으로 코드 자동 완성, 문법 오류 감지. 디버깅, git 연동 등 가능

 

 

Code Runner 확장 플러그인

Node.js 환경을 사용하여 현재 표시 중인 자바스크립트 파일 실행

클라이언트 사이드 web API 가 포함된 소스 코드는 불가능 => 브라우저 환경에서만

윈도우 : Ctrl + Alt + N

 

 

Live Server 확장 플러그인

소스코드의 수정 사항을 브라우저에 자동 반영 

 

 

---

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

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