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

3.1 자바스크립트 실행 환경

  • 모든 브라우저는 자바스크립트 엔진을 내장 Node.js도 자바스크립트 엔진을 내장

  • 그러나 둘의 사용 용도가 다르기 때문에 기능 제공이 조금씩 다름 예로 DOM API는 브라우저에 존재, Node.js에는 제공X

3.2 웹 브라우저(03-01)

  • 브라우저에서 자바스크립트를 실행한다는것을 확인하는 예제이다.(코드이해 할 필요 없다.) console.log는 개발자모드 콘솔에 실행 결과가 출력될 것이다.

  • ERROR있는 예제이므로 콘솔에 에러 발생 위치 더블클릭후 중단점걸고, 다시 실행해보면 디버깅을 할 수 있음.(구글 개발자모드에서 하는 디버깅)

  • 3장은 코드이해 안해도 됨.

<!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>

3.3 Node.js

  • 간단한 웹 애플리케이션은 브라우저만으로도 개발 가능. 그러나 규모가 커질수록 React, Angular, Lodash 같은 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint 등 여러 가지 도구를 사용할 필요가 있다 이때 Node.js와 npm이 필요

  • 간단한 설치 및 사용법은 생략…

3.4 비쥬얼 스튜디오 코드

  • 코드 에디터를 활용

03-02

  • VS-CODE 내장 터미널 실행 예제

  • 브라우저의 콘솔 동작은 REPL을 사용한 것이다, Node.js도 REPL을 제공한다(터미널에서 node입력해서 접근, node 파일.js로 파일 실행도 가능)

// myapp/index.js
const arr = [1, 2, 3];

arr.forEach(console.log);
// code runner플러그인 활용하는게 아니면, 터미널에 node index로 실행

03-03

  • Code Runner 플러그인 활용시 터미널에서 node 입력으로 실행시킬 필요없이 바로 버튼으로 실행시킬 수 있다

  • Web API환경의 alert는 Node.js환경에선 알 수 없다. 웹으로 실행을 할 것. 예시로 prompt도 웹에서 실행해야 한다.

// myapp/index.js
const arr = [1, 2, 3];

arr.forEach(alert);
// alert기능은 Web API이다.

03-04

  • Live Server 플러그인 활용시 웹에 자동으로 코드 수정이 먹힘.
<!DOCTYPE html>
<html>
<body>
  <script src="index.js"></script>
</body>
</html>

댓글남기기

참고