[모던 자바스크립트 Deep Dive] 1~3. 자바스크립트란?

모던 자바스크립트 Deep Dive

01~03장 내용 정리

 

회사에서 사용하는 javascript를 좀 더 깊게 공부하기 위해 기초부터 한번 훝으려고 한다.

 

 

---

 

01장. 프로그래밍

프로그래밍 : 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션

프로그래밍에 앞서 해결해야 할 문제(요구사항)를 명확히 이해한 후 적절한 문제 해결 방안을 정의할 필요가 있음 -> 문제 해결 능력 필요

 

Computational thinking(컴퓨팅 사고)

컴퓨터의 관점에서 문제를 사고해야하며 논리적, 수학적 사고가 필요하고, 해결 과제를 작은 단위로 분해하고 패턴화해서 추출하며, 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야 함

 

기계어(컴퓨터가 알아듣는 언어)는 사람이 사용하는 언어와 체계가 다르기 때문에 직접 명령을 전달하는 것은 매우 어려워서 컴파일러 혹은 인터프리터를 사용해서 컴퓨터와 대화함(프로그래밍 언어 -> 기계어 변환)

이러한 프로그래밍 언어는 구문과 의미의 조합으로 표현됨

 

문법을 잘 안다고 해서 외국어를 잘한다고 말할 수 없듯이, 프로그래밍도 마찬가지로 문법에 맞는 문장을 구성하는 것은 물론 의미 를 가지고 있어야 언어의 역할을 충실히 수행할 수 있음

const number = 'string';
console.log(number * number);

/* 위 문장은 문법적으로 전혀 문제가 없지만 의미적으로는 옳지 않음
number라는 이름의 변수에는 숫자를 할당하는 것이 의미적으로 옳음 */

 

 

프로그래밍 언어의 문법에 부합하는 것은 물론이고 수행하고자 하는 바를 정확히 수행하는 것, 즉 요구사항이 실현(문제가 해결)되어야 의미가 있음

 

결국 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것임

 

 

---

02장. 자바스크립트란?

자바스크립트 : HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어

 

인터프리터 언어이며 대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결

 

 

[자바스크립트의 역사]

• 초창기 자바스크립트 : 웹의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용함

Ajax

• 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능

jQuery

• jQuery의 등장으로 DOM(Document Object Model)을 더욱 쉽게 제어하고, 크로스 브라우징 이슈도 해결
• V8 자바스크립트 엔진
• JS로 웹 애플리케이션을 구축하려는 시도의 증가와 함께 더욱 빠르게 동작하는 자바스크립트 엔진의 필요성이 대두됨 -> V8 자바스크립트 엔진의 등장
• 이로 인해 웹 서버에서 수행되던 로직들이 클라이언트(브라우저)로 이동하게 됨.

Node.js

• 자바스크립트 런타임 환경으로 자바스크립트를 브라우저 이외의 환경에서 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경임
• 주로 서버사이드 애플리케이션 개발에 주로 사용되고, 이에 필요한 모듈 파일 시스템, HTTP 등 내장 API를 제공
• 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작하여 요청 처리 성능이 좋음(SPA에 적합)
• 이제 자바스크립트는 프론트뿐만이 아닌, 백엔드 영역가지 아우르는 웹 프로그래밍 언어의 표준으로 자리 잡음으로써 크로스 플랫폼을 위한 가장 중요한 언어로 주목 받고 있음

SPA 프레임워크

• 이전의 개발 방식으로는 복잡해진 개발 과정을 수행하기 어려워져 이에 따라 많은 패턴과 라이브러리가 출현하였는데 이것만으론 부족하여 프레임워크가 등장하게 됨
• CBD(Component based development)방법론을 기반으로 한 SPA가 대중화 되면서 Angular, React, Vue.js, Svelte등 다양한 SPA 프레임워크/라이브러리가 등장함

 

자바스크립트와 ECMAScript

• ECMAScript는 프로그래밍 언어의 핵심 문법을 규정함. 각 브라우저 제조사는 이 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현함
• 자바스크립트는 일반적으로 프로그래밍 언어이면서도 클라이언트 사이드 Web API인 DOM, BOM, XMLHttpRequest, fetch등을 아우르는 개념이다.
• 클라이언트 사이드 Web API는 월드 와이드 웹 콘소시엄(W3C)에서 별도의 사양으로 관리하고 있다.

 

JS는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어 이면서 다른 객체지향 언어와의 차이점이 있긴 하지만 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어임

 

 

---

03장.  자바스크립트 개발 환경과 실행 방법

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

하지만 브라우저와 Node.js의 용도가 다르기 때문에 이에따라 지원하는 API들이 다름

브라우저와 Node.js 환경

 

웹 브라우저 : 구글 크롬(Chrome) 브라우저 등

 

개발자도구

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

 

※ 단축키
윈도우 : F12 or Ctrl + Shift + I
macOS : command ⌘ + option ⌥ + I

 

 

[Node.js]

프로젝트 규모가 커짐에 따라 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint등 여러가지 도구를 사용하기 위해 Node.js와 npm이 필요함

 

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

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

 

Node.js 설치경로 : https://nodejs.org/en

※ Download
LTS: 안정성, Current: 최신

 

 

Node.js REPL

REPL(Read Eval Print Loop)을 사용하여 JS코드를 실행해 결과를 확인해 볼 수 있음

실행방법: 터미널(명령 프롬프트)

$ node

# 위 명령어를 입력하면 프롬포트가 > 로 변경되면 자바스크립트 코드 실행이 가능

 

$ node index.js

# 자바스크립트 파일 실행 : node 명령어 뒤에 파일이름 입력(확장자 .js 생략가능)

 

 

비주얼 스튜디오 코드(VS Code)

• 내장 터미널 : Ctrl + `
• 확장 플러그인
  
  • Code Runner : 현재 표시 중인 자바스크립트 파일 실행 (Ctrl + Alt + N (control + option + N))
  • Live Server : 브라우저 실행 환경 제공