[824 스터디] JS 1주차 | 프로그래밍과 자바스크립트란?

 

모던 자바스크립트 Deep Dive

웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도로 태어난 자바스크립트는 과도하다고 느껴질 만큼 친절한 프로그래밍 언어입니다. 이러한 자바스크립트의 특징은 편리한 경우도 있지만 내부 동작을 이해하기 어렵게 만들기도 합니다. 하지만 자바스크립트는 더 이상 제한적인 용도의 프로그래밍 언어가 아닙니다. 오랜 변화를 거쳐 이제 자바스크립트는 프런트엔드와 백엔드 영역의 프로그래밍 언어로 사용할 수 있는 명실상부한 범용 애플리케이션 개발 언어로 성장했습니다. 따라서 자바스크립트를 학습하는 방식도 이에 걸맞게 변화해야 하며, 이 책은 자바스크립트의 기본 개념과 동작 원리를 깊이 있게 학습하고자 하는 독자를 위해 기획되었습니다. 《모던 자바스크립트 Deep Dive》에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤칩니다. 따라서 여러분이 작성한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측하고, 명확히 설명할 수 있도록 돕습니다. 또한 최신 자바스크립트 명세를 반영해 안정적이고 효율적인 코드를 작성할 수 있는 기본기를 다지고, 실전에서 쓰이는 모던 자바스크립트 프레임워크나 도구를 완벽하게 이해하고 활용할 수 있게 도와줍니다.

 

저자

이웅모

출판

위키북스

출판일

2020.09.25

1장 프로그래밍

1.1 프로그래밍이란?

프로그래밍이란 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이다.

컴퓨터와 사람은 사고, 인지의 방식이 다르다. 따라서 컴퓨터의 관점에서 문제를 사고해야 한다.

1.2 프로그래밍 언어

기계어는 사람이 사용하는 언어와는 너무나도 달라서 사람이 직접 기계어롤 명령을 전달하는 것은 매우 어려운 일이다.

 

다음은 "Hello world"를 출력하는 기계어 코드다.

7F 45 4C 46 01 01 01 00 00 00 00 00 00 00 00 00 02 00 03 0001 00 00 00 35 40 B3 04 2C 00 00 00
00 00 00 00 00 00 00 0034 00 20 00 01 00 00 00 00 00 00 00 00 40 B3 04 B2 0C EB 1C 62 00 00 00
62 00 00 00 05 00 00 00 00 10 00 00 48 65 6C 6C 6F 20 77 6F 72 6C 64 0A B9 4C 40 B3 04 93 CD 80 EB FB

 

사람이 컴퓨터에게 명령을 전달하는 방법은 프로그래밍 언어를 사용해 프로그램을 작성한 후 그것을 컴파일러 혹은 인터프리터를 사용하여 기계어로 변환해 전달하는 것이다.

 

앞선 기계어는 다음과 같이 프로그래밍 언어로 표현할 수 있다.

console.log('Hello world');

1.3 구문과 의미

자바스크립트의 변수에는 어떠한 타입의 값도 할당할 수 있지만 다음과 같은 코드는 의미적으로 옳지 않다.

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

number라는 이름의 변수에는 숫자를 할당하는 것이 의미적으로 옳다.

 

문제 해결 능력을 통해 만들어낸 해결 방안은 프로그래밍 언어의 문법을 사용해 표현한다. 그리고 이것은 프로그래밍 언어의 문법에 부합하는 것은 물론이고 수행하고자 하는 바를 정확히 수행하는 것. 즉 요구사항이 실현(문제가 해결)되어야 의미가 있다.

 

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

 

2장 자바스크립트란?

2.1 자바스크립트의 탄생

1995년 약 90%의 시장 점유율로 웹 브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈는 웹 페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정한다. 이때 탄생한 것이 자바스크립트다.

2.2 자바스크립트의 표준화

넷스케이프는 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 추가하기 시작했다. 이로 인해 브라우저에 따라 웹 페이지가 정상적으로 동작하지 않는 크로그 브라우징 이슈가 발생하기 시작했다. 이에 자바스크립트의 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트를 위해 ECMA 인터내셔널에 표준화를 요청한다.

2015년에 공개된 ECMAScript 6는 let/const 키워드, 화살표 함수, 클래스, 모듈 등과 같이 범용 프로그래밍 언어로서 갖춰야 할 기능들을 대거 도입하는 큰 변화가 있었다.

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

초창기 자바스크립트는 웹 페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다.

 

Ajax

이전의 웹 페이지는 완전한 HTML 코드를 서버로부터 전송받아 웹 페이지 전체를 렌더링하는 방식으로 동작했다. 따라서 변경할 필요가 없는 부분까지 포함된 HTML 코드를 다시 전송받기 때문에 불필요한 데이터 통신이 발생했고 성능 면에서도 불리했다. 이로 인해 화면이 전환되면 순간적으로 깜박이는 현상이 발생했다.

Ajax의 등장으로 웹 페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이 가능해졌다.

 

V8 자바스크립트 엔진

V8 자바스크립트 엔진의 등장함에 따라 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자 경험을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었다.

자바스크립트의 발전으로 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동했고, 이는 웹 애플리케이션이 개발에서 프런트엔드 영역이 주목받는 계기로 작용했다.

 

Node.js

Node.js는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다.

비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋다. 따라서 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합하다.

 

SPA 프레임워크

웹 애플리케이션이 데스크톱 애플리케이션과 비교해도 손색없는 성능과 사용자 경험을 제공하는 것이 필수가 됨에 따라 개발 규모와 복잡도도 더불어 상승했다. 이전의 개발 방식으로는 복잡해진 개발 과정을 수행하기 어려워졌고, 이러한 필요에 따라 많은 패턴과 라이브러리가 출현하였다. 이는 개발에 많은 도움을 주었지만 유연하면서 확장이 쉬운 애플리케이션 아키텍처 구축을 어렵게 하였고 필연적으로 프레임워크가 등장하게 되었다. SPA(Single Page Application)가 대중화되면서 Angular, React, Vue.js, Svelte 등 다양한 SPA 프레임워크/라이브러리 또한 많은 사용층을 확보하고 있다.

2.4 자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준 명세인 ECMA-262를 말하며 프로그래밍 언어의 타입, 값, 객체와 프로퍼티, 함수, 빌트인 객체 등 핵심 문법을 규정한다. 각 브라우저 제조사는 ECMAScript를 준수하여 브라우저에 내장되는 자바스크립트 엔진을 구현한다.

2.5 자바스크립트와 특징

1. 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다.

2. 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어다. 

3. 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

 

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

3.1 자바스크립트 실행 환경

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 브라우저뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있다. 따라서 자바스크립트는 브라우저와 Node.js 환경에서 실행할 수 있다. 기본적으로 브라우저에서 동작하는 코드는 Node.js 환경에서도 동작한다.

하지만 브라우저는 HTML, CSS, 자바스크립트를 실행하여 웹 페이지를 화면에 렌더링하는 것이 주된 목적이지만, Node.js는 서버 개발 환경을 제공하는 것이 주된 목적이다. 따라서 브라우저와 Node.js 모두 자바스크립트의 코어인 ECMAScript를 실행할 수 있지만 브라우저와 Node.js에서 ECMAScript 이외에 추가적으로 제공하는 기능은 호환되지 않는다.