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

윤상준·2022년 10월 9일

JavaScript 모던 자바스크립트 Deep Dive

모던 자바스크립트 Deep Dive

목록 보기

3/29

3.1 자바스크립트의 실행 환경

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

모든 브라우저와 Node.js는 자바스크립트 엔진을 내장하고 있다.

자바스크립트의 용도

브라우저와 Node.js는 ESMAScript 외에는 호환되지 않는다.

브라우저

HTML, CSS, 자바스크립트를 통해 웹 페이지를 화면에 렌더링.

클라이언트 사이드 Web API를 추가로 지원한다.

Node.js

브라우저 외부에서 자바스크립트 실행 환경을 제공.

Node.js 고유의 API를 추가로 지원한다.

3.2 웹 브라우저

3.2.1 개발자 도구 (Dev Tools)

크롬 브라우저에서 제공하는 웹 어플리케이션 개발에 필수적인 도구.

3.2.2 콘솔 (Console)

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

REPL (Read Eval Print Loop : 입력 수행 출력 반복) 환경을 제공하여 자바스크립트 코드를 직접 입력하고 결과 확인이 가능하다.

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

브라우저는 HTML 파일의 Script 태그에 포함된 자바스크립트 코드를 실행한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Counter</title>
</head>
<body>
  <div id="counter">0</div>
  <button id="increase">+</button>
  <button id="decrease">-</button>
  <script>
    // 에러를 발생시키는 코드: 선택자는 'counter-x'가 아니라 'counter'를 지정해야 한다.
    const $counter = document.getElementById('counter-x');
    const $increase = document.getElementById('increase');
    const $decrease = document.getElementById('decrease');

    let num = 0;
    const render = function () { $counter.innerHTML = num; };

    $increase.onclick = function () {
      num++;
      console.log('increase 버튼 클릭', num);
      render();
    };

    $decrease.onclick = function () {
      num--;
      console.log('decrease 버튼 클릭', num);
      render();
    };
  </script>
</body>
</html>