모던 자바스크립트 Deep Dive 2장 자바스크립트란?

출처 : 예스24

 

스터디를 진행하면서 책을 읽고 내용과 떠오르는 생각, 용어들을 정리하고 있습니다.
문제 되는 부분이나 틀린 부분이 있다면 편하게 말씀해 주세요.

2장 자바스크립트란?

2.1 자바스크립트의 탄생

자바스크립트는 넷스케이프사에서 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 하였고, 브렌던 아이크가 개발하였다.

2.2 자바스크립트의 표준화

마이크로소프트사와의 대립 경쟁관계로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작하였고, 결과적으로 모든 브라우저에서 정상적으로 동작하는 웹페이지를 개발하기가 어려워졌다.

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

초창기에 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링 하는 수준이었다.

※ 렌더링이란?

 : HTML, CSS, 자바스크립트로 작성된 문서를 해석해 브라우저에서 시각적으로 출력하는 것을 말한다.

2.3.1 Ajax

서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 XMLHttpRequest라는 이름으로 등장했다. 이전의 웹페이지는 화면이 전환되면 웹페이지 전체를 처음부터 다시 렌더링 했다. Ajax의 등장은 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링 하는 방식이 가능해진 것이다.

※  비동기방식이란?

 : 하나의 요청을 즉시 처리하지 않아도 대기시간 동안 또 다른 요청에 대해 처리 가능한 방식이다.

2.3.2 jQuery

배우기 까다로운 자바스크립트보다 쉽고 직관적인 jQuery의 등장으로 DOM을 더욱 쉽게 제어할 수 있게 되었고, 크로스 브라우징 이슈도 어느 정도 해결되었다.

2.3.3 V8 자바스크립트 엔진

구글의 V8 자바스크립트 엔진의 등장으로 자바스크립트는 데크스톱 애플리케이션과 유사한 사용자 경험(UX)을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었다. 자바스크립트의 발전으로 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동했고, 이는 프런트엔드 영역이 주목받는 계기로 작용했다.

2.3.4 Node.js

Node.js는 V8 자바스크립트 엔진으로 만들어진 자바스크립트 런타임 환경이다. 브라우저에서 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 독립시킨 자바스크립트 실행 환경이다. 주로 서버 사이드 애플리케이션 개발에 사용되며, 자바스크립트 하나의 언어로 프런트엔드와 백엔드 두 영역을 다룰 수 있다는 게 장점이다.

※ 런타임 환경이란?

 : 개인적으로 동작하기 위한 환경이라고 이해했다. 맥용과 윈도용 프로그램이 따로 있는 것처럼, 브라우저용 자바스크립트가 Node.js를 거치면 서버에서 동작하도록 만들 수 있고, Electron을 거치면 데스크톱 애플리케이션을 만들 수 있는 것처럼. 즉, 특정 결과를 얻기 위한 환경이라고 볼 수 있겠다.

※ 서버 사이드란?

 : 클라이언트-서버 구조에서 데이터를 처리하는 주체가 서버라는 뜻이다.
   예를 들어 웹페이지 접속 시 서버 사이드 렌더링 방식은 첫 페이지만 서버로부터 전달받아 화면에 빠르게 출력한다. 이후 페이지를 이동할 때마다 서버에서 데이터를 새로 받아야 해 이동 속도가 느리다. 클라이언트 렌더링 방식은 반대로 모든 파일을 다 받아야 출력하기 때문에 초기 속도는 느리나 받은 이후는 이동속도가 빠를 수밖에 없다.

 

비동기 I/O를 지원하며, 단일스레드 이벤트 루프 기반으로 동작하여 요청 처리 성능이 좋다. SPA(Single Page Application)에 적합하다. 하지만 CPU 사용률이 높은 애플리케이션에는 권장하지 않는다. 이제 자바스크립트는 크로스 플랫폼을 위한 가장 중요한 언어로 주목받고 있다.

※ 비동기 I/O란?

 : 하나의 데이터 전송을 마치기 전에 또 다른 프로세스가 계속하도록 허가하는 입출력 처리의 한 형태이다.

※ 단일 스레드( = 싱글 스레드)란?

 : 스레드란 프래그램을 실행하기 위한 프로세스보다 작은 실행의 최소 단위로 단일 스레드(Single Thread)는 동시간에 처리할 수 있는 양이 하나라는 것.

※ 이벤트 루프란?

 : 브라우저에서 동작하는 영역으로 자바스크립트 런타임 환경은 싱글 스레드지만 처리 중 작업 상황, 순서 등을 파악하여 자바스크립트 런타임 환경이 빠르게 동작할 수 있도록 돕는 개념이다. 이로 인해 싱글스레드라도 빠른 처리가 가능한 것.

※ 크로스 플랫폼이란?

 : 교차를 뜻하는 '크로스'와 플랫폼의 합성어로, 서로 다른 환경을 의미한다. 예시로 크로스 플랫폼 앱은 하나의 소스 코드로 여러 가지 환경에서 동작하는 앱을 말한다. 예를 들어 안드로이드와 iOS에 모두 동작하는 식이다.

 

2.3.5 SPA 프레임워크

개발과정이 복잡해짐에 따라 많은 패턴과 라이브러리가 출현했다. 이에 필연적으로 프레임워크가 등장하게 되었다. 또한 이에 따라 CBD(Component based development) 방법론을 기반으로 하는 SPA(Single Page Application)가 대중화되면서 다양한 프레임워크/라이브러리 또한 많은 사용층을 확보하고 있다. 

※ CBD 방법론이란?

 : 기존의 시스템이나 소프트웨어를 구성하는 컴포넌트(재사용 가능한 독립된 모듈 단위)를 조립해서 하나의 새로운 응용 프로그램을 만드는 소프트웨어 개발방법론이다.

※ SPA란?

 : 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라 현재의 페이지에서 필요한 부분만 동적으로 다시 작성함으로써 사용자와 소통하는 애플리케이션이나 사이트를 말한다.

 

2.4 자바스크립트와 ECMAScript

ECMAScript는 프로그래밍 언어로써 자바스크립트의 핵심 문법을 규정한다. ECMAScript와는 별도로 웹 브라우저에서 지원하는 클라이언트 Web API가 있는데 이는 W3C에서 별도의 사양을 관리하고 있다. 

 

2.5 자바스크립트의 특징

자바스크립트는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다. 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어로, 대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합해 인터프리터의 단점을 해결했다.

대부분의 모던 브라우저에서 사용되는 인터프리터는 일부 소스코드를 컴파일 실행한다. 현재는 컴파일러와 인터프리터의 기술적 구분이 점차 모호해져 가는 추세다.

자바스크립트는 프로그래밍 패러다임(방식) 측면에서 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

※ 명령형 프로그래밍이란?

 : 컴퓨터가 수행할 명령들을 순서대로 써놓는 방식이다.

※ 함수형 프로그래밍이란?

 : 함수의 출력값은 그 함수에 입력된 인수에만 의존하므로 인수 x에 같은 값을 넣고 함수 f를 호출하면 항상 f(x)라는 결과가 나온다. 프로그램의 동작을 이해하고 예측하기가 훨씬 쉽게 된다. 이것이 함수형 프로그래밍으로 개발하려는 핵심 동기중 하나이다.

※ 프로토타입 기반 객체지향 프로그래밍이란?

 : 객체지향 프로그래밍의 한 형태의 갈래로 클래스 없고, 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하여 복제의 과정을 통하여 객체의 동작 방식을 다시 사용할 수 있다.

 

2.6 ES6 브라우저 지원 현황

브라우저에서 아직 지원하지 않는 최신 기능이나 구형 브라우저를 고려해야 한다면 바벨과 같은 것을 사용해 ES6 이상의 사양으로 구현한 소스코드를 ES5 이하의 사양으로 다운그레이드할 필요가 있다.

※  바벨?

 : 코드를 이전 JavaScript 엔진에서 실행할 수 있게 이전 버전과 호환되는 코드로 변환하는 데 주로 사용되는 무료 오픈 소스.

 

정리

대학시절 저명하신 교수님 수업을 들은 적이 있었다. 음악사 대학교재로 유명한 책의 공동저자분이셨는데 특정 음악에 대해 공부하고 용어를 정의해서 다음시간에 가져오라는 과제를 내주셨다. (정확하게는 기억이 안 나지만 전통음악의 하나였던 것으로 기억한다.)

다음시간에 교수님은 명확하지 않은 용어정의나 본인이 이해하지 못하고 용어정의를 한 학생에 대해 다시 해올 것을 이야기하셨고, 그다음 시간에 한번 더 확인하셨다. 그때 하셨던 말씀이 아직도 기억난다.

 

공부는 남에게 설명할 수 있을 정도로 했을 때 진짜 한 것

 

용어정의한 것을 보면 검색해서 그대로 복사했는지 사전에서 찾았는지 아니면 공부한 결과인지 티가 난다. 노마드코더 니콜라스는 파인만 학습법 이라고도도 하더라.(니콜라스 이야기가 계속 나오는데 관계자 아님) 남에게 설명할 수 있는 지식이 진짜 지식이라고 개발 커뮤니티에서 많은 사람들이 추천하는 방식이기도 하다.

상당한 시간이 걸리는 일이긴 한데 추후 기술면접 등을 위해서도 분명히 다시 공부할 내용들이기 때문에 지금부터 같이 하는 것도 나쁘지 않겠다는 생각이 들었다. 그런데 이 책. 개인적으로는 너무 좋은데 처음 자바스크립트 공부하는 사람들에게는 너무 방대할 수도 있겠다는 생각이 든다. 독학할 때 제일 많이 하는 생각이 '어떤 기술을 어디까지 공부해야 취업할 수 있는가' 였던 것 같은데 내가 아무것도 모르는 상황에서 이 책을 본다면 엄두가 안 날 것 같기도 하다..; 어쨌든 자바스크립트를 완전 처음 접하는 것은 아닌 사람으로서 나는 대만족 하고 있다.

 

이 챕터는 자바스크립트가 천대받던 내용부터 오늘날의 위상에 이르기까지의 내용으로 별거 아니라 생각할 수 있지만 사실 현재 프런트엔드 개발자를 꿈꾸는 사람이 관심을 가져야 할 내용이 모두 들어있다.

자바스크립트가 프런트엔드뿐만 아니라 백엔드나 다른 분야까지 개발 가능한 무궁무진한 확장성을 가졌다는 것과, 웹 개발은 자바스크립트 말고는 대안이 없다는 것(웹 개발을 할 건데 자바스크립트는 하기 싫으면 정말 답이 없다고.. 니콜라스가 이야기하더라). 싱글스레드인 자바스크립트가 멀티스레드인 것처럼 빠른 속도를 낼 수 있는 이유, SPA나 함수형 프로그래밍, CBD 등. 개발 트렌드와 관련한 부분 등.

뒷부분에 상세 내용들이 다시 나오는 것으로 알고 있지만 이 챕터에서 용어 정의를 해야 할 게 너무 많았고, 정리하면서 어렴풋이 알던 내용에 대해서 조금 더 명확하게 알게 된 시간이었다.