03. 자바스크립트 개발 환경과 실행 방법

자바스크립트 실행 환경

• 자바스크립트는 브라우저 환경, Node.js 환경에서 실행할 수 있음
  • 브라우저
    • HTML, CSS, 자바스크립트를 실행해 웹페이지를 화면에 렌더링하는 것이 목적임
    • ECMAScript, 클라이언트 사이드 Web API를 지원함
  • Node.js
    • 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 목적임
    • ECMAScript, Node.js 고유의 API를 지원함

 

1. 클라이언트 사이드 Web API

• DOM
• BOM
• Canvas
• XMLHttpRequest
• fetch
• requestAnimationFrame
• SVG
• Web Storage
• Web Component
• Web Worker 등

 

2. Node.js API

• 모듈(os, url, crypto 등)
• 파일 시스템
• HTTP 등

---

웹 브라우저

• 크롬을 사용하는 것이 권장됨
  • ECMAScript 사양을 준수함
  • 시장 점유율이 가장 높음
  • 크롬 브라우저의 V8 자바스크립트 엔진은 Node.js 에서도 사용하고 있음

 

1. 자주 사용하는 개발자 도구의 기능

패널	설명
Elements	로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있다. 단, 편집한 내용이 저장되지는 않는다. 웹페이지가 의도된 대로 렌더링되지 않았다면 이 패널을 확인해 유용한 힌트를 얻을 수 있다.
Console	로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 메소드의 실행 결과를 확인할 수 있다.
Sources	로딩된 웹페에지의 자바스크립트 코드를 디버깅할 수 있다.
Network	로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다.
Application	웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.

 

2. 콘솔

• 자바스크립트 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 제일 먼저 살펴봐야 할 곳
• console.log 메소드를 사용해 코드의 실행 결과를 확인하면서 개발을 진행할 수 있음
• REPL(Read Eval Print Loop: 입력 수행 출력 반복) 환경으로 사용 가능
  • 간단한 자바스크립트 코드를 실행해 결과를 확인해 볼 수 있음

---

Node.js

• 2009년, 라이언 달(Ryan Dahl)이 발표함
• 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
• 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경

 

npm (node package manager)

• 자바스크립트 패키지 매니저
• Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할
• 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공함

 

1. Node.js 설치

https://nodejs.org/en/

 

Node.js 는 아래의 디렉토리에 설치되며, 버전에 따라 설치 위치는 바뀔 수 있다.

• 윈도우 : C:\Program Files\nodejs\node.exe
• macOS : /usr/local/bin/node

 

[ Node.js 와 npm 버전 확인 ]

$ node -v
v14.3.0

$ npm -v
6.14.5

 

2. Node.js REPL(Read Eval Print Loop)

$ node
Welcome to Node.js v14.17.6.
Type ".help" for more information.
> 1+2
3
> Math.max(1,2,3)
3
> [1,2,3].filter(v=>v%2)
[ 1, 3 ]

• Node.js 가 제공함
• 간단한 자바스크립트 코드를 실행해 결과를 확인해 볼 수 있음

 

$ node index.js

• node 명령어 뒤에 파일 이름을 입력하면 자바스크립트 파일이 실행됨
• 파일 확장자인 .js 는 생략 가능
• Ctrl + C 키를 두 번 입력하면 Node.js REPL이 종료됨

 

참고 : https://nodejs.org/dist/latest/docs/api/repl.html#repl_repl