[Deep Dive] 03장 자바스크립트의 개발 환경과 실행 방법
이론적인 부분만 정리하고 설치부분은 건너뛰었다! 이미 설치 다 했으니깐!
1. 자바스크립트 실행 환경
모든 브라우저는 자바스크립트를 내장하고 있고, Node.js도 자바스크립트 엔진을 내장하고 있다.
하지만 브라우저와 Node.js의 자바스크립트에는 조금 차이가 있다.
| 브라우저 | Node.js | |
|---|---|---|
| 렌더링이 주된 목적 | 브라우저 이외의 환경에서 자바스크립트 사용 가능 | |
| DOM API 제공 | DOM API 제공하지 않음 | |
| 파일시스템 제공하지 않음 | 파일시스템 제공 | |
| Client-side API | Node.js Host API | |
| ECMAScript | ECMAScript |
Client-side API
API는 사이트가 실행되고 있는 브라우저와 운영 체제의 다양한 부분 그리고 웹 사이트 혹은 서비스의 데이터를 다룰 수 있는 인터페이스이다.
Client-side API는 기능들을 미리 구현한 DOM, BOM, Canvas, XMLHttpRequest, fetchm requestAnimation Frame, SVG, Web Storage, Web Component, Web Worker
2. 웹 브라우저
- 개발자 도구
- 단축키
| 운영체제 | 단축키 |
|---|---|
| 윈도우 | F12 / Ctrl + Shift + I |
| macOS | command + option + I |
- 기능
| 패널 | 설명 |
|---|---|
| Elements | 웹페이지의 DOM, CSS를 볼 수 있고 수정도 가능하다.(저장은 되지 않음) |
| Console | 에러를 확인, 자바스크립트의 console.log()를 확인 |
| Source | 웹페이지의 자바스크립트 코드 디버깅 |
| Network | 네트워크 request 정보와 성능 확인 |
| Application | 웹스토리지, 세션, 쿠키 확인 및 관리 |
- 콘솔
콘솔창에 에러가 출력된다. 또한 디버깅하는 것보다 쉽게 결과를 확인할 수 있다.
- 디버깅
Source 패널로 이동 → 에러가 발생한 위치에 빨간 밑줄이 표시됨(에러내용이 간략하게 표시됨) → 에러가 발생한 부분 수정
3. Node.js
프로젝트 규모가 커짐에 따라 React, Angular, Vue.js, Lodash 프레임워크, 라이브러리 도입 필요 → Node.js, npm 필요
2009년 아이언 달이 발표한 Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
Node.js
브라우저 이외의 환경에서의 자바스크립트 실행환경 제공
npm
자바스크립트 패키지 매니저
Node.js에서 사용할 수 있는 모듈들을 패키지화, 패키지 설치 및 관리
4. 자바스크립트 동작원리(추가)
간단하게만 설명하자면 변수 등을 저장하는 메모리 힙이 존재하고 자바스크립트 엔진의 스택은 필요한 변수 등이 있으면 메모리 힙을 참조해 한번에 하나의 명령을 수행한다.
자바스크립트 엔진의 스레드는 하나라고 하는데 웹페이지를 보면 여러 작업들이 동시에 진행이 되는걸 볼 수 있다.
이는 이벤트루프를 통해 일종의 대기실인 콜백큐에서 기다렸다가 자바스크립트 엔진의 스텍이 비어있으면 이벤트루프가 콜백큐의 작업을 하나씩 꺼내 실행이 되도록 스텍에 넣어준다.
이번엔 간략하게 요약했지만 다음번에 이 주제로 공부하고 포스팅해야겠다!
이웅모 선생님의 모던 자바스크립트 Deep Dive를 공부하기 위해 정리한 글입니다.
혹시나 보시다가 고칠 부분이나 마음에 안드시는 부분이 있다면 말씀해주시면 감사하겠습니다!