JS Deep Dive - 개요 정리

이승윤·2022년 10월 7일

모던 자바스크립트 딥다이브

목록 보기

1/23

책 소개

해당 포스트는 "모던 자바스크립트 Deep Dive"라는 책을 읽고, 나름대로 정리한 부분에 대한 내용을 작성하려 한다.

Deep Dive 책은 자바스크립트에 대한 기본 개념과 동작원리를 A to Z까지 아주 자세하게 서술하고 있으며, 이를 통해 자칫 모르고 넘어갈 수 있는 자바스크립트의 동작 원리, 기본 개념을 훑어가도록 하기 위한 목적으로 정리하려 한다.

책에 서술되어 있는 학습 방법은 다음과 같다.

기본 개념과 동작 원리를 이해하는 것은 목표가 아니라 과정이다. 따라서 코드 구현 능력(코딩 스킬)을 갖추기 위한 과정 또한 필요하다. 이를 위해 다음과 같은 학습 방법을 제시한다.

JS에 대한 기본 개념 및 동작 원리를 이해하려고 노력해야 한다. 다만 모든 것을 한번에 학습하려 하지 말고 중요한 키워드를 중심으로 나누어 학습하는 것이 좋다.
완벽하게 이해하려 하지 말고 여러 번 반복해서 학습하는 것이 효율적이다.
어느 정도 기본 개념과 동작 원리를 이해했다면 이를 활용해 코드 구현 능력을 갖추기 위한 연습이 필요하다.
추가로 학습이 필요한 사항에 대해서는 첫 사이클, 즉 기본 개념과 동작 원리 이해로 돌아가 학습을 시작한다.

정리하자면 기본 개념과 동작 원리, 코딩 스킬, 프로젝트라는 3개의 사이클을 순환적으로 반복하면서 이해의 반경을 점진적으로 넓혀가는 것, 즉 지속전 개선을 통한 성장을 해야한다.

이와 같은 방법으로 추후에도 학습을 할 시 참고하도록 할 것 이며, 반복 학습을 위한 블로그 내용 포스팅도 꾸준히 진행할 예정이다.

프로그래밍이란

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다.
컴퓨터는 0과 1을 통해 정보를 해석하고, 전달하기 때문에 입력장치 또한 컴퓨터가 알아들을 수 있도록 입력해야 한다. 이를 전달하기 위해 필요한 작업의 모든 것을 프로그래밍이라 하는 것이다.
프로그래밍을 통해 0과 1밖에 알지 못하는 이런 바보 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명해야 하며, 이를 사람 또한 알아듣기 쉽게 정리해 놓은 언어가 프로그래밍 언어, 즉 코드이다.
따라서 우리는 문제 해결 방안을 고려할 때 항상 컴퓨터의 입장에서 문제를 바라봐야한다. 이러한 사고를 컴퓨팅적 사고(Coumputational Thinking)라고 명명한다.
이러한 컴퓨팅적 사고의 대표적인 그림 예시로는 순서도가 있다.

위 순서도는 두개의 값(A, B)을 읽어 두 수의 합인 S를 구하는 경우의 순서도를 작성한 것이다.

A,B의 합을 구하기 위해서는 우선 A와 B라는 것이 어떤 값이 담겨있는지 부터 읽은 후, 어떤 연산을 처리할 것인지, 연산하기 전에 몇번 반복할 것인지에 대한 디테일적인 요소들 먼저 명확히 수치화하여 정의해야 한다.

프로그래밍 언어

이러한 순서도를 거쳐 컴퓨터로 잘 전달된 문제를 해결하기 위해서는 먼저 컴퓨터가 알아들을 수 있는 언어로 변환해야 한다. 이를 위해 필요한 언어가 바로 프로그래밍 언어이다.
명령을 수행할 주체는 컴퓨터이기 때문에, 사람이 이해할 수 있는 언어가 아닌 컴퓨터가 이해할수 있는 언어인 기계어로 명령을 전달해야 한다.
하지만 기계어로 직역하여 정보를 전달하기에는 사람 입장에선 매우매우 어려운 일이기 때문에, 컴퓨터와 사람간의 절충안 같은 역할을 하는 프로그래밍 언어를 사용하여 소통하는 것이다.

정리하자면, 1. 서로간에 약속된 구문을 사용하는 프로그래밍 언어를 사용하여 프로그램을 작성한 후, 2. 그것을 컴퓨터가 이해할 수 있는 기계여로 변환하는 번역기(컴파일러)를 활용하여 해석한다. 3. 해석을 마친 컴퓨터는 작성된 프로그램을 실행시킨다.

JS(JavaScript)란?

자바스크립트는 1995년 브렌던 아이크(Brendan Eich)에 의해 개발된 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어이다.
이렇게 탄생된 자바스크립트는 훗날 웹 프로그래밍에 있어 매우 중요한 주축의 역할을 하는 언어가 된다.

자바스크립트는 처음에는 "Mocha"라는 이름으로 명명되었다가 LiveScript라는 이름을 거쳐, 최종적으로 JavaScript라는 이름으로 최종 명명된다.

JS의 표준화

자바스크립트의 표준화를 알아보기 전에, 왜 표준화가 일어나야 하는지 부터 살펴보고자 한다.
1996년 8월, 마이크로소프트는 자바스크립트의 파생 버전인 "JScript"를 인터넷 익스플로러라는 브라우저 환경에 탑재했다. 여기서 문제가 발생하는데, JScript와 자바스크립트가 표준화되지 못하고 적당히 호환되었다는 것.

이로 인해 브라우저 환경에 따라 웹페이지가 정상적으로 동작하지 않는 이른바 크로스 브라우징 이슈가 발생하게 된다. 브라우저에 따라 동작하는 웹페이지를 찾기가 힘든 상황이기 때문에, 비교적 대부분의 브라우저환경에서 동작할 수 있는 자바스크립트를 표준화하고자 하였다.

이렇게 탄생한 표준 언어가 바로 ECMAScript이다. 각 브라우저 제조사(크롬, 웨일, 사파리 등등..)는 ECMAScript 사양을 준수하여 브라우저에서 내장되는 자바스크립트 엔진을 구현한다.
최근에는 2016년도에 만들어진 ES6 스크립트 버전을 기준으로 자바스크립트 엔진을 구현하고 있다.(이를 모던 자바스크립트라 한다.)

자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도로 지원하는 클라이언트 사이드 Web API, 즉 DOM, BOM, Canvas, XMLHttpRequest, fetch, SVG 등을 아우르는 개념이다.

JS의 활용과 여러 도구

자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 그렇기 때문에 웹에서 더 많은 역할을 수행하기 위해 다음과 같은 여러 파생 도구들이 탄생한다.

1. Ajax

자바스크립트를 이용하여 서버와 브라우저가 비동기(asynchronous)방식으로 데이터를 교환할 수 있는 통신 기능이다. 자바스크립트 내부 라이브러리로 XMLHttpRequest라는 이름으로 등장하였다.

비동기가 탄생되기 이전의 웹페이지는 html문서의 전체 부분을 모두 다 전송받아 웹페이지 전체를 렌덩하는 방식으로 동작하였다. 이로 인해 한 웹페이지에서 서버로부터 받은 일부 데이터가 변화하더라도 다시 웹페이지 전체를 로드하여 렌더링을 해야한다는 문제점이 발생하였다.
이를 해결하기 위해 탄생한 것이 바로 비동기 프로그래밍 방식이다. 이를 통해 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이 가능해졌다.

JS의 비동기 프로그래밍으로는 외부 라이브러리인 axios를 최근에는 많이 사용하고 있다.

2. jQuery

웹에는 DOM(Document Object Model)이라는 문서 객체 모델이 존재한다. 이런 DOM은 XML, HTML 문서를 보다 동적으로, 또는 기능적인 요소를 다룰 수 있도록 표준화된 모델로 정의한 일종의 인터페이스 역할을 한다.
하지만 이런 DOM은 사용 방법이나 범위가 매우 넓어 사용하기 다소 까다롭다는 단점이 있었지만, 이런 DOM을 더욱 쉽게 제어할 수 있는 방법으로 개발된 도구가 바로 jQuery이다.
이로 인해 배우기가 다소 까다로운 자바스크립트보다 배우기 쉽고 직관적인 jQuery를 더 선호하는 개발자가 양산되기도 하였다.

3. V8 자바스크립트 엔진

자바스크립트를 활용한 웹 페이지는 단순 문서기능을 하는 것을 넘어 애플리케이션의 역할을 수행할 수 있도록 많은 시도를 해왔었다.
이를 위해 자바스크립트를 더 빠르게, 효율적으로 읽고 실행시켜주는 "자바스크립트 엔진"이라는 인터프리터의 역할이 더 중요해졌다. 2008년에 등장한 구글의 V8 자바스크립트 엔진은 이러한 요구에 부합되는 빠른 성능을 보여주었다. 해당 엔진의 등장으로 자바스크립트는 데스크톱 애플리케이션과 유샤한 UX를 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었다.

이를 통해 웹 애플리케이션 개발에서 프론트엔드 영역이 주목받는 계기로도 작용했다.

4. Node.js

Node.js는 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다. Node.js는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 독립시킨 자바스크립트 실행 환경이다. 해당 언어는 이 뿐만 아니라 자바스크립트를 통해 서버로와 통신이 가능한 모듈을 만들어낼 수 있을 뿐만 아니라, express라는 서버 구축 기반 프레임워크를 통해 백엔드영역에서도 자바스크립트를 사용할 수 있도록 하였다.
Node.js는 비동기 I/O(입출력)를 지원하며 단일 스레드(single thread) 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋다.
해당 언어의 등장으로 인해 자바스크립트는 브라우저를 벗어나 서버 사이드 애플리케이션(SSA) 개발에서도 사용할 수 있는 범용 프로그래밍 언어로 발전할 수 있었다.

5. SPA 프레임워크

모던 웹 애플리케이션은 데스크톱 애플리케이션과 비교해도 손색없는 성능과 사용자 경험을 제공하는 것이 필수가 되었고, 더불어 개발 규모와 복잡도도 상승했다.
많이 복잡해지고 패턴과 라이브러리 또한 매우 다양해지고 있기 때문에, 자바스크립트를 이용한 프레임워크가 필연적으로 필요하게 되었다.
이를 위해 CBD(Component based development)방법론을 기반으로 하는 SPA(Single Page Application)가 대중화되면서 Angular, React, Vue.js, Svelte등 다양한 SPA 프레임워크/라이브러리 또한 많은 사용층을 확보하고 있다.