1 분 소요

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

3.1 자바스크립트 실행 환경

  • 기본적으로 브라우저에서 동작하는 코드는 Node.js 환경에서도 동일하게 동작한다.
    • 모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다.
    • Node.js도 자바스크립트 엔진을 내장하고 있다.
  • 브라우저와 Node.js는 용도가 다르다.
    • 브라우저는 HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이다.
    • Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적이다.

→ 따라서 브라우저와 Node.js 모두 자바스크립트의 코어인 ECMAScript를 실행할 수 있지만 이외에 추가로 제공하는 기능들은 호환되지 않는다.

  • 브라우저는 ECMAScript와 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 같은 클라이언트 사이드 Web API를 지원한다.
  • Node.js는 ECMAScript와 Node.js 고유의 API를 지원한다.

3.2 웹 브라우저

  1. 개발자 도구
    1. 웹 어플리케이션 개발에 필수적인 강력한 도구이다.
      1. Elements
        • 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있다. 단, 편집한 내용이 저장되지는 않는다. 웹페이지가 의도된 대로 렌더링되지 않았다면 이 패널을 확인해 유용한 힌트를 얻을 수 있다.
      2. Console
        • 로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 메서드의 실행 결과를 확인할 수 있다.
      3. Sources
        • 로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.
      4. Network
        • 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다.
      5. Application
        • 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.
    2. 단축키는 F12 또는 Ctrl + Shift - l 이다.
  2. 콘솔
    1. 자바스크립트 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳이다.
    2. 구현 단계에서 디버깅을 실행하는 것보다 간편하게 코드의 실행 결과를 확인하면서 개발을 진행하기 위해 console.log 메서드를 사용하는 경우가 많다.
      1. console.log( … )는 소괄호 안의 코드를 평가해서 그 결과를 콘솔에 출력하는 함수

    # 3.3 Node.js

    • 설치는 알아서 해라

    # 3.4 비주얼 스튜디오 코드

    • 설치는 알아서 해라
    • 확장 플러그인
      • Code Runner
      • Live Server

댓글남기기

참고