2. javascript 개발 환경

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

browser뿐만 아니라 서버사이드인 Node.js도 자바스크립트 엔진을 내장하고 있다.

기본적으로 브라우저에서 동작하는 코드는 Node.js에서도 동작한다.

 

그러나 두개의 목적이 달라 브라우저와 node.js 모두 자바스크립트 코어인 EcmaScript를 실행 할 수 있지만

브라우저와 Node.js에서 ECMAScript 이외에 추가적으로 제공하는 기능은 호환되지 않는다.

ex >

브라우저는 HTML요소를 선택하거나 조작하는 기능들의 집합인 DOM API를 기본적으로 제공

Node.js는 Web API인 DOM API를 제공하지 않는다.

반대로 Node.js에서는 파일을 생성하고 수정하는 File시스템을 기본 제공하지만 브라우저는 지원하지 않는다.

( ec > Web API-File API - FileReader객체를 사용해 사용자가 지정한 파일을 읽어 들이는 것은 가능하다 -보안상 금지)

 

개발자 도구

크롬 브라우저에서 command + option + I를 입력하면 devtool이ㅣ 오픈된다

devtool을 오픈하면 console패널이 보인다.

console패널은 자바스크립트 코드에서 에러가 발생하여 앱이 제대로 동작하지 않을 경우 가장 우선 봐야 할 곳

또한 프로그래밍 과정에서 디버깅 대신 console.log함수를 사용하여 코드 실행 결과를 console창으로 확인 할 수 있다.

또한 console패널에서 직접 바로 코드입력하고 출력을 확인할 수 있는 REPL(Read Eval Print Loop)환경으로 사용할 수 있다.

 

여러 줄 코드 실행시 쉬프트 + 엔터로 줄바꿈 할 수 있다.

 

또 작성된 HTML에 포함된 자바스크립트를 브라우저에서 실행하는 방법이 있다.

자바스크립트가 포함된 HTML을 브라우저에 로드하고 consolog함수를 통해 콘솔에 실행 결과가 출력된다

에러가 표시된다면 에러가 발생한 위체에 빨간 밑줄이 표시되고 마우스를 올리면 에러 정보가 표기된다.

콘솔차에서 에러가 뜬곳에 브레이크포인트를 걸고 다시 실행하면 디버깅 모드로 들어가게 된다.

브라우저에서 바로 디버깅 하고 에러를 잡아 낼 수 있는 편리함이 있다.

 

Node.js

웹 브라우저에서 동작하는 간단한 웹애플리케이션은 브라우저 만으로도 개발 할 수 있다.

그러나 규모가 커짐에 따라 React, jQuery, Angular같은 외부 라이브러리를 도입하거나 Bable, Webpack, ESlint등 여러가지 

도구를 사용해야 할 때 Node.js와 Npm이 필요하다.

 

Node.js - 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작 시킬 수 있는 자바스크립트 실행 환경

주로 서버사이드 앱 개발에 사용되며 이에 필요한 모듈, 파일 시스템, HTTP등 빌트인 API를 제공한다.

데이터를 실시간 처리하여 빈번한 입출력이 발생하는 single page application에 적합.

백엔드 영역의 서버 앱뿐아니라 프런트 엔드 영역의 다양한 도구나 라이브러리도 동작한다.

 

npm(node package manager)

자바스크립트 패키지 매니저이다.

Node.js에서 사용할 수 있는 모듈들을 패키지화 하여 모아둔 저장소 역할 및 패키지 설치 관리를 위한 

Command Line Interface를 제공한다.

자신이 작성한 패키지를 공개도 할 수 있고 필요한 패키지를 검색하여 재사용 할 수 있다.

 

ide는 vscode를 사용해서 공부를 시작한다~