[JavaScript] 자바스크립트 개발 환경

자바스크립트 실행 환경

모든 브라우저와 Node.js는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있습니다.

종류	목적
브라우저	HTML, CSS, JS를 실행해 웹페이지를 브라우저 화면에 렌더링 하는것
Node.js	브라우저 외부에서 JS 실행환경을 제공하는 것

따라서 자바스크립트의 코어인 ECMAScript 이외에 추가로 제공하는 기능들은 서로 호환되지 않습니다.

예를 들어 브라우저는 *DOM API를 기본적으로 제공하고, Node.js는 *파일 시스템을 기본 제공하지만 이는 서로 호환되지 않습니다. 이처럼 브라우저는 클라이언트 사이드 Web API를 지원하고, Node.js는 고유의 API를 지원합니다.

 

*DOM API : 파싱된 HTML 요소를 선택하거나 조작하는 기능으로 Node.js의 서버환경은 DOM API를 제공하지 않기 때문에 웹 크롤링을 위해 cheerio 같은 DOM 라이브러리를 사용

 

*파일 시스템 : 파일을 생성하고 수정할 수 있는 기능으로 브라우저는 파일을 읽기 위해 Web API인 FileReader를 사용

 

웹 브라우저

다양한 웹 브라우저가 있지만, 구글 크롬 브라우저가 65.47%로 가장 높은 점유율을 가지고 있습니다. 따라서 구글 크롬 브라우저의 기능들에 대해 알아보겠습니다.

 

개발자 도구

웹 애플리케이션 개발에 필수적인 강력한 도구로, 브라우저에 기본 내장되어 있습니다.

개발자 도구를 여는 법

패널	설명
Elements	로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인 가능
Console	로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log()의 실행결과를 확인 가능
Sources	로딩된 웹페이지의 자바스크립트 코드를 디버깅 가능
Network	로딩된 웹페이지에 관련된 네트워크 요청정보와 성능을 확인 가능
Application	웹 스토리지, *세션, *쿠키를 확인하고 관리할 수 있음

*세션, *쿠키 에 대한 내용을 알아보고 싶다면 아래의 링크를 확인하세요.

https://j-su2.tistory.com/42?category=1016208 

[네트워크] 쿠키(Cookie), 세션(Session)이란?

 

콘솔

개발자 도구의 Console 패널은 자바스크립트 코드에서 에러가 발생했을때 가장 우선적으로 살펴봐야 합니다.

따라서 구현 단계에서는 콘솔을 열어둔 상태로 개발하여 에러가 발생했는지 확인하며 개발하는것이 좋습니다.

또한 구현 단계에서 디버깅을 실행하지 않고도 간편하게 코드의 실행 결과를 확인하며 개발하는 것이 가능하며, 브라우저는 HTML 파일을 업로드 하면 script태그에 포함된 자바스크립트 코드를 실행하기 때문에 코드에 포함된 console.log()의 결과를 Console패널에 출력해줍니다.

 

Node.js

프로젝트의 규모가 커짐에 따라 React, Angular, Lodash 같은 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint 등 여러 가지 도구를 활용하기 위해 Node.js 와 *npm을 사용합니다.

 

Node.js 설치 링크 : https://nodejs.org/en/

Node.js

 

*npm : 자바스크립트의 패키지 매니저. Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공

 

Node.js REPL(Read Eval Print Loop)

간단한 자바스크립트 코드를 실행해 결과를 확인해 볼 수 있습니다.

REPL

하지만 애플리케이션을 개발하는 단계에서는 주로 VS Code라는 코드 에디터를 사용하게 됩니다. 에디터를 이용하게 되면 코드 자동 완성, 문법 오류 감지, 디버깅, Git 연동 등 편리한 기능들을 활용 가능합니다. 

 

VS Code 설치 링크 : https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

[출처] 모던 자바스크립트 Deep Dive

https://wikibook.co.kr/mjs/

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리