딥다이브 3. 자바스크립트 개발 환경과 실행 방법
3.1 자바스크립트 실행 환경
자바스크립트 엔진
- 모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장
- Node.js도 자바스크립트 엔진을 내장하고 있음
- 따라서 브라우저 또는 Node.js 환경에서 자바스크립트를 실행할 수 있음
브라우저와 Node.js 차이점
- 브라우저는 HTML, CSS, 자바스크립트를 실행해서 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적
- 파일을 생성하고 수정할 수 있는 파일 시스템을 제공하지 않음
[예시] 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합인 DOM API를 기본적으로 제공
- Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적
- 파일을 생성하고 수정할 수 있는 파일 시스템을 제공
[예시] 브라우저 외부에서 자바스크립트 개발 환경을 제공하는 것이 목적이므로 DOM API 제공하지 않음
3.2 Web Browser
개발자 도구
- 크롬 브라우저가 제공하는 개발자 도구(Dev Tools)는 웹 애플리케이션 개발에 필수적인 강력한 도구
- 개발자 도구는 브라우저에 기본 내장되어 있으므로 별도로 설치할 필요가 없음
개발자 도구의 단축키
| 운영체제 | 단축키 |
| window | F12 또는 Ctrl+Shift+I |
| macOS | Command+Option+I |
개발자 도구의 기능
| 패널 | 설명 |
| Elements | 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인 가능 |
| Console | 로딩된 웹페이지의 에러를 확인, 자바스크립트 소스코드에 작성한 console.log 메서드의 실행결과 확인 가능 |
| Sources | 로딩된 웹페이지의 자바스크립트 코드를 디버깅 가능 |
| Network | 로딩된 웹페이지에 관련된 네트워크 요청(request)정보와 성능 확인 |
| Application | 웹 스토리지, 세션, 쿠키를 확인하고 관리 가능 |
콘솔 (console)
- 개발자 도구 Console 패널은 자바스크립트 코드에서 에러가 발생해 애플리케이션에 정상적으로 동작하지 않을 가장 우선적으로 살펴봐야 하며 에러가 발생한 경우가 아니더라도 콘솔은 매우 유용함
- 구현 단계에서 디버깅을 실행하는 것보다 간편하게 코드의 실행 결과를 확인하면서 개발을 진행하기 위해 console.log 메서드를 사용하는 경우가 많음
- 콘솔은 자바스크립트 코드를 직접 입력해 그 결과를 확인할 수 있는 REPL(Read Eval Print Loop: 입력 수행 출력 반복) 환경으로 사용할 수도 있음
[예시]
1+2
// 3
Math.max(1,2,3)
// 3
브라우저에서 자바스크립트 실행
- HTMl 파일을 로드하면 자바스크립트 코드를 실행할 수 있음
[예시] 아래 코드를 입력하고 브라우저에서 실행
< !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 button click", num);
render();
};
$decrease.onclick = function () {
num--;
console.log("decrease button click", num);
render();
};
</script>
</body>
</html>위의 코드를 실행한 후 + 혹은 - 버튼을 클릭하면 에러가 발생하며 개발자 도구의 콘솔에서 에러를 확인할 수 있음
아래와 같이 코드를 수정한 후 다시 실행
< !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");
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 button click", num);
render();
};
$decrease.onclick = function () {
num--;
console.log("decrease button click", num);
render();
};
</script>
</body>
</html>개발자 도구의 콘솔에서 확인하면 정상적으로 작동하는 것을 확인
디버깅
- 디버깅은 모든 소프트웨어에서 소스 코드의 오류 또는 버그를 찾아서 수정하는 과정
- 소프트웨어가 예상대로 작동하지 않으면 컴퓨터 프로그래머는 오류가 일어나는 원인을 알아내기 위해 코드를 분석함
- 디버깅 도구를 사용해 소프트웨어를 제어된 환경에서 실행하고 코드를 단계 별로 확인하여 문제를 분석하고 수정함
https://aws.amazon.com/ko/what-is/debugging/
디버깅이란 무엇인가요? - 디버깅 설명 - AWS
컴퓨터 프로그래밍은 추상적이고 개념적인 활동인 만큼, 버그와 오류가 발생하기 마련입니다. 컴퓨터는 전자 신호의 형태로 데이터를 조작합니다. 프로그래밍 언어는 사람이 컴퓨터와 더 효율
aws.amazon.com
https://developer.chrome.com/docs/devtools/
Chrome DevTools - Chrome Developers
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.
developer.chrome.com
[예시] 위의 예시에서 사용했던 코드의 디버깅
$counter 변수의 값이 null인지 확인해보고 null 이라면 이유를 알아내서 에러 발생 원인을 제거함
에러 발생한 코드 왼쪽에 라인 번호를 클릭해서 중단점 걸고 재클릭하면 디버깅 모드로 들어감
3.2 Node.js
Node.js 소개
- 2009년 라이언 달이 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경을 발표함
- 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경
npm 소개
- 자바스크립트 패키지 매니저로 Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI (command line interface)를 제공
- 자신이 작성한 패키지를 공개할 수 있고, 필요한 패키지를 검색해서 재사용할 수 있음
Node.js 버전
- LTS version - 장기적으로 안정된 지원이 보장된 버전
- Current version 최신 기능을 제공하며 업데이트가 지속적으로 진행되는 버전
Node.js 설치
Node.js 홈페이지에 접속해서 원하는 버전을 선택한 후 다운로드 진행되며 아래 경로에 다운됨
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
Node.js 설치경로
| 운영체제 | 설치경로 |
| window | C:\Program Files\nodejs\node.exe |
| macOS | \usr\local\bin\node |
- 설치 확인을 하기 위해서 아래 명령어 실행
node -v // node 버전 확인 명령어
npm -v // npm 버전 확인 명령어Node.js REPL
- REPL (Read Eval Print Loop)을 사용하면 간단한 자바스크립트 코드를 실행해 결과 확인 가능
Node.js 실행을 위해서 터미널/명령 프롬프트 입력
$node자바스크립트 파일 실행을 위해서 터미널/명령 프롬프트 입력
$node index.js
// $node 입력 후 파일 이름 입력REPL 종료 하기위해서 터미널/명령 프롬프트 입력
Ctrl + C 키를 두 번 입력
3.4 Visual Studio Code
비주얼 스튜디오 코드 설치
- 비주얼 스튜디오 코드는 마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기
- 브라우저 콘솔 또는 Node.js의 REPL에서 자바스크립트 코드를 실행할 수 있지만 비주얼 스튜디오 코드와 같은 코드 에디터를 사용해서 코드 자동 완성, 문법 오류 감지, 디버깅, 깃 연동 등 편리한 기능 활용 가능
- VS Code 홈페이지에 접속하여 프로그램을 내려받아서 설치할 수 있음
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
내장 터미널
- 유닉스 기반의 대형 컴퓨터에서 사용자들이 컴퓨터에 접속하기 위해 사용했던 단말기로, 요즘에는 컴퓨터를 직접 제어하기 위해 사용하는 소프트웨어를 뜻함
내장 터미널에서 실행하기 위한 단축키
| Window/Linux | macOs |
| Ctrl + ` | Ctrl + ` |
[예시] VS Code 실행한 다음 적당한 위치에 프로젝트 폴더 생성한 후 자바스크립트 파일 생성
const arr = [1, 2, 3];
arr.forEach(console.log)
// 출력
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
Code Runner 확장 플러그인
- Code Runner 확장 플러그인을 사용하면 Vs Code의 내장 터미널에서 단축키를 사용해 Js를 비롯해 다양한 프로그래밍 언어로 구현된 소스코드를 간단히 실행 가능
- 마켓플레이스에서 다운로드해서 설치할 수 있음
현재 표시 중인 자바스크립트 파일 실행 단축키
| Window | macOS |
| Ctrl+Alt+N | Control+Option+N |
[예시] 아래 코드를 입력한 후 실행하면 에러가 발생
const arr = [1, 2, 3];
arr.forEach(alert)
// 출력
arr.forEach(alert)
^
ReferenceError: alert is not defined
- 브라우저에서 알림창을 띄우는 alert 함수는 브라우저에서만 작동하는 클라이언트 사이드 web API 이므로 브라우저 환경에서만 유효
- 브라우저와 Node.js 환경 모두에서 실행 가능한 ECMAScript 표준 빌트인 함수와 브라우저 / Node.js 환경 각각에서만 실행 가능한 함수가 다르므로 유의
Liver Server 확장 플러그인
- Live server 확장 플러그인을 사용하면 소스 코드를 수정할떄 마다 수정 사항을 브라우저에 자동으로 반영해주기 때문에 편리하게 작성 가능
- 설치 후 가상 서버 가동 버튼을 클릭하면 브라우저에 HTML 파일이 자동 로딩되며 이후 소스코드를 수정하면 수정 사항이 자동으로 반경됨
[예시] 아래 코드를 작성한 후 Go Live 버튼을 누르면 실행
<!DOCTYPE html>
<html>
<body>
<script src="index.js"></script>
</body>
</html>