[모던자바스크립트 Deep Dive] 1~3장

 

---

1장 - 프로그래밍

1.1 프로그래밍이란?

📌 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션

 

- 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업

- 프로그래밍 언어를 사용해 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션

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

 

1.2 프로그래밍 언어

📌 컴퓨터와의 대화(명령)에 사용되는 일종의 표현 수단으로, 사람과 컴퓨터(컴파일러 혹은 인터프리터) 모두가 이해할 수 있는 약속된 형태의 인공어
📌 프로그래밍언어는 구문(syntax)과 의미(semantics)의 조합으로 표현된다.

# 컴파일러 / 인터프리터 - 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기

 

1.3 구문과 의미

📌 문법을 잘 안다고 해서 외국어를 잘한다고 말할 수는 없다.
📌 문법에 맞는 문장을 구성하는 것은 물론 의미를 가지고 있어야 언어의 역할을 충실히 수행할 수 있다.

const number = 'string';
console.log(number * number); // NaN
      
// 자바스크립트의 변수에는 어떠한 타입의 값도 할당할 수 있다.
// 따라서 위 예제는 문법적으로 전혀 문제가 없다. 하지만 의미적으로는 옳지 않다.

 

---

2장 - 자바스크립트란?

2.1 자바스크립트의 탄생

📌 1995년, 약 90% 시장 점유율로 웹 브라우저 시장을 지배하던 넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍언어를 도입 -> 브렌던 아이크가 개발한 자바스크립트
📌 초기 이름 : 모카 -> 라이브스크립트 -> 자바스크립트

 

2.2 자바스크립트의 표준화

📌 1996년, 마이크로소프트가 자바스크립트 파생 버전인 "JScript"를 인터넷 익스플로러에 탑재
📌 넷스케이프 커뮤니케이션즈와 마이크로스프트는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하기 시작 -> 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생
📌 1997년, 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성 대두 -> ECMAScript 의 탄생

 

2.3 자바스크립트 성장의 역사

📌 초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용
📌 대부분의 로직은 웹서버에서 실행되었고, 브라우저는 서버에서 전달받은 HTML, CSS를 단순히 렌더링하는 수준

Ajax(Asynchronous JavaScript and XML)
💁🏻 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능

- 이전의 웹페이지는 완전한 HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다. 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링 했다. 이러한 방식은 변경할 필요가 없는 부분까지 포함된 코드를 전송받기 때문에 불필요한 데이터 통신이 발생하고 처음부터 렌더링하기 때문에 성능면에서도 불리하다.
- Ajax의 등장으로 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이 가능해졌다. 이로써 웹 브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환이 가능해졌다.

JQuery
💁🏻 웹 개발을 단순화하고 효율적으로 만들어주는 자바스크립트 라이브러리

- 크로스 브라우징 이슈와 복잡한 자바스크립트 코드를 간단하게 작성할 수 있게 도와준다.

V8 자바스크립트 엔진
💁🏻 구글이 개발한 오픈 소스 자바스크립트 엔진으로, 구글 크롬 웹 브라우저와 Node.js 런타임 환경에서 사용

- JavaScript로 웹 애플리케이션을 구축하려는 시도의 증가와 함께 더욱 빠르게 동작하는 자바스크립트 엔진의 필요성이 대두
- V8 자바스크립트 엔진의 등장으로 웹 서버에서 수행되던 로직들이 클라이언트(브라우저)로 이동하게 되었고 웹 애플리케이션 개발에서 프론트엔드 영역이 주목받는 계기가 되었다.

Node.js
💁🏻 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
💁🏻 브라우저 환경에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 독립시킨 자바스크립트 실행 환경

- Node.js의 등장으로 자바스크립트는 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 프로그래밍 언어가 되었다.
- 서버 사이드 애플리케이션 개발에 주로 사용되며, 프론트엔드와 백엔드 영역에서 자바스크립트를 사용할 수 있다는 장점

SPA(Single Page Application)
💁🏻 웹 애플리케이션을 이용할 때 페이지 전체를 새로 고침하지 않고, 필요한 부분만 동적으로 업데이트하는 웹 애플리케이션

- 더 빠르고 부드러운 사용자 경험을 제공하며. SPA를 개발하기 위해 다양한 프레임워크와 라이브러리가 존재
- 대표적인 SPA 프레임워크, 라이브러리에는 React, Angular, Vue.js 등이 있습니다.

 

2.4 자바스크립트와 ECMAScript

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

 

2.5 자바스크립트의 특징

📌 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
📌 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어
📌 모던 자바스크립트 엔진은 컴파일러와 비교했을 때 비교적 느린 단점을 극복, 현재는 컴파일러와 인터프리터의 기술적 구분이 점차 모호해져 가는 추세

---

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

3.1 자바스크립트 실행 환경

📌 모든 웹브라우저와 Node.js 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다.
📌 두 실행 환경은 자바스크립트 코어인 ECMAScript를 실행할 수 있지만, 그 이외에 추가로 제공하는 기능은 호환되지 않는다.

### 제공하는 API ###
웹 브라우저 - DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnmation, Frame, SVG, Web Storage 등
Node.js - 파일시스템, Node.js 고유의 API 등

브라우저와 Node.js 환경

 

❓ 왜 웹브라우저와 Node.js에서 제공하는 API가 다른 것일까?

- 웹 브라우저에서는 보안상의 이유로, 파일 시스템을 제공하지 않는다. 만약 브라우저를 통해 다운로드되어 실행되는 자바스크립트가 사용자 컴퓨터의 로컬 파일을 삭제하거나 수정 생성할 수 있다면 이는 사용자의 컴퓨터가 악성 코드에 노출되는 것이기 때문.
- Node.js에서는 브라우저 외부에서 자바스크립트 개발환경을 제공하는 것이 주 목적이기 때문에, HTML 요소를 파싱해서 객체화한 DOM을 직접 다룰 필요가 없기 때문에 DOM API같은 기능을 제공하지 않는 것이다. (필요시 cheerio 같은 라이브러리를 사용하기도 한다)

 

3.2 웹브라우저의 개발자도구

개발자 도구의 기능(윈도우 F12, macOS fn+F12)

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

 

3.3 Node.js

📌 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행환경
📌 npm(node package manager)은 자바스크립트 패키지 매니저로, Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공한다.

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

Node.js 설치

1. https://nodejs.org/en
 - 홈페이지 설치

2. HomeBrew
 - MacOS 패키지 관리자를 통해 설치

brew install node
node -v
npm -v​

3. NVM(node version manager)
 - node 버전관리를 위해 추천 

brew install nvm

nvm list available

nvm install v20.16.0​

설치가 완료되면 터미널 혹은 명령프롬프트에서 자바스크립트 코드를 실행해 결과를 확인해볼 수 있다.