목표

• 1~3장의 내용을 최대한 이해하고 정리하기

1장 프로그래밍

1-1. 프로그래밍

• 0과 1만 이해하는 컴퓨터가 실행될 수 있도록 정확하고 상세하게 요구사항을 설명하는 작업을 말하며 그 결과물은 코드이다.
• 모호하고 대략적인 요구사항을 전달할 때, 요구사항의 의도를 파악하는 컴퓨터는 존재하지 않는다.
• 따라서, 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 바라봐야 한다. 이를 컴퓨팅 사고(Computational Thinking)라고 한다.
• 예를 들어, "듣다"라는 행위는 사람에게 있어서 크다, 작다로 표현되지만 컴퓨터는 어떤 기준으로 크고 작은지 기준이 모호하기 때문에 의도를 파악하지 못한다. 컴퓨터는 볼륨 크기 즉, 숫자로 표현된 것을 이해할 수 있다.

1-2. 프로그래밍 언어

• 이처럼 사람과 컴퓨터는 사고 방식과 인지 능력이 다르기 때문에 컴퓨터의 관점에서 문제를 사고해야 한다.
• 사람이 이해할 수 있는 자연어가 아닌 컴퓨터가 이해할 수 있는 언어인 기계어로 명령을 전달해야 한다.

7F 45 4C 46 01 01 01 00 00 00 2D 00 3A 00 00 00 00 00 00 02 03 35 40 00 2F 6C 00 00 B3 40
2C 00 00 00 00 00 00 00 43 00 20 00 00 00 00 00 00 01 00 00 00 30 B3 43 65 6C 00 00 00 00
B2 0C EB 6C 00 00 00 00 00 00 10 00 6F 20 00 00 00 34 00 00 00 65 6C 63 20 77 6F 43 02 00

• 하지만, 사람이 기계어를 이해해서 기계어로 직접 명령어를 전달하는 것은 매우 어렵고 비효율적이다.
• 따라서, 사람이 이해할 수 있는 약속된 구문으로 구성된 프로그래밍 언어를 이용해 프로그램을 작성한다.

🤔 의문

• 컴퓨터는 기계어만 이해할 수 있고 프로그래밍 언어를 이해할 수 없다. 그렇다면 우리는 어떻게 프로그래밍 언어를 이용해서 프로그램을 짤 수 있을까?

• 방법은 번역기를 사용하는 것인데 프로그래밍 언어를 기계어로 변환하는 일종의 변역기 역할을 하는 것이 바로 컴파일러(Compiler) 와 인터프리터(Interpreter)이다.
• 다음 코드와 같이 프로그래밍 언어를 사용하면 훨씬 이해하기 쉬워지고 무엇을 할 지 유추가 가능해진다.

console.log("hello world");

1-3 구문과 의미

• 프로그래밍 학습은 프로그래밍 언어의 문법을 배우는 것에서부터 시작한다.
• 프로그래밍 언어는 문법(Syntax)과 의미(Sementic)로 이루어져 있다.
• 다음 예를 보면,

const number = "three";
console.log(number * number);

• 자바스크립트의 변수에는 어떠한 값도 할당할 수 있기 때문에 위의 코드에서 문법 자체는 문제가 없다.
• 하지만, number라는 변수의 이름에 문자열이 들어가 있으므로 의미상 맞지 않다.
• 즉, 문법에 맞는 문장을 구성하고 그에 맞는 의미를 지니고 있어야 프로그래밍 언어의 역할을 충실히 수행하는 것이다.

[정리]

• 결국, 어떤 요구사항(이슈)이 주어지고 문제 해결 능력을 통해 만들어 낸 해결 방안은 프로그래밍 언어의 문법을 사용해 표현한다. 즉, 프로그래밍 언어로 작성된 코드가 해결 방안의 구현물이다.
• 이는 프로그래밍 언어가 문법에 부합하는 것은 물론 해결 방안을 정확히 수행하고자 하는 것 즉, 요구사항이 실현되어야 의미가 있다.

• 또한, 모든 프로그래밍 언어가 그렇듯이 변수에 값을 저장하고 참조하며 연산자를 통해 연산하고 조건문과 반복문을 통한 흐름제어, 함수를 통한 재사용성, 객체, 배열 등으로 자료를 구조화 하듯이 결국, 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것이다.

---

2장 자바스크립트

※ 자바스크립트의 탄생(2-1), 자바스크립트의 표준화(2-2)는 생략

2-3. 자바스크립트의 성장과 역사

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

2-3-1. AJAX

• 1999년, 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능인 AJAX(Asynchronous Javascript And XML)가 XMLHttpRequest라는 이름으로 등장했다.
• 이때 당시 화면이 전환되면 서버로부터 새로운 HTML을 전송 받아 웹 페이지 전체를 처음부터 다시 렌더링 했는데(흔히 말하는 새로 고침) 이는 변경할 필요가 없는 부분까지 다시 전송받기 때문에 불필요한 데이터 통신과 다시 렌더링을 해야 하는 성능 문제가 발생했다.
• 하지만, AJAX의 등장은 이러한 한계가 있던 웹 페이지의 패러다임을 한 번에 깼다. AJAX를 사용하면 서버에서 필요한 데이터만 전송받으며 변경해야 하는 부분만 한정적으로 렌더링 하는 방식이 가능해졌다.
• 2005년, 구글은 구글 맵스를 발표하면서 자바스크립트가 웹 애플리케이션 프로그래밍 언어로의 가능성을 확인하는 계기가 마련되기도 했다.

 

2-3-2. JQuery

• 2006년, JQuery가 등장하면서 번거롭고 논란이 있던 DOM(Document Object Model)을 더 쉽게 제어할 수 있게 되었다. 또한, 크로스 브라우징 이슈도 어느 정도 해결되었다.
• 이로 인해 JQuery 사용자가 늘어나고 까다로운 Javascript보다 JQuery를 선호하는 개발자가 양산되기도 했다.

 

2-3-3. V8 자바스크립트 엔진

• 구글이 구글 맵스를 통해 웹 애플리케이션 프로그래밍 언어로서의 가능성을 확인하면서 더욱 빠르게 동작하는 자바스크립트 엔진의 필요성이 대두되었다.
• 2008년 등장한 구글의 V8 자바스크립트 엔진은 이러한 요구에 부합하는 빠른 성능을 보여주면서 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자 경험(UX)을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 자리를 잡게되었다.
• V8 엔진으로 촉발된 자바스크립트는 더욱 발전하게 되어 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동했고 이는 웹 애플리케이션 개발에서 프론트 영역이 주목받는 계기가 되었다.

 

2-3-4. Node.js

• 2009년, 라이언 달이 발표한 Node.js는 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.
• 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 해주는 자바스크립트 실행 환경이다.
• 특징으로는 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋다.
• 따라서, 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합하다.(단, CPU 사용률이 높은 애플리케이션은 권장하지 않는다.)

 

• Node.js의 등장으로 자바스크립트는 브라우저를 벗어나 서버 사이드 애플리케이션에서도 사용할 수 있는 범용 프로그래밍 언어가 되었고 현재는 백엔드 뿐만 아니라 프론트 영역까지 아우르는 웹 프로그래밍의 표준으로 자리 잡았다.

2-3-5. SPA

• 모던 웹 애플리케이션은 손색없는 성능과 사용자 경험을 제공하는 것이 필수가 되었고 이에 따라 개발 규모와 복잡도가 상승했다.
• 이로 인해 많은 패턴과 라이브러리가 등장했는데 CBD(Component Based Development) 방법론을 기반으로 한 SPA(Single Page Application)가 대중화 되었다.
• React, Angular, Vue 등 다양한 SPA 프레임워크 및 라이브러리가 등장했다.

2-4. ECMAScript

• 자바스크립트의 표준 사양인 ECMA-262를 말하며, 프로그래밍의 언어의 값, 타입, 객체와 프로퍼티, 함수 등 핵심 문법을 규정한다. 한 마디로 자바스크립트는 ECMAScript의 명세(문법)을 따른다고 보면 된다.
• 각 브라우저는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현한다.

• 구체적으로 자바스크립트는 일반적인 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API(DOM, BOM, Canvas, XMLHttpRequest, fetch, Web Storage, Web Component 등)을 아우르는 개념이다.
• 참고로 클라이언트 사이드 Web API는 ECMAScript와는 별도로 월드 와이드 웹 콘소시엄(W3C)에서 관리하고 있다.

2-5. 자바스크립트의 특징

• 자바스크립트는 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다. 인터프리터 언어는 컴파일러 언어와 다르게 실행 단계가 분리되어 있지 않고 반복 수행되므로 코드 실행 속도가 비교적 느리다.
• 하지만, 요즈음에는 모던 자바스크립트 엔진(V8, SpiderMonkey, JavascriptCore 등)은 인터프리터와 컴파일러 언어의 장점을 결합해 비교적 속도가 느린 인터프리터 언어의 단점을 보완한다.

• 또한, 자바스크립트는 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.

[부록] ECMAScript 버전별 특징

• 대부분의 기업에서는 개발자에게 ES6 문법까지 요구를 하고 있다.

• ES5(2009)

JSON, strict mode, 접근자 프로퍼티, 프로퍼티 어트리뷰트 제어
배열 조작 기능(forEach, map, filter, reduce)

• ES6(ECMAScript 2015)

let/const, 클래스, 화살표 함수, 템플릿 리터럴
디스트럭처링 할당, 스프레드 문법
rest 파라미터, 심볼(Symbol), 프로미스(Promise)
Map/Set
이터러블, 제너레이터, for...of

• ES7(ECMAScript 2016)

지수 연산자(**)
Array.prototype.includes

• ES8(ECMAScript 2017)

async/await
Object 정적 메소드(Object.values, Object.entries)

• ES9(ECMAScript 2018)

Object rest/spread 프로퍼티
async generator

• ES10(ECMAScript 2019)

Object.fromEntries
Array.prototype.flat, Array.prototype.flatmap

---

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

3-1. 자바스크립트 실행 환경

• 자바스크립트를 실행할 수 있는 자바스크립트 엔진을 내장하고 있는 것은 브라우저와 Node.js이다. 하지만 둘의 목적은 다르다.

• 브라우저는 HTML, CSS, Javascript를 실행해 화면에 렌더링 하는 것이 주된 목적이다.
• Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공해 주는 것이 주된 목적이다.

• 따라서, 브라우저와 Node.js 모두 ECMAScript에 명시된 기능을 실행할 수 있지만 추가로 제공되는 기능은 호환되지 않는다.
• 예를 들어, 브라우저는 HTML 요소를 조작할 수 있는 DOM API를 제공하지만 Node.js에서는 제공하지 않는다. 또한, 파일을 실행하고 수정할 수 있는 파일 시스템을 Node.js에서는 제공하지만 브라우저는 제공하지 않는다.

※ 웹 브라우저(3-2)~VS Code(3-4)는 생략