진취적 삶
03 자바스크립트 개발 환경과 실행 방법 본문
3.1 자바스크립트 실행 환경
JS 는 브라우저 환경 또는 node.js 환경에서 실행 할수 있다.
브라우저는 HTML,CSS,JS 실행해 웹페이지를 브라우저 화면에 랜더링하는것이 주 목적 node.js 는
브라우저 외부에서 js 실행 환경을 제공하는것이 주된 목적
DOM API 는 브라우저에서 지원 하지만 node.js는 제공 안함
node.js 는 파일을 생성하고 수정하는 파일 시스템을 제공하지만 브라우저는 이를 지원 안함 왜냐하면 브라우저를 통해 실행되는 js가 사용자 컴퓨터의 파일을 수정하거나 삭제 가능할 경우 컴퓨터가 악성코드에 노출되는것과 마찬가지이다 .
3.2 웹 브라우저
크롬 브라우저의 v8 js 엔진은 node.js 에서도 사용
3.2.1 개발자 도구
Elements 로딩된 웹페이지의 DOM 과 CSS를 편진해서 랜더링된 뷰를 확인할수 있다.
| Console | 로딩된 웹페이지의 에러를 확인 |
| Sources | 로딩된 웹페이지의 js 코드를 디버깅 |
| Network | 로딩된 웹페이지에 관련된 네트워크 용청 정보와 성능 확인 |
| Application | 웹 스토리지 ,세션 ,쿠기 확인 관리 |
3.2.2 콘솔
js 코드에서 에러가 발생해 애플리케이션이 동작하지 않을때 가장 우선적으로 살펴봐야 할곳
3.2.3 브라우저에서 자바스크립트 실행
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="counter">0</div>
<button id="increase">+</button>
<button id="decrease">-</button>
<script>
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("increase button click ", num);
render();
};
</script>
</body>
</html>
error 발생
Ex03_01.html:20 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
at render (Ex03_01.html:20:28)
at $increase.onclick (Ex03_01.html:26:9)
3.2.4 디버깅
브레이크 포인트를 걸고 에러 정보를 확인하자
3.3 node. js
프로젝트 규머가 커짐에 따라 react, angular, lodash 같은 프레임 워크 또는 라이브러리를 도입하거나 여러가지 도구를 사용할 필요가 있다.
'개발 도서 > 자바스크립트 deepdive' 카테고리의 다른 글
| 10 객체 리터럴 (0) | 2023.07.11 |
|---|---|
| 02 자바스크립트란? (0) | 2023.07.10 |
| 04 변수 (0) | 2023.07.10 |
| 05 표현식과 문 (0) | 2023.07.10 |
| 01 프로그래밍 (0) | 2023.07.10 |