[기본부터 탄탄한 개발공부] 3장 자바스크립트 개발 환경과 실행방법

책 '모던 자바스크립트 DEEP DIVE' 를 요약한 내용입니다

3.1 자바스크립트 실행 환경

 

- 모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장한다.

- Node.js 도 자바스크립트 엔진을 내장한다

 

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

 

But 용도가 다름

- 브라우저는 자바스크립트를 실행해 웹 화면에 렌더링하는 것이 주된 목적임

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

 

브라우저는 파싱된 HTML요소를 선택하거나 조작하는 기능의 집합인 DOM API를 기본적으로 제공

하지만 Node.js는 DOM API를 제공하지 않음

Node.js는 그럴 필요가 없기 때문임

 

반대로 Node.js는 파일 생성,수정 할 수 있는 파일 시스템을 제공하나 브라우저는 지원하지 않는다

만약 브라우저가 이 기능을 사용할 수 있으면 내 컴퓨터에 악성코드가 작살나게 많아질듯

 

3.2 웹 브라우저

크롬이 가장 많이 쓰임

크롬 브라우저의 V8 자바스크립트 엔진은 Node.js에서도 사용한다

 

3.2.1. 개발자 도구

 

크롬브라우저 기본 내장 -> 설치 불필요

 

개발자 도구의 기능 간단 정리

패널	설명
Elements	로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링 된 뷰 확인 가능. 물론 저장은 안됨
Console	로딩된 웹페이지의 에러 확인, 자바스크립트 소스코드에 작성한 console.log 메서드의 실행 결과 확인
Sources	로딩된 웹페이지의 자바스크립트 코드를 디버깅 가능
Network	로딩된 웹페잊에 관련된 네트워크 요청(Request)정보와 성능 확인가능
Application	웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있음

 

3.2.2 콘솔

 

애플리케이션이 정상적으로 동작 안할때 가장 우선적으로 살펴야 할 곳.

콘솔은 열어둔 채로 개발하면 좋음

console.log 명령어 사용하면 좋음

콘솔은 자바스크립트 코드를 직접 입력해 그 결과를 확인 할 수 있는 REPL(Read Eval Print Loop:입력 수행 출력 반복)환경으로 사용할 수 있음

 

3.2.4 디버깅

 

개발자 도구의 Sources 패널에서 에러 발생 위치 확인 가능

 

3.3 Node.js

 

3.3.1 Node.js 와 npm 소개

 

2009년 라이언 달이 발표한 Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다. 

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

 

npm(node package manager)은 자바스크립트 패키지 매니저임

node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할, 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다.

 

3.3.2 Node.js 설치

 

LTS 버전 : 장기적으로 안정된 지원 보장

Current 버전 : 최신 기능 제공하지만, 업데이트가 발생하는 버전으로 불안정할 수 있음

 

node -v

해당 명령어로 node 가 잘 설치되어 있는지 확인 가능 (버전 표시)

 

3.3.3 Node.js REPL

 

Node.js는 브라우저의 콘솔창처럼 REPL 기능을 제공

node

> 1+2
3
> Math.max(1,2,3)
3
>[1,2,3].filter(v => v%2)
[1,3]

 

자바스크립트 파일을 실행하려면 node 명령어 뒤에 파일 이름을 입력한다. 파일 확장자 .js는 생략해도 됨

node indes.js

 

 

3.4 비주얼 스튜디오 코드

 

검색해서 설치하자

강력하고 편함

내장 터미널 사용가능

 

Code Runner 확장 플로그인을 마켓플레이스를 통해 다운받으면 VS code 의 내장 터미널에서 단축키를 사용해 자바스크립트를 비롯해 다양한 프로그래밍 언어로 구현된 소스코드를 실행할 수 있음

 

Live Server 확장프로그램을 통해 브라우저 환경을 실행할 수 있음