모던자바스크립트 Deep Dive(이웅모 지음)에서 발췌한 내용을 정리해보자

프론트엔드개발자가 되기 위해 자바스크립트라는 언어를 공부를 시작했다. 컴파일러는 뭐고, 랜더링은 또 무엇인지 생소한 말들과 개념이 많아 모던자바스크립트 Deep Dive(이웅모 지음)라는 책을 구입했다.
이 책을 구입한 이유는 목차에 궁금했던 부분들에 대한 답이 담겨있었고, "들어가며"에서 저자가 언급이 마음에 들었기 때문이다.

"프로그래밍 언어의 기본 개념과 동작 원리를 정확하게 이해하는 것이 중요합니다. 왜냐하면 프로그래머의 역할은 요구사항을 기반으로 문제를 해결하기 위한 방안을 고안하고, 이를 코드로 구현하는 것인데, 이 때 자신이 구현한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측가능하며 명확히 설명할 수 있어야 하기 때문입니다."

자바스크립트를 본격적으로 공부하기 앞서 이 책에서 짚어주는 프로그래밍의 기본개념에 대해 정리하고, 이 책과 패스트캠퍼스 온라인 강의를 병행하여 JS를 익혀나갈 예정이다.

프로그래밍이란

프로그래밍 언어

프로그래밍 언어란 컴퓨터와의 대화(명령)에 사용되는 일종의 표현 수단. 사람과 컴퓨터(컴파일러, 인터프리터) 모두가 이해할 수 있는 약속된 형태의 인공어.

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

컴파일러, 인터프리터
프로그래밍 언어를 사용해 프로그램을 작성한 후, 그것을 일종의 번역기를 이용하여 컴퓨터가 이해할 수 있는 기계어로 변환하는데 이 번역기를 컴파일러 혹은 인터프리터라고 한다.

결국 프로그래밍이란

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

자바스크립트란?

자바스크립트의 탄생

1995년, 넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정하고 개발한 것이 자바스크립트.

현재 모든 브라우저의 표준 프로그래밍 언어로 자리잡았다.

자바스크립트의 표준화

1996년 8월, MS는 JS의 파생버전인 "JScript"를 인터넷 익스플로러 3.0에 탑재함. 문제는 JScript와 자바스크립트가 표준화되지 못하고 적당히 호환되었다는 것. 즉, 넷스케이프 커뮤니케이션과 MS는 자사에서만 동작하는 기능을 경쟁적으로 추가하기 시작.
이로 인해, 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작. 결과적으로 모든 브라우저에서 정상적으로 동작하는 웹페이지를 개발하기가 무척 어려워졌다.

결국 JS의 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 표준화된 JS의 필요성이 대두되었다.

1996년 11월, 넷스케이프 커뮤니케이션즈는 ECMA 인터네셔널에 자바스크립트의 표준화를 요청하였다. 1997년 7월, ECMA-262라 불리는 표준화된 JS 초판 사양이 완성되고, 상표권 문제로 JS는 ECMAScript로 명명되었다.

ECMAScript 버전별 특징은 다음과 같다.

자바스크립트 성장의 역사

초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위한 용도로 사용되었다. 대부분의 로직은 주로 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준이었다.

렌더링이란 HTML, CSS, JS로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것을 말한다. 때로는 서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정(SSR; Server Side Rendering)을 가르키기도 한다.

Ajax

1999년, JS를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 XMLHttpReqeust라는 이름으로 등장했다. 이전의 웹페이지는 웹페이지 전체를 처음부터 다시 렌더링했다. Ajax의 등장은 이전의 패러다임을 획기적으로 전환했다. 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이 가능해진 것이다.
2005년, 구글은 웹 브라우저에서 JS와 Ajax를 기반으로 동작하는 구글 맵스를 발표했다. 이는 데스크톱 애플리케이션과 비교했을 때 손색이 없을 정도로 성능과 브드러운 화면 전환 효과를 보여준 것이다.

JQuery

2006년, DOM방식을 쉽게 제어할 수 있는 JQuery의 등장. 크로스 브라우징 이슈도 어느 정도 해결.

V8 자바스크립트 엔진

구글 맵스를 통해 웹 애플리케이션 프로그래밍 언어로서의 가능성이 확인된 JS. 더욱 빠르게 동작하는 JS 엔진의 필요성이 대두됨. 2008년 구글의 V8 JS 엔진 등장.
V8 JS 엔진으로 촉발된 JS 발전은 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동했고, 이는 웹 애플리케이션 개발에서 프론트엔트 영역이 주목받는 계기로 작용했다.

Node.js

Node.js는 구글 V8 JS 엔진으로 빌드된 JS 런타임 환경이다. Node.js는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다.
Node.js는 다양한 플랫폼에 적용할 수 있지만 서버 사이드 애플리케이션 개발에 주로 사용되며, 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공한다.

Node.js의 등장으로 JS는 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 프로그래밍 언어가 되었다. 이제 JS는 크로스 플랫폼을 위한 가장 중요한 언어로 주목받고 있다. 웹은 물론 모바일 하이브리드 앱, 서버 사이드, 데스크톱, 머신러닝, 로보틱스 환경을 위한 프로그래밍 언어로서 세계에서 가장 인기있는 프로그래밍 언어이다.

SPA 프래임워크

모던 웹 애플리케이션은 개발의 규모와 복잡도가 상승했고, 이러한 필요에 따라 많은 패턴과 라이브러리가 출연했다. 덕분에 변경에 유연하면서 확작하기 쉬운 애플리케이션 아키텍처의 구축이 어렵게 됐고 필연적으로 프레임워크가 등장하게 되었다.

Angular, React, Vue.js, Svelte 등 다양한 프레임워크/라이브러리 등장

JS와 ECMAScript

ECMAScript는 JS의 표준사양인 ECMA-262를 말하며, 프로그래밍 언어의 값, 타입, 객체와 property, 함수, 표준 빌트인 객체 등 핵심 문법을 규정한다. 각 브라우저의 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 JS 엔진을 구현.

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

ES6 브라우저 지원 현황

자바스크립트 개발환경과 실행방법

자바스크립트 실행환경

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

한 가지 주의할 점은 브라우저와 Node.js는 용도가 다르다는 것이다. 브라우저는 HTML, CSS, JS를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이지만 Node.js는 브라우저 외부에서 JS 실행 환경을 제공하는 것이 주된 목적이다. 따라서 브라우저와 Node.js 모두 JS의 코어인 ECMAScript를 실행할 수 있지만 브라우저와 Node.js에서 ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다.

웹 브라우저

개발자 도구

콘솔

개발자 도구의 Console 패널은 JS 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳이다.
구현 단계에서 디버깅을 실행하는 것보다 간편하게 코드의 실행 결과를 확인하면서 개발을 진행하기 위해 console.log 메서드를 사용하는 경우가 많다.
JS 코드를 실행하는 중에 에러가 발생하면 에러의 내용이 콘솔에 출력된다.

디버깅

Source 패널을 사용하여 JS 코드를 디버깅 할 수 있다.

코드의 실행 결과 중 에러가 발생한 위치에 빨간 밑줄이 표시되고, 그 위에 마우스를 올려 보면 에러 정보가 표시된다. 에러가 발생한 코드 왼쪽의 라인 번호를 클릭해 브레이크포인트를 걸고 다시 버튼을 클릭하면 디버깅 모드로 들어간다.

디버깅은 먼저 에러 메세지를 확인하고 에러가 발생한 원인을 제거하는 것이다.