Ch 1. 자바스크립트, Ch 2. 개발 환경 구성

자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다.

 - 주로 웹 브라우저 내에서 사용

 - Node.js를 사용해서 서버 프로그래밍, 데스크탑, 임베디드, 키오스크 등에도 사용

 

1.1 ECMA Script 란

자바스크립트는 프로그래밍 언어이고, ECMA Script는 스크립트 표준을 의미한다. (ES: ECMA Script의 약자)

 

1.2 바닐라 JS

어떠한 라이브러리나 프레임워크를 쓰지 않는 순수 자바스크립트를 바닐라 JS라고 부른다. React, Vue, Svelte 같은 프론트엔드 프레임워크도 결국 바닐라 자바스크립트로 구현을 한 것이다. 따라서 바닐라 자바스크립트를 제대로 이해한다면, 이런 프레임워크를 더 빨리 이해할 수 있고, 제대로 사용할 수 있다.

 

 

2.1 Visual Studio Code 설치

Visual Studio Code는 마이크로소프트에서 제공하는 개발 IDE이다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

2.2 Node.js 설치

Node.js는 확장성 있는 네트워크 애플리케이션, 즉 서버 프로그램 개발을 자바스크립트로 가능하도록 하는 자바스크립트 런타임 환경이다.

원래 자바스크립트는 클라이언트 즉 브라우저에서 동작하는 언어이다. Node.js는 크롬의 V8 엔진을 이용하여 브라우저에서 자바스크립트가 동작하듯이 서버에서 자바스크립트를 동작할 수 있도록 해주는 환경이다.

자바스크립트로 클라이언트 프로그램을 개발하기 위해서 수많은 라이브러리가 필요하며, 이를 빠르게 설치하고 적용하기 위해서 Node.js가 설치되어야 한다.

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

설치가 완료되면 앞서 설치한 비주얼 스튜디오 코드를 실행한다.

터미널 창을 열기 위해 상단 메뉴에서 View > Terminal 선택하여 다음 명령어를 입력한다.

node -v , npm -v를 통해 노드 버전과 npm 버전 확인

 

2.3 유용한 vs code Extension 설치

1) JavaScript (ES6) code snippets

ES6를 포함한 자바스크립트 코드 자동완성 지원

 

2) ESLint

ESLint는 ES와 Lint를 합친 말이다. 자바스크립트 문법의 오류를 찾아주는 확장 프로그램

 

3) Prettier - Code formatter

코드를 미리 지정한 코드 포맷 스타일로 자동 변경해주는 확장 프로그램

 

4) Live Server

로컬에서 HTML 파일을 바로 웹 서버에서 실행할 수 있도록 해주는 확장 프로그램

---

참고문헌 : 고승원(2021), 바닐라 자바스크립트, 비제이퍼블릭