웹 페이지는 HTML, CSS, JavaScript 총 3가지 언어를 사용해서 작성한다.
HTML을 통해 페이지의 골격을 만들고, CSS를 통해 페이지를 예쁘게 스타일링 하고, JavaScript를 통해 페이지에 여러 가지 동작을 추가하여 생동감을 불어넣는다.
자바스크립트는 브라우저 환경에서 동작하는 프로그래밍 언어로, 1995년에 처음 등장하였다. 이후 나날이 발전함에 따라서 2009년 탄생한 Node.js를 통해, 브라우저 뿐만 아니라 컴퓨터 환경에서도 자바스크립트를 사용할 수 있게 되었다. 자바스크립트 언어 하나만으로도 컴퓨터에 있는 파일들을 읽고 쓰고, 네트워크 통신을 하고, 백엔드 서버까지 만들 수 있게 된 것이다.
이번 포스팅에서는 자바스크립트란 무엇인지,
전체적인 개념과 특징에 대해 정리하며 복습하는 시간을 가져보고자 한다.
⚙️ 자바스크립트 엔진
자바스크립트 코드가 브라우저 위에서 동작하기 위해서는 브라우저 자체에 내장되어져 있는 자바스크립트 엔진이 필요하다. 자바스크립트 엔진이 동작하는 시간 즉, 런타임(Runtime) 시에 코드를 한 줄씩 번역해서 실행하게 되는데, 이러한 역할을 하는 것을 인터프리터 라고 한다. 이처럼 소스 코드를 인터프리터로 한 줄씩 번역하면서 실행하는 방식으로 동작하는 언어를 인터프리터 언어 혹은, 스크립트 언어라고 한다.
인터프리터 언어의 종류로는 JavaScript, Python, PHP 등이 있다.
🖥️ 컴파일러
보통 다른 프로그래밍 언어에서는 컴파일러(Compiler)가 필요하다. JAVA 같은 경우, 코드를 컴퓨터에서 실행하기 위해서는 컴파일러를 통해 모든 코드를 컴퓨터가 이해할 수 있는 실행 파일로 변환해주는 과정을 거쳐야 한다. 이러한 과정을 컴파일링(Compiling) 이라고 한다. 컴파일링을 거친 후, 변환된 파일을 이용하여 컴퓨터에서 바로 실행할 수 있게 되는 것이다. 이처럼 소스 코드 전체를 기계어로 변환한 뒤, 번역된 코드를 실행하는 방식으로 동작하는 언어를 컴파일 언어라고 한다.
컴파일 언어의 종류로는 TypeScript, JAVA, Kotlin, C, C++ 등이 있다.
- 컴파일러 - 실행하기 전에 모든 코드를 번역하는 과정을 거쳐야 함
- 인터프리터 - 일단 실행을 먼저 해놓고, 필요할 때마다 한 줄씩 번역함
👀 인터프리터 VS 컴파일
인터프리터 언어는 동적 타입 언어(Dynamically Typed)로 런타임 시에 타입이 동적으로 결정되는 반면, 컴파일 언어는 정적 타입 언어(Statically Typed)로 컴파일 시간에 타입이 정적으로 결정된다.
각각의 장단점은 다음과 같다.
📍 인터프리터 언어
- 장점 - 컴파일 과정을 거치치 않고 바로 실행이 가능하다.
- 단점 - 번역과 실행이 동시에 이루어지기 때문에 실행 속도가 비교적 느리다.
(물론 자바스크립트 엔진도 시간이 갈수록 성능에 최적화가 되어서 인터프리터 치고 비교적 빠르게 실행할 수 있으므로 크게 걱정할 필요는 없다.)
📍 컴파일 언어
- 장점 - 컴파일이 완료된 실행 파일은 실행 속도가 굉장히 빠르다.
- 단점 - 처음 코드를 실행하기 전 컴파일 단계에서 시간이 오래 걸린다.
📖 ECMAScript
모든 브라우저는 저마다의 엔진을 가지고 있다.
- 크롬(Chrome), 엣지(Edge) - V8
- 사파리(Safari) - JavaScript Core
- 파이어폭스(Firefox) - SpiderMonkey
컴퓨터에서 자바스크립트를 사용할 수 있게 해준 Node.js도
크롬 브라우저에서 사용하는 V8 엔진을 동일하게 사용하고 있다.
이런 브라우저 엔진들이 자바스크립트 코드를 실행하기 위해서는 공통된 규격이 필요한데, 이 규격을 정의한 것이 바로 ECMAScript 이다. 즉, 자바스크립트 문법의 표준 사항을 명시한 규격문이라고 생각하면 된다. 자바스크립트 언어로 프로그래밍을 하기 위해서는 ECMAScript에 맞게 코딩을 해야 하고, 엔진도 이에 맞춰서 구현되어 있기 때문에 서로 호환이 가능한 것이다.
ECMAScript의 버전은 브라우저 자바스크립트가 처음 탄생한 1995년도부터 현재까지 계속 변경되어왔으며, 버전 별로 사용할 수 있는 문법이 달라진다.
(BABEL을 이용하면 버전 정보에 상관 없이 프로그래밍을 할 수 있다.)
버전 6부터 ES6 라고 불리는 최신 문법이 대거 등장하면서 큰 변화가 일어났다.
class, for...of, let, const, map, set 등이 이 때 추가되었다. 즉, 자바스크립트 최신 ES6+ 문법이라 함은 2015년 발표된 ECMAScript 버전 6부터 추가된 문법들을 말하는 것이다.
🤔 JavaScript
그래서 자바스크립트란 도대체 무엇인가?
위키피디아(Wikipedia)에서는 자바스크립트를 다음과 같이 정의하고 있다.
- 가볍고, 타입이 동적으로 결정되는 dynamic 스크립트 언어이다.
- 인터프리터를 이용하여 실행하는 just-in-time compiled 언어이다.
- 자바스크립트 엔진이 있는 곳이라면 어디에서든지 사용할 수 있다.
- 일급 함수를 가지고 있다.
- 프로토타입을 기반으로 한 멀티 패러다임이다.
- 객체 지향 / 절차적 / 함수형 프로그래밍 모두 표현할 수 있다.
- 한 번에 하나의 일만 수행할 수 있는 싱글 스레드 환경 언어이다.
-위키백과
자바스크립트 언어 자체만으로는 할 수 있는 게 많이 없다. 언어라는 것은 애플리케이션을 만들기 위해 필요한 로직을 특정한 문법을 이용해서 나타내는 도구에 불과하기 때문에, 문법을 배운다고 해서 모든 것을 다 할 수 있는 건 아니다.
DOM APIs, Network APIs, Audio/Video APIs, Storage APIs..
console.log, setTimeout, fetch 등..
이러한 API들은 전부 자바스크립트 내부에 포함된 것이 아닌, 브라우저에서 제공하는 Web APIs에 포함된 내용들이다. 즉, 자바스크립트는 단순히 로직을 표현하기 위한 조건문이나 반복문 등의 문법만을 가지고 있을 뿐이다.
따라서 자바스크립트를 통해 다양한 작업을 수행하기 위해서는,
자바스크립트 외부에 있는 호스트 환경에서 제공하는 API를 활용해야 한다.
자바스크립트가 구동되는 플랫폼을 호스트(host) 라고 한다. 호스트는 브라우저, 노드, 심지어는 커피 머신이 될 수도 있다. 각 플랫폼마다 특정한 기능을 제공하는데, 이를 호스트 환경(host environment) 이라고 한다.
😊 마무리하며
자바스크립트를 처음 접했을 때는 도대체 이게 무슨 소리인가 했었는데.. 시간이 지난 지금 내용을 다시 보니, 이게 이런 말이었구나~ 하면서 저절로 이해가 되었다. 참 신기한 일이다. 역시 뭐든 배우면 된다. 아무리 어렵고 복잡하게 느껴져도, 직접 부딪히면서 계속 사용해보다 보면 언젠가는 내 것이 된다. 왠지 뿌듯한 이 느낌.. 🚀
앞으로 자바스크립트(JavaScript)의 기본 문법 및 사용법, 내부 구현 사항과 활용 예제들을 차근차근 정리해나갈 예정이다. 기나긴 여정이 되겠지만.. 기록만큼 값진 자산은 없다고 생각하기에.. 미래의 나를 위해 복습 차원으로 끝까지 완주해보려 한다. 화이팅, 꼭 멋진 프론트엔드 개발자가 되자!
