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

연우·2024년 11월 1일

JavaScript

모던자바스크립트 Deep Dive

목록 보기

3/15

3.1 자바스크립트 실행 환경

브라우저와 Node.js는 자바스크립를 해석하고 실행 할 수 있는 자바스크립트 엔진을 내장
브라우저
- HTML, CSS, 자바스크립트를 실행해 화면에 렌더링 하는 것이 주된 목적
- 클라이언트 사이드 Web API를 지원
Node.js
- 브라우저 외부에서 자바스크립트 실행 환경 제공이 주된 목적
- ECMAScript와 Node.js 고유의 API를 지원

3.2 웹 브라우저

3.2.1 개발자 도구

크롬 브라우저가 제공하는 웹 애플리케이션 개발에 필수적인 도구
단축키
- 윈도우 : F12 또는 Cltl + Shift + I
- macOS command + option + I
자주 사용하는 기능
- Elements : 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인
- Console : 로딩된 웹페이지의 에러를 확인하거나 소스코드에 작성한 console.log 메서드의 실행 결과를 확인
- Sources : 로딩된 웹페이지의 자바스크립트 코드를 디버깅
- Network : 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인
- Application : 웹 스토리지, 세션, 쿠키를 확인하고 관라

3.2.2 콘솔

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

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

브라우저는 HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드 실행

<!DOCTYPE html>
<html lang="en">
<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('incerease 버튼 클릭', num);
            render()
        };

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