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

Front-End/JavaScript

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

🌳지혜의 숲 2022. 12. 9. 17:45

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

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Counter</title>
</head>

<body>
    <div id="counter">0</div>
    <button id="increase">+</button>
    <button id="decrease">-</button>
    <script>
        // 에러를 발생시키는 코드: 선택지는 'couter-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>

디버깅방법
1. 콘솔창을 열어 에러의 링크를 클릭한다.
2. 자동으로 넘어간 소스패널에 해당 에러가 표시된 줄(왼쪽 번호)을 클릭한다.(브레이크 포인트)
3. 에러를 재현하기 위해 웹페이지의 버튼(에러발생 지점)을 다시 클릭한다.
4. 디버깅모드 활성화(디버깅 모드가 활성화되지 않으면 웹페이지를 새로고침한다.)
5. 소스패널의 브레이크 포인트를 찍어 놓은 줄에 마우스를 가져다 대면 에러 발생원인을 알 수 있다.

내장 터미널

const arr = [1, 2, 3];
arr.forEach(console.log);

// 내장 터미널을 열고 'node [파일이름]'을 입력하면 js를 실행시킨 결과를 볼 수 있다.



const arr2 = [1, 2, 3];
arr.forEach(alert);

// "ReferenceError: alert is not defined"
// alert함수는 브라우저에만 동작하는 클라이언트 사이드 Web API(Node.js환경에서는 실행할 수 없음)

VS Code Live Server 플러그인을 설명하기 위한 예시문
해당 파일을 마우스 오른쪽 클릭하여 "Open with Live Server"를 선택
매번 새로고침을 하지 않아도 가상 서버가 기동되어 브라우저에 HTML 파일이 자동 로딩된다.
매번 새로고침 하지 않아도 됨.

참고자료: http://www.yes24.com/Product/Goods/92742567

모던 자바스크립트 Deep Dive - YES24

『모던 자바스크립트 Deep Dive』에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤친다. 따라서 여러분이 작성한 코드

www.yes24.com

저작자표시 비영리 변경금지 (새창열림)