[모던JS] 03. 자바스크립트 개발 환경과 실행 방법

Rae-eun Yang·2022년 4월 29일
JavaScript모던 자바스크립트 Deep Dive
0

모던 자바스크립트 Deep Dive

목록 보기
2/8

3.1 자바스크립트 실행 환경

모든 브라우저와 Node.js는 자바스클비트를 해석, 실행할 수 있는 자바스크립트 엔진을 내장하고 있음
-> 따라서 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있음

  • 브라우저의 목적 : HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링 하는 것
  • Node.js의 목적 : 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것
  • 브라우저 vs Node.js
브라우저Node.js
ECMAScript 실행 가능ECMAScript 실행 가능
클라이언트 사이드 Web API 지원클라이언트 사이드 Web API 지원 X
Node.js 고유의 API 지원
파일 시스템 제공 X
(Web API인 FileReader 객체로 지정한 파일 읽기는 가능)		파일 시스템 제공
  • 클라이언트 사이드 Web API : DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, WebStroage, Web Component, Web Worker 등

3.2 웹 브라우저

이 책에서 사용할 브라우저 : 구글 크롬(Chrome)

  • ECMAScript 사양 준수, 시장 점유율 최고!
  • 크롬 브라우저의 V8 자바스크립트 엔진 Node.js에서도 사용중!

크롬 최신 버전 업데이트 방법
1. 크롬에 들어간다
2. 오른쪽 상단의 점 세개를 누른다
3. 도움말을 누른다

3.2.1 개발자 도구

개발자 도구 : 크롬 브라우저가 제공하는 웹 애플리케이션 개발에 필수적인 도구, 브라우저에 기본 내장되어 있음

  • 개발자 도구 단축키
운영체제단축키
윈도우F12 또는 Ctrl + Shift + I
macOScommand ⌘ + option ⌥ + I
  • 개발자 도구의 기능
패널설명
Elements로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해볼 수 있음 (단, 편집 내용 저장 X), 웹페이지가 의도된 대로 렌더링되지 않았다면 이 패널을 확인해보길!
Console로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 메소드 실행 결과 확인 가능!
Sources로딩된 웹페이지의 자바스크립트 코드 디버깅 가능!
Network로딩된 웹페이지에 관련된 네트워크 요청(request) 정보와 성능 확인 가능!
Application웹 스토리지(Web Storage), 세션, 쿠키를 확인하고 관리 가능!

3.2.2 콘솔

  • Console 패널 : 자바스크립트 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳
    -> 구현 단계에서는 항상 콘솔을 열어둔 상태에서 개발하는 것이 좋다!
    (콘솔을 열어두지 않으면 에러가 발생했는지조차 알 수 없는 경우가 있음)
    -> 디버깅을 실행하는 것 보다 간편하게 코드의 실행 결과를 확인하면서 개발하기 위해 console.log 메소드를 사용한다!

  • console.log(...) : 소괄호 안의 코드를 평가해서 그 결과를 콘솔에 출력하는 함수

콘솔은 자바스크립트 코드를 직접 입력해 그 결과를 확인할 수 있는 REPL(Read Eval Print Loop : 입력 수행 출력 반복) 환경으로 사용할 수 있음.

개발자 도구의 Console 패널을 클릭하면 다음과 같이 프롬프트 (>)가 표시되는 것을 확인할 수 있다.

다음과 같이 우측 상단의 점 세개를 클릭하면 브라우저에서 개발자 도구를 분리할 수도 있다.

프롬프트에 자바스크립트 코드를 입력하면 다음 줄에 실행 결과가 표시된다. 엔터 키를 입력하면 다음 프롬프트로 이동한다.

여러 줄로 이뤄진 자바스크립트 코드를 실행할 때 줄바꿈이 필요한 경우에는 Shift 키를 누른 상태에서 엔터키를 누른다.

자바스크립트 코드를 실행하는 중에 에러가 발생하며 에러의 내용이 콘솔에 출력된다.

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

브라우저는 HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드를 실행함. 만약 자바스크립트 코드 내에서 console.log 메소드가 호출되었다면 콘솔에 실행 결과가 출력됨.

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

'+'또는 '-'버튼을 클릭하면 에러가 발생한다. 만약 개발자 도구의 콘솔을 열어둔 상태가 아니라면 에러가 발생한 것을 알아차리기 어렵다. 에러를 확인하기 위해 개발자 도구의 콘솔을 열어보자.


에러가 발생하기는 했으나 HTML 파일에 포함된 자바스크립트가 일부 실행된 것은 확인했다. 다음은 디버깅에 대해 살펴보자.

3.2.4 디버깅

위의 Console 패널에서 에러 정보의 오른쪽에 에러 발생 위치 (ex. ex03-1.html:18)를 나타내는 링크를 클릭해보자. 그럼 다음과 같이 자바스크립트 코드를 디버깅할 수 있는 Sources 패널로 이동할 것이다.

에러가 발생한 위치에 빨간 밑줄이 표시되고, 그 위에 마우스를 올려보면 "Uncaught TypeError : Cannot set property 'innerHTML' of null"이라는 에러 정보가 표시된다.
$counter 변수의 값이 null인지 확인해보고, null이라면 그 이유를 알아내서 에러가 발생한 원인을 제거해보자. 에러가 발생한 코드 왼쪽의 라인 번호를 클릭해 브레이크포인트(중단점)를 걸고(1) 새로고침을 누르면(2) 다음과 같이 디버깅 모드로 들어간다.

18번째 줄의 $counter에 마우스 커서를 올려 보면 $counter 변수의 값을 확인할 수 있다. 현재 $counter 변수의 값은 null이다. 13번째 줄의 'counter-x'를 'counter로 수정하면 에러가 제거될 것이다.

  • 디버깅 : 에러 메세지를 확인하고 에러가 발생한 원인을 제거하는 것

콘솔과 디버깅에 대한 자세한 내용은 구글의 "Tools for Web Developers : 콘솔 사용"과 "Tools for Web Developers : Chrome DevTools에서 자바스크립트 디버깅 시작하기" 참고하삼!


3.3 Node.js

클라이언트 사이드, 즉 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있다. 하지만 프로젝트의 규모가 커짐에 따라 React, Angular, Lodash 같은 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint 등 여러 가지 도구를 사용할 필요가 있다. 이때 Node.js와 npm이 필요하다.

3.3.1 Node.js와 npm 소개

2009년, 라이언 달이 발표한 Node.js!

  • Node.js : 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경, 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경

  • npm (node pakage manager) : 자바스크립트 패키지 매니저, Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공, 자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색해 재사용할 수도 있다.

3.3.2 Node.js 설치

Node.js 웹사이트 접속

  • LTS 버전 : 장기적으로 안정된 지원이 보장됨
  • Current 버전 : 최신 기능을 제공하지만 업데이트가 발생하는 버전, 안정적이지 않을 수 있음

(이 책에서는 그 당시 Current 버전인 14.3.0을 설치함, 내 버전 Node.js : 16.14.2, npm : 8.5.0)

3.3.3 Node.js REPL

Node.js가 제공하는 REPL(Read Eval Print Loop)을 사용하면 간단한 자바스크립트 코드를 실행해 결과를 확인해볼 수 있다. 명령 프롬프트에서 다음과 같은 명령어를 실행해 보자.

$node

프롬프트가 >로 변경되면 자바스크립트 코드를 실행해 볼 수 있다.

자바스크립트 파일을 실행하려면 node 명령어 뒤에 파일 이름을 입력한다. (확장자 .js는 생략 가능)

$node index.js

Ctrl + C 키를 두 번 입력하면 Node.js REPL이 종료된다.

3.4 비주얼 스튜디오 코드

3.4.1 비주얼 스튜디오 코드 설치

브라우저의 콘솔 또는 Node.js의 REPL(Read Eval Print Loop)에서 자바스크립트 코드를 실행할 수 있지만 애플리케이션을 개발하는 단계에서 사용하기에는 부족함이 많다. 코드 에디터를 사용하면 코드 자동 완성, 문법 오류 감지, 디버깅, Git 연동 등 강력하고 편리한 기능을 활용할 수 있다. 최근 인기를 끌고 있는 코드 에디터는 마이크로소프트의 VSCode 이다.

3.4.2 내장 터미널

적당한 위치에 프로젝트 폴더를 생성하고 자바스크립트 파일을 생성해 보자. 예를 들어, d드라이브의 javascriptDeepDive폴더에 index.js 파일을 생성한다.

//D:\javascriptDeepDive\index.js
const arr = [1, 2, 3];

arr.forEach(console.log);

VS Code에는 터미널(윈도우에서는 명령 프롬프트)이 내장되어 있다. 내장 터미널을 열려면 Ctrl + ` 단축키를 누른다.

내장 터미널이 열리고 프롬프트가 나타나면 다음과 같은 Node.js 명령어로 자바스크립트 파일을 실행할 수 있다.

3.4.3 Code Runner 확장 플러그인

VS Code에서는 확장 플러그인 저장소인 "마켓플레이스"를 통해 다양한 확장 플러그인을 다운로드해서 설치할 수 있다. Code Runner 확장 플러그인을 사용하면 VS Code의 내장 터미널에서 단축키를 사용해 자바스크립트를 비롯해 다양한 프로그래밍 언어로 구현된 소스코드를 간단히 실행할 수 있다.

Code Runner 확장 플러그인을 설치해 보자. VS Code의 확장 버튼을 클릭한 다음 "Code Runner"를 입력해 검색하고 Install 버튼을 클릭한다.

Code Runner 확장 플러그인에서는 다음과 같은 단축키를 사용해 현재 표시중인 자바스크립트 파일을 실행할 수 있다.

운영체제단축키
윈도우Ctrl + Alt + N
macOScontrol ^ + option ⌥ + N

다음과 같이 소스코드 수정 후 다시 실행해보자.

//D:/javascriptDeepDive/index.js
const arr = [1, 2, 3];

arr.forEach(alert);

이 코드를 실행하면 "ReferenceError : alert is not defined"라는 에러가 발생한다. 브라우저에 알림창을 띄우는 alert 함수는 브라우저에서만 동작하는 클라이언트 사이드 Web API다. 즉, alert 함수는 브라우저 환경에만 유효하다.
그런데 Code Runner 확장 플러그인은 Node.js 환경을 사용해 자바스크립트를 실행한다. 따라서 클라이언트 사이드 Web API가 포함된 소스코드는 Code Runner 확장 플러그인을 통해 실행하지 말고 브라우저 환경에서 실행해야 한다.

결론 : Code Runner 플러그인을 사용해서 쉽게 js 파일을 실행할 수 있다! 클라이언트 사이드 Web API는 Node.js 환경에서 실행할 수 없다!
ex. alert 함수

3.4.4 Live Server 확장 플러그인

클라이언트 사이드 Web API가 포함된 자바스크립트 코드를 실행하려면 브라우저에서 실행해야 한다(Node.js X). 위 예제를 브라우저에서 실행하려면 개발자 도구의 콘솔에서 실행하거나 자바스크립트 코드를 HTML에 삽입한 다음 HTML 파일을 브라우저에서 열어야 한다.

위 예제를 브라우저에서 실행하기 위해 앞에서 생성한 javascriptDeepDive 폴더에 다음과 같은 HTML파일을 생성하자.

<!DOCTYPE html>
<html>
  <body>
    <script src="index.js"></script>
  </body>
</html>

위 HTML 파일을 브라우저에서 직접 열어도 좋지만 파일 경로 문제가 발생할 수 있고, 소스코드를 수정할 때마다 매번 새로고침해야 하므로 번거롭다.

이때, Live Server라는 확장 플러그인을 이용하면 소스코드를 수정할 때마다 수정 사항을 브라우저에 자동으로 반영해주기 때문에 매우 편리하다. VS Code의 확장 버튼을 클릭한 다음 "Live Server"를 검색하고 Install 버튼을 클릭한다.

Live Server 확장 플러그인이 설치되면 화면 아래에 "Go Live"라는 버튼이 생긴다.

이 버튼을 클릭하면 가상 서버가 기동되어 브라우저에 HTML 파일이 자동으로 로딩된다. 이후 소스코드를 수정하면 수정 사항이 가상 서버에 자동으로 반영된다.

결론 : 클라이언트 사이드 Web API를 활용한 js 파일을 포함하는 HTML 파일을 렌더링할때는 브라우저를 사용해야한다. 하지만 브라우저에 나타나는 화면을 일일이 확인하는 것은 번거롭기 때문에 Live Server라는 확장 플러그인을 이용한다. Live Server 확장 플러그인은 버튼 하나로 가상의 서버를 기동시켜준다.

profile
Rae-eun Yang
개발자 지망생의 벨로그
이전 포스트

[모던JS] 02. 자바스크립트란?

다음 포스트

[모던JS] 04. 변수

0개의 댓글