제로베이스 네카라쿠배 온라인스쿨 1기 과정(2021. 11 ~ 2021. 12)에서 공부했던 Javascript Deepdive 교재의 내용 요약 및 필자의 생각을 정리한 내용입니다. 원서의 내용 챕터의 일부를 요약한 내용으로 보다 자세한 내용은 원서를 참조 바랍니다.
3.1 자바스크립트 실행 환경
- 모든 브라우저는 자바스크립트 엔진을 내장하고 있고, Node.js도 자바스크립트 엔진을 내장하고 있다. 즉, 브라우저 환경, Node.js 환경에서 자바스크립트를 실행할 수 있다.
- 한 가지 주의할 점은 브라우저와 Node.js의 용도가 다르다는 것이다. 브라우저는 HTML,CSS,자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주 목적이지만, Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주 목적이다.
- 따라서 브라우저와 Node.js에서 ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다.
- 가령 Node.js에서는 DOM API를 지원하지 않고, 브라우저는 파일 시스템을 지원하지 않는다.
3.2 웹 브라우저
- 크롬은 ECMAScript 사양을 준수하며 시장 점유율도 가장 높다.
3.2.1 개발자 도구
- 크롬 브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 강력한 도구로, 브라우저에 기본 내장되어 있으며 다음 단축키로 실행할 수 있다.
- 윈도우 : F12 또는 Ctrl + Shift + I
- macOS : command + option + I
- 자주 사용되는 개발자 도구 기능은 다음과 같다.
- Elements : 로딩된 웹페이지 DOM,CSS를 편집하여 렌더링된 뷰 확인 가능
- Console: 웹페이지 에러 혹은 console.log 메서드의 실행 결과 확인 가능
- Sources : 로딩된 웹페이지 자바스크립트 코드를 디버깅할 수 있음
- Network : 로딩된 웹페이지에 관련된 네트워크의 요청 정보와 성능을 확인가능
- Application: 웹 스토리지, 세션, 쿠기 확인하고 관리 가능
3.2.2 콘솔
- 개발자 도구의 Console 패널(이하 콘솔)은 자바스크립트 코드에서 에러가 발생해 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳이다.
- console.log 메서드를 사용해하면 코드의 결괏값을 콘솔에 출력한다.
3.2.3 브라우저에서 자바스크립트 실행
- 책의 예제 코드 참조
3.2.4 디버깅
- 책 내용 참조 (실습)
3.3 Node.js
3.3.1 Node.js 및 NPM 소개
- Node.js는 크롬 v8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.
- npm(node package manager)은 자바스크립트 패키지 매니저다. Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공한다. 자신이 작성한 패키지를 공개할 수도 있고, 필요한 패키지를 검색해 재사용할 수도 있다.
3.3.2 Node.js 설치
- http://nodejs.org에 접속
- LTS : 장기적으로 안정된 지원 보장, Current : 최신 기능 제공하지만 안정적이지 않을 수 있음
3.3.3 Node.js REPL
- REPL(Read Eval Print Loop)를 사용해 간단한 자바스크립트 코드를 실행해 결과를 확인해볼 수 있음
$ node- 자바스크립트 파일 실행시 node 명령어 뒤에 파일 이름 입력 (확장자 생략 가능)
$ node index.js- Ctrl + C 두번 입력하면 종료
3.4 비주얼 스튜디오 코드
3.4.1 비주얼 스튜디오 코드 설치
- 책 실습 참조
3.4.2 내장 터미널
- 책 실습 참조
3.4.3. Code Runner 확장 플러그인
- 마켓 플레이스에서 Code Runner 플러그인 검색 후, 설치
- 다음 단축키로 실행
- 윈도우 : Ctrl + Alt + N
- macOS : control + option + N
3.4.4 Live Server 확장 플러그인
- 마켓 플레이스에서 Live Server 플러그인 검색
- VS Code 하단의 Go live 버튼으로 실행