자바스크립트로 개발하기 위해 환경을 구축해두어야한다. 지금부터 간단하게 살펴보도록 하자!
🛠 3.1 자바스크립트 실행 환경
모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. Node.js도 브라우저와 동일하게 동작한다. 다만 Node.js는 ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다. 브라우저는 HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링 하는 것이 주 목적이지만, Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주 목적이기 때문이다.
브라우저는 클라이언트 사이드 Web API를 지원한다. Node.js는 ECMAScript와 Node.js 고유의 API를 지원한다. 이를 기반으로 자바스크립트 개발 환경을 구축하고 자바스크립트를 실행하는 방법을 확인한다. 브라우저 환경, Node.js 환경에서 실행하는 방법 등을 확인해보자!
- 웹크롤링 : 서버에서 웹사이트의 콘텐츠를 수집하기 위해 웹사이트에서 HTML 문서를 가져온 다음, 이를 가공해서 필요한 데이터만 추출하는 경우가 있다. 이를 웹 크롤링이라 한다. -> 브라우저는 파싱된 HTML 요소를 선택하거나 조작하는 기능을 제공해준다(DOM API).
🌐 3.2 웹 브라우저
✅ 3.2.1 개발자 도구
브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 도구이다. 단축키를 통해 열 수 있다.
- 윈도우 : F12 또는 Ctrl + Shift + I
- macOS : command ⌘ + option ⌥ + I
개발자 도구는 웹 개발에 유용하고 다양한 기능을 제공해준다.
- Elements : 로딩된 웹페이지의 DOM과 CSS를 편집하여 렌더링된 뷰를 확인해 볼 수 있다. 단, 편집한 내용이 저장되지는 않는다. 웹페이지가 의도된 대로 렌더링되지 않았다면 이 패널을 확인하여 힌트를 얻을 수 있다.
- Console : 로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log메서드의 실행 결과를 확인할 수 있다.
- Sources : 로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.
- Network : 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다.
- Application : 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.
✅ 3.2.2 콘솔
개발자 도구의 Console패널은 자바스크립트 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴야 하는 곳이다. 에러가 아니더라도 콘솔은 매우 유용한다. 구현 단계에서 디버깅을 실행하는 것보다 간편하게 코드의 실행결과를 확인하면서 개발을 진행하기 위해 콘솔을 사용하는 경우가 많다.
콘솔은 자바스크립트 코드를 입력해 그 결과를 확인할 수 있는 REPL(Read Eval Print Loop: 입력 수행 출력 반복) 환경으로 사용할 수도 있다. 여러줄을 입력하려면 Shift키를 누른상태에서 엔터를 치면 여러줄 입력이 가능하다.
✅ 3.2.3 브라우저에서 자바스크립트 실행
브라우저는 HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드를 실행한다. 만약 자바스크립트 코드 내에서 콘솔메서드(console.log())가 호출되었다면 콘솔에 실행결과가 출력될 것이다.
✅ 3.2.4 디버깅
개발자 도구에는 자바스크립트 코드를 디버깅할 수 있는 Sources 패널이 존재한다. 에러가 발생하면 그 위치에 빨간 밑줄이 표시되고, 그 위에 마우스를 올려보면 에러 정보가 표시된다. 해당 에러 정보를 통해 에러를 찾고 수정할 수 있다.
🎛 Node.js
클라이언트 사이드, 즉 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있다. 하지만 프로젝트의 규모가 커지면 React, Angular, Lodash와 같은 프레임워크나 라이브러리를 도입하고, Babel, Webpack, ESLint등의 도구를 사용하게 된다. 이때 Node.js와 npm이 필요하다.
🌱 3.3.1 Node.js & npm
2009년 발표한 Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다. 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이 Node.js이다.
npm(node package manager)은 자바스크립트 패키지 매니저이다. Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공한다.
🌱 3.3.2 Node.js 설치
Node.js의 웹사이트(http://nodejs.org)에 접속하여 설치할 수 있다.
LTS버전은 장기적으로 안정된 지원이 보장된다. 반변 Current버전은 최신 기능을 제공하지만 업데이트가 발생하는 버전으로 안정적이지 않을 수 있다. 실제 개발 환경이라면 LTS 버전을 설치하는 것이 좋다.
🌱 3.3.3 Node.js REPL
Node.js가 제공하는 REPL을 사용하면 간단한 자바스크립트 코드를 실행해 결과를 확인해 볼 수 있다. 프롬프트가 '>'로 변경되면 자바스크립트 코드를 실행해볼 수 있다. 터미널에서도 확인할 수 있다. Ctrl + C 키를 두 번 입력하면 Node.js가 종료된다.
- vs코드는 생략.. ㅎㅎ
