모던 자바스크립트 Deep Dive #1

 

 

모던 자바스크립트 Deep Dive

1장 프로그래밍

 

프로그래밍이란?

컴퓨터에게 실행을 요구하는 커뮤니케이션으로 해결해야 할 문제(요구사항)를 명확히 이해한 후 적절한 문제 해결 방안을 정의해야 한다.

 

대부분의 문제(요구사항)는 복잡하며 명확하지 않을 수 있으므로, 문제(요구사항)를 명확히 이해하는 것이 우선되어야 하며 복잡함을 단순하게 분해하고 자료를 정리하고 구분해야 하며 순서에 맞게 행위를 배열해야 한다.

 

이때 필요한 것이 Computational thinking이다. 

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

 

 

프로그래밍 언어

문제 해결 방안을 컴퓨터에게 전달되기 위해 컴퓨터가 이해할 수 있는 언어인 '기계어'로 명령을 전달해야 한다.

기계어로 직접 명령을 전달하는 대신, 사람이 이해할 수 있는 약속된 구문(syntax)으로 구성된 "프로그래밍 언어"를 사용해 프로그램을 작성 후, 컴퓨터가 이해할 수 있는 기계어 변환하는 번역기를 이용한다. 번역기에는 컴파일러와 인터프리터가 있다.

 

프로그래밍은 프로그래밍 언어를 사용해 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이며, 프로그래밍 언어는 구문(syntax)과 의미(semantic)의 조합으로 표현된다.

 

대부분의 프로그래밍 언어는 "변수와 값", "키워드", "연산자", "표현식과 문", "조건문", "반복문"에 의한 "흐름 제어", "함수", "객체", "배열"등과 같은 문법을 제공한다. 

 

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

 

 

2장 자바스크립트란?

자바스크립트의 탄생

1995년, 웹 브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기 위해 브랜던 아이크(Brendan Eich)가 개발한 자바스크립트가 탄생한다.

 

 

자바스크립트의 표준화

1996년 8월, 자바스크립트의 파생 버전인 "JScript"를 IE3.0에 탑재한 마이크로소프트와 자바스크립트가 표준화되지 못하고 적당히 호환되었다. 각 회사는 자사 브라우저 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 만들어 크로스 브라우징 이슈가 발생하였다. 

 

자바스크립트의 파편화 방지와 크로스 브라우징 이슈 해결을 위해 표준화된 자바스크립트 필요성이 대두되었다.

 

1996년 11월, 넷스케이프 커뮤니케이션즈는 컴퓨터 시스템 표준 관리하는 비영리 표준화 기구인 ECMA 인터내셔널에 자바스크립트 표준화를 요청한다.

 

1997년 7월, ECMA-262라고 불리는 ECMAScript(표준화된 자바스크립트 초판 사양)이 완성되었다.  

 

참고로, ECMAScript를 자바스크립트의 표준 사양인 ECMA-262를 말한다. 각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현한다. 

 

버전	출시 연도	특징
ES1	1997	초판
ES2	1998	ISO/IEC 16262 국제 표준과 동일 규격 적용
ES3	1999	정규표현식, try...catch
ES5	2009	HTML5와 함께 출현, JSON, strict mode, 접근자 프로퍼티, 프로퍼티 어트리뷰트 제어, 향상된 배열 조작 기능(forEach, map, filter, reduce, some, every)
ES6(ECMA Script 2015)	2015	let/const, 클래스, 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당, 스프레드 문법, rest 파라미터, 심벌, 프로미스, Map/Set, 이터러블, for...of, 제너레이터, Proxy, 모듈 import / export
ES7(ECMA Script 2016)	2016	지수 연산자, Array.prototype.includes, String.prototypes.includes
ES8(ECMA Script 2017)	2017	async/await, Object 정적 메서드(Object.values, Object.entries, Object.getOwnPropertyDescriptors)
ES9(ECMA Script 2018)	2018	Object rest/sprea 프로퍼티, Promise.prototype.finally, async generator, for awit ... of
ES10(ECMA Script 2019)	2019	Object.fromEntries, Array.prototype.flat, Array.prototype.flatMap, optional catch binding
ES11(ECMA Script 2020)	2020	String.prototype.matchAll, BigInt, globalThis, Promise.allSettled, null 병합 연산자, 옵셔널 체이닝 연산자, for...in enumeration order

 

 

 

자바스크립트 성장의 역사

• AJAX
  • 1999년, 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능인 AJAX(Asynchronous Javascript and XML)가 XMLHttpRequest라는 이름으로 등장했다.
  • 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링 하는 방식으로 동작했다. 화면이 전환될 때마다 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 리 렌더링해 성능과 사용자 경험이 좋지 못했다.
  • 하지만, AJAX 등장으로 웹페이지에서 필요한 데이터만 서버로부터 전송받아 한정적으로 렌더링 하는 방식이 가능해져, 웹브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환이 가능해졌다.
• jQuery
  • 2006년 등장하여, 간편한 DOM 조작과 크로스 브라우징 이슈 어느 정도 해결되었다. 
• V8 자바스크립트 엔진
  • 자바스크립트로 웹 애플리케이션 구축 시도가 증가하면서 더욱 빠르게 동작하는 자바스크립트 엔진의 필요성이 대두되어 나오게 되었다. 
  • V8 자바스크립트 엔진으로 촉발된 자바스크립트 발전으로 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동했고, 이는 웹 애플리케이션 개발에서 프런트엔드 영역이 주목받는 계기가 되었다.
• Node.js
  • 2009년, 라이언 달이 발표한 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.
  • 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다.  
  • Node.js는 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋다. 따라서 데이터 실시간 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합하다. CPU 사용률이 높은 애플리케이션은 권장하지 않는다.
• SPA 프레임워크
  • 모던 웹 애플리케이션은 데스크톱 애플리케이션과 비교해도 손색없는 성능과 사용자 경험을 제공하는 것이 필수가 되었고, 더불어 개발 규모와 복잡도도 상승했다. 
  • 이전 개발 방식으로 복잡해진 개발 과정 수행이 어려워졌고, 이러한 필요에 따라 많은 패턴과 라이브러리가 출현했다. 그 덕분에 개발에 많은 도움을 줬지만 변경에 유연하면서 확장하기 쉬운 애플리케이션 아키텍처의 구축을 어렵게 했고, 필요적으로 프레임워크가 등장하게 된다. 
  • ex) Angular, React, Vue.js, Svelte ...

 

 

자바스크립트의 특징

• 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다.
• 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어다. 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결했다. (인터프리터 - 소스코드 즉시 실행, 컴파일러 - 컴파일과 실행단계가 분리되어 있어서 빠르게 동작)
• 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.