JavaScript | 모던 자바스크립트 Deep Dive 공부기록(1)

위키북스의 이웅모 저자의 모던 자바스크립트 Deep Dive를 공부하면서 정리한 포스트입니다.
저작권 문제시 삭제하겠습니다.

 

개념과 동작원리 이해의 중요성

프로그래머의 역활은 요구사항을 기반으로 문제를 해결하기 위한 방안을 고안하고,이를 코드로 구현하는 것이다.

프로그래머가 구현한 코드는 의도한대로 정확히 동작해서 문제를 해결해야한다.

 

이를 위해서는 자신이 구현한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측이 가능해야 하며

이를 명확히 설명할 수 있을만큼 이해해야 한다.

 

그러나 개념과 동작원리에 대해 정확히 이해하지 못한채로 단순히 복사, 붙여넣기만 할 경우에는

언제 어디서 어떻게 에러가 발생해도 이상하지 않은 상태가 되어버린다.

그렇게 되면 신입개발자의 성장에 있어서도 매우 큰 장애물이 되어 버릴 것이다.

 

개발자는 의사소통이 매우 중요하다. 그러기 위해서는 문맥에 맞는 정확한 용어를 구사할 수 있는 능력이 있어야 하며

그런 능력이 갖춰진다면 오해를 불러일으키지 않는 명확한 의사소통이 가능해 진다.

이런 개념들은 JavaScript뿐만 아니라 어느 언어에서나 공유하는 부분이 많기 때문에 추후에 다른 언어를 학습함에 있어서도 큰 원동력이 되어 줄 수 있다.

 

학습방법

- 기본개념과 동작원리를 이해한다. (한번에 학습하려 하지 말고 여러번 반복해서 학습)

- 어느정도 공부를 진행했다면 이를 토대로 코딩을 구현해 본다.(자신의 능력을 살짝 넘어서는 도전을 계속지속)

- 프로젝트를 진행한다. (모르는 것과 아는것을 정확히 구분하는 시점이다.

빨리 가는 유일한 방법은 제대로 가는 것이다. - 로버트 C. 마틴 <클린코드>의 저자 -

 

프로그래밍이란?

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

요구되는 것은 문제해결 능력이다. 문제해결 능력과 알고리즘은 다르다.

그러기 위해서는 문제의 본질을 파악하고 이를 단순하게 분해하여 구분해야한다.

 

이를 토대로 컴퓨터에게 정확하고 상세하게 요구사항을 설명하는 작업이며, 그 작업물이 코드이다.

그러기 위해 컴퓨터의 입장에서 문제를 바라보아야 하며 이때 필요한것이 Computational thinking(컴퓨터 사고)이다.

 

컴퓨터와 사람의 차이점

즉 컴퓨터와 사람은 어떤 행위, 단어에 대한 인지의 방식이 다르다.

예를 들어 사람에게는 노래소리를좀 줄여줘 라고 하게되면 그 사람만의 기준을 통해 줄이거나

또는 줄인다음 확인을 할 것이다. "이정도면 괜찮아?"

 

그러나 컴퓨터의 경우에는 노래소리를 줄여달라는 부탁을 받게되면 얼마나 어떻게 줄여달라는 것인지

이해하지 못하기 때문에 수많은 에러를 발생시킬 것이다.

 

컴퓨터에게 명령을 전달하기위한 언어

기계어는 컴퓨터가 이해할 수 있는 언어, 즉 사람이 이해하는 자연어랑은 다르다.

사람이 기계어를 보고 이해하기는 굉장히 어렵다. 비트단위로 기술되어 있기도하다.

 

그렇기 때문에 컴퓨터에게 명령을 할때는 사람이 이해할 수 있는 약속된 구문(문법)으로 구성된

프로그래밍 언어를 사용해 프로그램을 작성한 후 이를 기계어로 변환하는 작업을 진행해주는

컴파일러, 혹은 인터프리터를 통해 변환 후 전달해야 한다.

 

프로그래밍언어란?

컴퓨터와의 대화(명령)에 사용되는 일종의 표현수단으로,

사람과 컴퓨터(컴파일러 또는 인터프리터) 모두가 이해할 수 있는 약속된 형태의 인공어이다.

 

구문 과 의미

언어의 의미는 문맥에 있는 것이지 문법에 있는것이 아니다. - 노엄 촘스키 -

결국 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후,

그 흐름을 제어하는 것이다.

 

자바스크립트의 탄생(왜 ES5, ES6 라고 하는가?)

1995년 웹브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션은 보조적인 기능을 수행하기 위해

자바스크립트를 개발하게 된다.

 

뒤이어 우리가 아는 마이크로소프트에서 JScript를 개발하게 되고 서로 각자의 브라우저에서 이를 호환하도록

하였다. 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생한다.

이를 해결하기 위해서 넷스케이프측에서는 ECMA인터내셔널에 자바스크립트의 표준화를 요청했고

이를 받아들여 상표권의 문제로 자바스크립트는 ECMAScript로 불리게 된다.

즉 이로 인해서 ES5, ES6문법 등으로 우리가 부르게 된 것이다. (궁금증 해결)

 

각각의 ES1 ~ ES11까지의 문법에 대해서는 따로 검색을 해 보기를 추천한다.

 

자바스크립트 성장의 역사

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

대부분의 로직은 웹 서버에서 실행되었고, 브라우저는 서버로부터 받은 HTML과 CSS를 단순히 렌더링하는 수준이었다.

렌더링? HTML, CSS, JavaScript로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것

Ajax

자바스크립트를 이용하여 서버와 브라우저가 비동기(asynchronous)방식으로 데이터를 교환할 수 있는 통신기능이

XMLHttpRequest라는 이름으로 등장한다.

이전의 웹페이지는 html태그 -> html태그로 끝나는 완전한 HTML코드를 서버로부터 전송받아 페이지 전체를 렌더링하는 방식으로 동작했다.

즉 화면이 전환되면 서버로부터 모든 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링 해야했다.

 

이는 흔히 SSR(Server Side Rendering)이며 그에 대한 장단점은 현재블로그의 다른 게시물에 작성했다.

 

Ajax의 등장으로 인해 전체 HTML을 렌더링하지 않고 변경이 필요한 부분만 렌더링할 수 있게 되었다. (혁신적이다!)

ex) 2005년 구글이 발표한 구글 맵스

 

V8 자바스크립트 엔진

구글 맵스를 통해 자바스크립트에 대한 기대감은 높아졌고 성능 업그레이드를 위해

더 빠르게 동작하는 엔진이 필요했다. 이 때 등장한 것이 구글의 V8 자바스크립트 엔진이다.

이 엔진을 통해 대부분을 서버에서 담당하던 SSR에서 브라우저에서 로직을 담당하는 CSR으로

넘어올 수 있는 계기가 되었고 이때부터 프론트엔드 영역이 주목받게 된다.

 

Node.js

2009년, 라이언 달이 발표한 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.

이때부터 JavsScript는 브라우저안에서 뿐만 아니라 밖에서도 동작할 수 있게 된다.(혁신)

 

또한 이를 통해 JavaScript를 통해서 프론트와 백엔드 영역 모두에서 자바스크립트를 통해 작업할 수 있게된다.

주로 SSR에 사용되며 , 이에 필요한 모듈, 파일 시스템, HTTP등을 빌트인 API를 제공한다.

 

Node.js는 비동기 I / O를 지원하며 단일 스레트 이벤트 루프를 기반으로 동작한다.

그로인해 SPA(Single Page Application) 적합하고 CPU 사용률이 높은 애플리케이션에는 권장하지 않는다.

 

SPA 기반 프레임워크/라이브러리

CBD 개발 방법론을 기반으로 하는 SPA가 대중화 되면서 Angular, React, Vue.js, Svelte등 다양한 SPA 프레임워크/라이브러리가 각광받기 시장했다.

 

자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준사양인 ECMA-262를 말한다.

각 브라우저에서는 ECMAScript 사양을 준수하여 각자 내장되는 JavaScript 엔진을 구현한다.

 

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

 

자바스크립트의 특징

자바스크립트는 웹브라우저 상에서 동작하는 유일한 프로그래밍 언어이다.

자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.

그러나 각각의 브라우저의 엔진들은 인터프리터와 컴파일러의 장점들을 결합시켜서 비교적 속도가 느린 인터프리터의 단점을 보완했다.

 

인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신코드를 생성하고 최적화 한다.

이를 통해서 추가적으로 시간이 필요함에도 더욱 빠르게 코드를 실행할 수 있다.

컴파일러와 인터프리터의 차이점에 대해서는 검색을통해 표를 보고 비교해 보도록 하자.

 

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

또한 강력한 객체지향 프로그래밍 능력을 지니고 있다.

 

인터넷 익스플로러를 제외한 대부분의 브라우저들은 ES6를 지원하고 있다.

그러나 그렇지 못한 상황이라면 바벨과 같은 트랜스파일러를 사용해 ES6를 ES5 이하로 다운그레이드 할 필요가 있다.

 

출처

모던 자바스크립트 Deep Dive  (https://wikibook.co.kr/mjs/)

 

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리