728x90
1. 자바스크립트 실행 환경
- 브라우저 : HTML,CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링. 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합인 DOM API를 기본으로 제공, 보안상 파일 시스템 제공하지 않음
- Node.js : 외부에서 자바스크립트를 실행할 환경을 제공하는 것이 주 목적, 파일 생성하고 수정할 수 있는 파일 시스템 기본 제공
2. 웹 브라우저
- 구글 크롬 브라우저 사용 (점유율 65.47%)
- 크롬 개발자 도구의 기능
- Elements : 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰 확인
- Console : 로딩된 웹페이지의 에러 확인. console.log 메서드의 실행 결과 확인
- Sources : 로딩된 웹페이지의 자바스크립트 코드를 디버깅
- Network : 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능 확인
- Appication : 웹 스토리지, 세션, 쿠키를 확인하고 관리
3. Node.js
- 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로 개발 가능하지만 큰 규모의 프로젝트는 React, Angular, Loadash 같은 프레임워크 또는 라이브러리를 도입. Node.js와 npm이 필요
- Node.js와 npm
- 2009년 라이언 달이 발표. 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경. 브라우저 이외 환경에서 자바스크립트 동작시킬 수 있음
- npm : 자바스크립트 패키지 매니저. Node.js 에서 사용할 수 있는 모듈들을 패키지화해 모아둔 저장소. 패키지 설치 및 관리 CLI (Command line interface)제공
- Node.js REPL
- REPL(Read Eval Print Loop) 사용해 간단한 자바스크립트 실행 가능. 파일도 실행 가능
- ctrl + C 두 번 입력 시 종료 됨
- Visual Studio Code
- Ctrl + `로 터미널 실행
- Code Runner 확장 플러그인
- 단축키를 통해 현재 표시 중인 자바스크립트 실행
- 윈도우 : Ctrl + Alt + N
- 맥: control + option + N
- alert()와 같은 Web API 가 포함된 소스코드는 브라우저 환경에서 실행해야 함 (브라우저에서만 동작하는 클라이언트 사이드 함수)
- Liver Server 확장 플러그인
- 소스코드를 수정할 때마다 수정 사항을 브라우저에 자동 반영
- Node.js와 npm
참고 : 모던 자바스크립트 Deep Dive
728x90
'TIL > JavaScript' 카테고리의 다른 글
[딥다이브] 6장 데이터 타입 (0) | 2022.04.20 |
---|---|
[딥다이브] 5장 표현식과 문 (0) | 2022.04.20 |
[딥다이브] 4장 변수 (0) | 2022.04.20 |
[딥다이브] 2장 자바스크립트란? (0) | 2022.04.17 |
[딥다이브] 1장 프로그래밍 (0) | 2022.04.17 |