❤️‍🔥자바스크립트 딥다이브❤️‍🔥 1월에 휴파님과 지휴와 같이 스터디를 하려고 산 책인데... 6장까지쯤 읽었으려나 프로젝트도 하고 42과제도 바빠지게 되면서 중단하게 되었다!

👊 이번에는 꼭 끝까지 읽으리라!!! 이번 프로젝트로 자스에 푹 빠지신 데킴님과 지휴와 함께 스터디를 다시 시작하게 되었다.

1.1 프로그래밍이란?

프로그래밍 전에 프로그램을 알아보자!

프로그램은 컴퓨터에서 실행될 때 특정 작업을 수행하는 일련의 명령어의 모음이다. 대부분의 프로그램은 하드디스크에 정적인 상태(바이너리형식 파일)로 저장되어 있다가, 사용자가 실행시키면 RAM 메모리를 할당하여 프로그램이 동적으로 실행되는 것을 프로세스라고 부른다. 스레드는 프로세스를 실행했을 때, 실제로 일하는 주체이다.

프로그래밍은 컴퓨터에게 이러한 프로그램의 실행을 요구하는 커뮤니케이션이다. 프로그래밍을 잘 하기 위해서는 문제와 해결방안을 정의할 필요가 있다. 컴퓨터처럼 논리적이고 효율적으로 사고하고, 컴퓨터에게 요구사항을 명확하게 전달하기 위해서는 컴퓨팅 사고(Computational Thinking)를 통한 문제 해결 능력이 필요하다.

1.1 프로그래밍 언어

🤔 컴퓨터와의 커뮤니케이션? 사람이 컴퓨터가 쓰는 기계어를 사용하기란 어렵다. 그래서 컴퓨터와 커뮤니케이션을 하고, 명령을 전달하기 위한 방법으로 프로그래밍 언어를 사용한다.

😲 그렇담 컴퓨터는 어떻게 프로그래밍 언어를 기계어로 번역할 수 있을까? 그 번역기 역할을 컴파일러(compiler)와 인터프리터(interpreter)가 해준다.

⁉️ 컴파일러(compiler)와 인터프리터(interpreter)의 차이

그럼 이 둘의 차이점을 알아보자. 가장 큰 차이는 번역 방식이다. 컴파일러는 프로그램 실행 전에, 전체 파일을 스캔해 한번에 번역한다. (42과제를 할 때 gcc 로 컴파일 하면 중간에 오류가 있으면 실행 자체가 되지 않는 것으로 알 수 있다.)
반면, 인터프리터는 프로그램 실행시에, 코드를 한 문장씩 번역한다.

특징	컴파일러	인터프리터
번역방법	프로그램 전체를 번역	실행되는 문장(라인) 단위로 번역
시간	컴파일 완료 후 빠르게 실행됨	실행 중 번역하기 때문에 느림
오류	실행 전 오류를 알 수 있음	실행 후 오류를 알 수 있음
메모리	프로그램에 컴파일러를 위한 메모리가 필요하지 않음	코드가 실행되는 동안 인터프리터 또한 메모리에 존재함
사용	프로덕션 환경에 적합	프로그램 및 개발 환경에 적합
언어	C, C++, C#, Java 등등	PHP, Ruby, JavaScript 등등

그렇담 자바스크립트는? 자바스크립트는 인터프리터 언어이다. 하지만, 자바스크립트도 컴파일 과정을 거친다. 자바스크립트 엔진 내부에서 컴파일이 필요한 경우에 컴파일을 실행한다. 이렇게 혼합되어 사용하기 때문에 성능을 향상시켰다.

1.3 구문과 의미

프로그래밍 언어는 구문(syntax)과 의미(semantics)의 조합으로 표현된다.

언어는 문법에 맞는 문장을 구성하는 것과 더불어 의미를 가지고 있어야 제대로 역할을 할 수 있다. 프로그래밍 언어도 해당 문법에 부합하는 것은 물론이고, 요구사항(문제)가 해결되어야 의미가 있다.

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

2.1 자바스크립트의 탄생

자바스크립트는 개발자 브래던 아이크가 웹페이지의 보조적인 기능을 수행하는 경량 프로그래밍 언어로 만들었다.

2.2 자바스크립트의 표준화

마이크로소프트의 “JScript” VS 넷스케이프 커뮤니케이션즈의 “JavaScript”

1996년, 마이크로 소프트에서 자바스크립트의 파생 버전인 "JScript"를 인터넷 익스플로러(v3.0)에 탑재한다. 이후 두 회사는 자사 브러우저에서만 동작하는 기능을 추가하기 시작한다. 그로 인해 크로스 브라우징 이슈가 발생하게 되어, 모든 브라우저에서 정상 작동하는 웹페이지를 개발하기 어려워졌다.

이러한 문제점 때문에 표준화된 자바스크립트의 필요성이 대두되었다. 결국 1997년 7월 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA 인터내셔널에서 표준화된 자바스크립트 초판(ECMAScript 1)이 출시된다. 이후 여러 변화를 거쳐가며 범용 프로그래밍 언어로 거듭나게 된다.

2015년에 공개된 ECMAScript 6(ES6)은 let/const 키워드, 화살표 함수, 클래스, 모듈 등과 같이 범용 프로그래밍 언어로서 갖춰야 할 기능들을 대거 도입한다.

2.3 자바스크립트의 역사

초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로만 사용되었다. 이 시기의 대부분의 로직은 주로 웹 서버에서 실행되었고, 브라우저는 전달 받은 데이터를 렌더링하는 역할만 했다.

⁉️ 렌더링(rendering)
렌더링이란 HTML, CSS, 자바스크립트로 작성된 문서를 해석하여 브라우저에 시각적으로 출력하는 것을 말한다. 초창기의 자바스크립트는 SSR방식으로 렌더링 되었다.

⁉️ SSR(Server Side Rendering)
웹 페이지를 브라우저가 아닌 서버에서 렌더링한다. 서버에서 데이터를 HTML로 변환하여 브라우저로 전달하여 렌더링한다.

✅ Ajax

✅ jQuery

✅ V8 자바스크립트 엔진

✅ Node.js

✅ SPA 프레임워크

2.4 자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준 사양이다. 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수 등 핵심 문법을 규정한다. 자바스크립트는 이 기본 뼈대와 더불어 브라우저가 별도 지원하는 클라이언트 사이드 Web API(DOM, fetch, Canvas, XMLHttpRequest 등)을 아우르는 개념이다.

2.5 자바스크립트의 특징

자바스크립트는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 기본 문법은 C, 자바와 유사하며, 셀프에서는 프로토타입 기반 상속을, 스킴에서는 일급 함수의 개념을 차용했다.

자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpreter Language)이다. 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 인터프리터는 소스코드를 즉시 실행한다는 장점을 가지고 있는데, 앞서 보았듯 모던 자바스크립트 엔진은 이를 결합하여 인터프리터의 느린 속도를 개선했다.

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다. 자바스크립트는 객체지향 언어가 아니라고 오해를 받기도 하지만, 클래스 기반 객체지향 언어보다 효율적이고 강력한 프로토타입 기반의 객체지향 언어이다.

2.6 ES6 브라우저 지원 현황

브라우저별 ES6 지원 현황 : https://kangax.github.io/compat-table/es6/

구형 브라우저는 대부분 ES6을 지원하지 않지만 이를 제외한 모던 브라우저는 높은 비율로 ES6을 지원하고 있다.

구형 브라우저를 사용하거나 브라우저에서 지원하지 않는 최신 기능을 사용할 때는 바벨(Babel)과 같은 트랜스파일러(Transpiler)를 사용해 구현한 소스코드를 다운그레이드 해야 할 필요가 있다.

⁉️ 트렌스파일러(Transpiler)
트렌스파일러는 같은 언어를 문법적으로 변환해주는 도구를 말한다. 컴파일러는 프로그래밍 언어를 머신 언어로 변형하여 언어 자체가 바뀌지만, 트렌스파일러는 같은 언어를 문법적으로만 변형한다.
(😲 내가 프로젝트에서 쓴 TypeScript와 SASS도 트랜스파일러이다.)

참고

https://dbr.donga.com/graphic/view/gdbr_no/6195
https://blog.bitsrc.io/how-does-javascript-really-work-part-1-7681dd54a36d
https://www.guru99.com/difference-compiler-vs-interpreter.html