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

03장 자바스크립트 개발 환경과 실행 방법
3.1 자바스크립트 실행 환경
3.2 웹 브라우저
3.3 Node.js

728x90

🚀 본 포스트는 '모던 자바스크립트 Deep Dive' 도서를 바탕으로 핵심 개념 및 내용을 요약한 포스트입니다.

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

3.1 자바스크립트 실행 환경

자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행이 가능합니다.

기본적으로 브라우저에서 동작하는 코드는 Node.js 환경에서도 동일하게 동작하지만 브라우저와 Node.js는 용도가 다르다는 점을 주의해야 합니다.

브라우저 - HTML, CSS, JS를 실행하여 웹 페이지를 브라우저 화면에 렌더링하는 것이 목적
Node.js - 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 목적

따라서, 브라우저와 Node.js는 모두 자바스크립트의 코어인 ECMAScript를 실행할 수 있지만 각 환경에서의 추가 기능은 서로 지원하지 않습니다.

예를 들어, 브라우저의 DOM API(파싱된 HTML 요소를 선택하고 조작하는 기능)는 Node.js에서 지원되지 않으며 반대로 Node.js에서 기본 제공되는 파일 시스템은 브라우저에서는 지원되지 않습니다.

3.2 웹 브라우저

본 포스팅에서의 브라우저는 구글 크롬 브라우저를 의미합니다. 크롬은 ECMAScript 사양을 준수하며 시장 점유율도 가장 높다는 특징을 가지고 있습니다.

3.2.1. 개발자 도구

크롬 브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 있어 필수적이고 강력한 도구입니다. 기본 내장되어 있어 별도로 설치할 필요가 없으며 아래 단축키로 열 수 있습니다.

Windows - F12 or Ctrl + Shift + I
macOS - command + option + I

자주 사용하는 개발자 도구의 기능은 아래 표와 같습니다.

패널	설명
요소 (Elements)	로딩된 웹 페이지의 DOM과 CSS를 편집하여 렌더링된 뷰를 확인할 수 있습니다. 편집된 내용은 저장되지 않으며 웹 페이지가 의도된 대로 렌더링되지 않은 경우에 유용하게 사용이 가능합니다.
콘솔 (Console)	로딩된 웹 페이지의 에러를 확인하거나 JS 소스 코드에 작성한 console.log 메서드의 실행 결과를 확인할 수 있습니다.
소스 (Sources)	로딩된 웹 페이지의 JS 코드를 디버깅할 수 있습니다.
네트워크 (Network)	로딩된 웹 페이지와 관련된 네트워크 요청 정보와 성능을 확인할 수 있습니다.
애플리케이션 (Application)	웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있습니다.

3.2.2. 콘솔

위에서도 간단히 설명한 것처럼 콘솔은 로딩된 웹 페이지의 에러, console.log 메서드의 실행 결과를 확인하는 용도로 사용할 수 있습니다.

추가로 콘솔 내에서 자바스크립트 코드를 직접 입력하여 결과를 확인하는 REPL(Read Eval Print Loop: 입력 수행 출력 반복) 환경으로도 사용 가능합니다.

3.2.3. 브라우저에서 JS 실행 / 디버깅

브라우저는 HTML을 로드하면 script 태그에 포함된 JS 코드를 실행합니다. 만일 JS 코드에 console.log 메서드가 호출되었다면 콘솔에 실행 결과가 출력됩니다.

아래와 같은 JS가 포함된 HTML 파일을 생성하고 브라우저를 실행하면 에러가 발생합니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>버튼 클릭</title>
    </head>
    <body>
        <button id="btn">버튼</button>
        <script>
        const $button = document.getElementById('button');

        $button.onclick = function () {
            console.log('버튼 클릭');
        }
        </script>
    </body>
</html>

만일 개발자 도구의 콘솔을 열어둔 상태가 아니라면 에러가 발생한 사실을 알아차리기 어렵기 때문에 콘솔을 켜두고 개발을 하는 것이 생산성 향상에 큰 도움을 줍니다.

우측 화면 중 분할된 아래 화면(콘솔)을 확인해본 결과, 에러가 발생한 사실을 알 수 있습니다.

우측 화면 중 분할된 위 화면(소스)를 확인하면 에러 정보와 에러가 발생한 위치를 알 수 있습니다.

이 경우에는 $button 변수의 값이 null이기 때문에 발생한 에러로 script 태그 내부에서 잘못된 id 값을 통하여 getElementById 메서드를 실행했다는 것을 알 수 있습니다.

3.3 Node.js

추후 마저 작성하도록 하겠습니다.

728x90

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] 모던 자바스크립트 Deep Dive - 06장 데이터 타입 (1)	2024.03.23
[JavaScript] 모던 자바스크립트 Deep Dive - 05장 표현식과 문 (0)	2024.03.21
[JavaScript] 모던 자바스크립트 Deep Dive - 04장 변수 (0)	2024.03.20
[JavaScript] 모던 자바스크립트 Deep Dive - 02장 자바스크립트란? (4)	2024.03.08
[JavaScript] 모던 자바스크립트 Deep Dive - 01장 프로그래밍 (0)	2024.03.05

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

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

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

3.1 자바스크립트 실행 환경

3.2 웹 브라우저

3.3 Node.js

'Web > JavaScript' 카테고리의 다른 글

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

3.1 자바스크립트 실행 환경

3.2 웹 브라우저

3.3 Node.js

'Web > JavaScript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역