JavaScript | 자바스크립트 개발 환경과 실행 방법

자바스크립트 실행 환경

• 모든 브라우저와 Node.js는 JavaScript를 해석하고 실행할 수 있는 JavaScript 엔진을 내장하고 있음
• 이 둘은 코드가 동일하게 동작하지만, 용도가 다름
• ⇒ 브라우저와 Node.js는 자바스크립트의 코어인 ECMAScript를 실행할 수 있지만, ECMAScript 이외에 추가로 제공하는 기능은 호환하지 않음

브라우저

• 주 목적: HTML, CSS, JavaScript를 시행해 웹페이지를 브라우저 화면에 렌더링하는 것
• ECMAScript와 DOM API 등의 클라이언트 사이드 Web API를 기본적으로 제공

Node.js

• 주 목적: 브라우저 외부에서 JavaScript 실행 환경을 제공하는 것
• ECMAScript와 파일 시스템 등의 고유 API를 기본적으로 제공

 

웹 브라우저

• 구글 크롬 브라우저의 V8 자바스크립트 엔진 - Node.js에서도 사용 중

개발자 도구

• 브라우저에 기본 내장되어 있음
• 웹 개발에 유용한 다양한 기능 제공

패널	설명
Element	로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있음 편집된 내용이 저장되지는 않음 웹페이지가 의도된 대로 렌더링 되지 않았을 때 힌트를 얻을 수 있음
Console	로딩된 웹페이지의 에러 확인 JavaScript 소스 코드에 작성한 console.log 메서드의 실행 결과 확인
Sources	로딩된 웹페이지의 JavaScript 코드를 디버깅할 수 있음
Network	로딩된 웹페이지에 관련된 네트워크 요청(request) 정보와 성능을 확인할 수 있음
Application	웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있음

콘솔

• 에러 확인
• console.log( … ) 사용 - 소괄호 안의 코드를 평가해서 그 결과를 콘솔에 출력하는 메서드
• REPL(Read Eval Print Loop) 환경으로 사용

브라우저에서 자바스크립트 실행

• 브라우저는 HTML 파일을 로드하면 script 태그에 포함된 JavaScript 코드를 실행
• 개발자 도구의 콘솔을 열어두면 에러 발생한 것을 알아차리기 쉬움

디버깅

• 에러 메세지 확인 → 에러가 발생한 원인을 제거
• 에러가 발생한 코드 왼쪽 라인 번호를 클릭해 break point(중단점)를 걸고 다시 해당 코드 부분을 실행하면 디버깅 모드로 들어감

 

Node.js

• 클라이언트 사이드(브라우저)에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있음
• 하지만 프로젝트 규모가 커지면 프레임워크, 라이브러리, 여러가지 도구를 사용할 필요가 있음 → Node.js와 npm 필요

Node.js와 npm 소개

• Node.js
  • 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
  • 브라우저에서만 동작하던 JavaScript를 브라우저 이외의 환경에서 동작시킬 수 있는 JavaScript 실행 환경
• npm(node package manager)
  • 자바스크립트 패키지 매니저
  • Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할
  • 패키지 설치 및 관리를 위한 CLI(Commend line interface)를 제공

Node.js 설치

Node.js

• LTS(Long Term Support): 장기적으로 안정된 버전
• 설치하고 터미널(윈도우는 명령 프롬프트)에서 node -v, npm -v으로 버전을 출력해 정상적으로 설치됐는지 확인

Node.js REPL

• Node.js가 제공하는 REPL(Read Eval Print Loop)을 사용하면 간단한 JavaScript 코드를 실행해 결과를 확인해 볼 수 있음
• 터미널에서 node 명령어를 실행하면 프롬프트가 >로 변경되면서 JavaScript 코드를 실행해 볼 수 있음
• node 파일명.js : JavaScript 파일 실행, 파일 확장자 .js는 생략 가능

 

비주얼 스튜디오 코드

비주얼 스튜디오 코드 설치

Visual Studio Code - Code Editing. Redefined

• 코드 에디터를 사용하면 편리한 기능 활용 가능

내장 터미널

• VS Code에는 터미널이 내장되어 있음

Code Runner 확장 플러그인

• VS Code에서는 확장 플러그인 저장소인 마켓플레이스를 통해 다양한 확장 플러그인을 다운로드할 수 있음
• Code Runner 확장 플러그인에서는 Ctrl + Alt + N 단축키를 사용해 현재 표시중인 js 파일 실행할 수 있음(윈도우 기준)
• alert 함수는 브라우저에서만 동작하는 클라이언트 사이드 Web API여서 브라우저 환경에서 실행해야 함

Live Server 확장 플러그인

• 가상 서버 기동
• 소스코드 수정할 때마다 수정 사항을 브라우저에 자동으로 반영

 

참고

모던 자바스크립트 deep dive 책