[2024.04.23] 자바스크립트는 어떻게 웹 개발의 1인자가 되었나

이전글) 2024.04.22 - [TIL] - [2024.04.22] Javascript와 ES6의 차이를 아시나요?

 

1995년에 개발된 자바스크립트는 HTML, CSS와 함께 웹 페이지를 구성하기 위해 빠져서는 안 될 3대장으로써의 역할을 공고히 다지고 있으며, 거기엔 여러 비결이 숨겨져 있었습니다.

 

AJAX, 패러다임의 변화

  AJAX의 발견 이전에는 웹 브라우저가 서버로 요청을 전달하면, 서버로부터 받은 정보를 포함한 페이지 전체를 리렌더링 하는 방식으로 페이지를 그렸습니다. 때문에 지금만큼 인터넷이 빠르지 않았던 그 시절에는 페이지가 렌더링 되는 시간만큼 시간도 걸리고, 매번 서버에 요청하면 화면이 깜빡이는 데다가, 원하지 않던 부분까지 전부 새로 그려야 하니 성능적으로도 썩 좋지 못했습니다.

하나 받고 렌더링하고..

하지만 1999년 브라우저와 서버가 비동기(asynchronous) 방식으로 데이터 교환이 가능한 통신 기술인 AJAX가 세상에 등장하자, 렌더링 방식이 획기적으로 변화하였습니다. AJAX는 변경을 원치 않는 부분은 유지한 채, 원하는 부분만 서버로부터 데이터 값을 받아 부분적으로 렌더링 할 수 있도록 패러다임을 변화시켰습니다. 다만, 처음부터 유명해진 것은 아니었으나, 2005년 구글 Maps가 다른 플러그인 없이 AJAX로 구현되었음에도 끊기지 않고, 다른 데스크톱 애플리케이션처럼 자연스럽게 동작함을 밝히며 큰 유명세를 얻게 되었습니다. (단, 브라우저 렌더링 과정에 Ajax call이 추가됨으로 필연적인 약간의 성능 손해는 있었으나, 당시에는 이런 사소한걸 신경 쓸 사람은 없었다)

 

뛰는 JS에 날개를 달아줄 V8엔진

  자바스크립트는 사용자와 상호작용이 중요하기 때문에 인터프리터 방식을 사용합니다. 이는 컴파일 단계가 없기 때문에 실행 속도 측면에 있어서 장점이 있으나, 코드가 길어지면 길어질수록 속도가 느려지는 단점도 함께 동반합니다. 때문에 웹 브라우저 내 자바스크립트의 수행 속도를 높이는 자바스크립트 엔진의 필요성이 대두되었고, 이 기대를 충족시켜 준 것이 구글의 V8 자바스크립트 엔진입니다. C++로 작성된 V8 엔진은 다중 스레드 방식을 사용해 코드 실행 속도 및 메모리 관리 시스템이 매우 좋아졌으며, 이러한 발전은 과거 웹 서버에서 수행되던 로직들이 브라우저단에서도 실행될 수 있게 하여 프론트엔드가 엄연히 웹 개발의 한 영역으로써 부각되게 되었습니다.

진짜 날개처럼 생기지 않았나요?

 

Javascript의 특징

1. 객체지향 언어

 - 데이터와 함수를 객체라는 그룹으로 묶어 처리하며, 기능 단위로 여러 군데에서 재사용이 가능한 장점

 

2. 동적 타이핑

 - 프로그램이 실행되는 runtime 시점에 변수의 타입이 결정되어, 보다 유연한 코드 작성이 가능(단, 이것이 단점으로 작용하는 경우도 있어 명확히 타입을 명시하는 typescript가 많이 쓰임)

 

3. 함수형 프로그래밍 지원
 - 함수를 일급 객체로 지원, 고차 함수 지원 => 코드의 재사용성과 가독성 높임
 - 일급 객체(first-class object)란, 함수를 일반 값과 마찬가지로 변수에 할당하거나, 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있는 객체를 의미

// 함수를 변수에 할당
const add = function(a, b) {
  return a + b;
}

// 함수를 인자로 받는 함수
function calculate(func, a, b) {
  return func(a, b);
}

// 함수를 반환하는 함수
function getAddFunction() {
  return add;
}

// 함수를 일급 객체로 다루어 코드의 재사용성을 높임
console.log(calculate(add, 2, 3)); // 5
console.log(getAddFunction()(2, 3)); // 5

 - 고차 함수(higher-order function)란, 함수를 인자로 받거나, 함수를 반환하는 함수를 의미

// 고차 함수 예시: 함수를 인자로 받는 함수
function operate(func, a, b) {
  return func(a, b);
}

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

console.log(operate(add, 2, 3)); // 5
console.log(operate(multiply, 2, 3)); // 6

 

4. 비동기 처리 가능

5. 클라이언트와 서버 측에서 모두 사용 가능

 - 2009년 구글 V8 자바스크립트 엔진으로 빌드된 런타임 환경인 Node.js의 출시로, 브라우저의 자바스크립트 엔진 이에서만 동작하던 자바스크립트의 한계를 부수는데 일조하였습니다. 이로써 자바스크립트는 유일하게 한 언어로만 클라이언트와 서버를 구성할 수 있는 언어라는 타이틀을 얻었습니다.