태초에 HTML 이란 놈이 있었습니다.
많이들 아시겠지만 웹의 근간이 되는 언어고 현재까지도 활발하게 사용되고 있습니다.

근데 이 HTML 이라는 언어를 뜯어보면 정말 간단하기 그지없습니다.
그냥 문서를 꾸며주고 구조화시켜주는 역할 정도에요.

예를 들어, "안녕하세요" 라는 문자열을 앞뒤로 <b>를 넣어 "<b>안녕하세요</b>" 라고 넣으면 웹 브라우저는 저 문자열을 굵은 폰트로 보여줍니다.
<h> 으로 묶으면 제목이라는 의미를 주면서 폰트 크기도 커지구요.

그럼 왜 웹은 이런 종류의 문서형 언어(?)를 사용하게 될까요?
그 이유는, HTML 이란 언어 자체가, 아니 웹 자체가 원래 문서를 공유하기 위한 시스템이었거든요.
그 부분까지 타고 올라가기엔 너무 거슬러 올라가기도 하고 저도 잘 몰라서 그냥 스킵하겠습니다.
아무튼 그래서 웹은 원래 문서를 공유하기 위한 시스템이고
그래서 HTML 자체도 그러한 웹의 특성을 반영하기 위해 정적인 문서형 언어(?)로 구성되었습니다.

그러다 90년대 중반에 넷스케이프라는 웹 브라우저 회사에서 자바스크립트라는 언어를 만들어냅니다.
앞선 이유로 HTML 굉장히 정적이었는데 여기에 동적인 요소들을 넣고 싶었나봐요.
사실 이름도 원래는 자바스크립트가 아니었습니다.
원래는 "모카"였다가 다시 "라이브 스크립트"로 변경이 됩니다.
그러다가 다시 "자바 스크립트"로 변경이 됩니다.
이유는 정확히 알 수는 없으나, 당시 막 핫했던 "자바"의 인기 덕에 좀 묻어가려고 했던거 아니냐.. 하는 이야기가 좀 있습니다.

아무튼 웹에 자바스크립트라는 언어가 들어오긴 했는데 초반에는 이게 많이 쓰이지는 않았습니다.
애초에 이걸로 할 수 있는게 많이 없기도 했거든요.
90년대나 2000년대 초반에 인터넷을 접해보셨던 분들이면 어떤 홈페이지에 들어갔을 때 마우스 포인터가 샤방샤방한 모습으로 바뀐다던지
마우스 포인터 뒤에 별들이 쫓아다닌다던지 이런 경험을 해본 분들이 있으실껀데요.
이게 다 자바스크립트로 만들었던 부분들이었습니다.
그 외에 그 시대에 자바스크립트로 어떤 시도들이 있었는지는 잘 모르겠어요.
있더라도 사실 오늘날과 비교해서는 아주 제한적인 시도들만 있었던 걸로 알고 있습니다.

그러다가 90년대말에 XMLHttpRequest 라는 놈이 등장합니다.
MS 에서 자사 브라우저인 IE 에 집어넣었던 기능으로 기억합니다.
이건 뭐 새로운 언어 까지는 아니고 그냥 자바스크립트에서 사용할 수 있는 기능 정도로 이해하시면 될 것 같습니다.
이걸 가지고 뭘 할 수 있었냐면, 자바스크립트가 HTTP 요청을 할 수 있게 됩니다.
HTTP 요청이란건 웹 브라우저 주소창에다가 URL 을 치고 엔터를 땅 때리면 해당 URL 로 요청을 보내게 되는데 이게 HTTP 요청입니다.
원래 이 HTTP 요청이 발생하면 페이지가 새로고침 되어야 합니다.
새로운 페이지로 이동하던가 하는 동작이기 때문에요.
근데 그렇게 하지 않고도 그냥 자바스크립트에서 HTTP 요청으로 가져온 데이터를 사용할 수 있게 됩니다. (일부 제한은 있습니다.)
하지만 이게 포텐을 터뜨리는 건 몇 년 후가 됩니다.

2000년대 중반, 구글맵이 세상에 등장합니다.
그리고 전세계 개발자들이 깜짝 놀라게 됩니다.
아니, 웹에서 이런게 가능했었나? 이게 어떻게 되지? 했겠죠.
그 전까지는 사실 모든 웹 페이지들이 "웹 문서"의 영역에 머물러 있었습니다.
근데 구글맵을 들어가보면 이건 암만봐도 "웹 문서"의 영역이 아니거든요.
이건 누가봐도 애플리케이션 이거든요.
이때부터 "웹 애플리케이션"의 시대가 열립니다.

사람들이 막 궁금했겠죠. 아니 웹에서 이런 인터랙티브한 동작들을 어떻게 구현했지?
그래서 까보니 아니나 다를까 앞서 90년대 중반에 처음 나왔던 XMLHttpRequest 들을 사용하고 있었습니다.

예를 들어 이런겁니다.
사용자가 구글맵을 켜서 한국 지도를 보고 있다고 가정해봅시다.
그러다가 태평양을 건너서 미국으로 갑니다.
그럼 브라우저는 미국에 대한 지도 데이터가 필요합니다.
근데 원래는 이걸 가져오려면 앞서 이야기했던 것처럼
페이지가 새로고침 되면서 다시 로딩을 해야되는데
구글맵을 보면 그냥 스무스하게 미국 지도를 로딩하잖아요.
이 뒷단에서는 앞서 IE 에서 추가되었던 XMLHttpRequest 를 이용해 자바스크립트에서 미국 지도 데이터를 가져온 후에 화면의 일부만 업데이트 하고 있습니다.

구글맵을 통해 이런 새로운 기법들이 발견되면서 이름까지 붙여집니다.
이름하야 Ajax.
우리말로 읽을땐 에이작스, 혹은 아약스 등으로 읽힙니다.
이 Ajax 는 웹 전체에 큰 충격을 줍니다.
ajax 를 잘 이용하면 사용자 ux 에 큰 도움을 줄 수 있거든요.
ajax 이전의 웹에서는 새로운 데이터를 불러올 때마다 페이지가 새로고침 되었습니다.
하얀 페이지가 깜빡거리면서 화면의 머리끝에서 발끝까지의 내용을 새로 그립니다.
당시만해도 지금처럼 인터넷이 빠른 시대도 아니었으니 이게 엄청 답답했습니다.
근데 ajax 를 이용하면 이 새로고침이 꼭 필요가 없었거든요.
그냥 ajax로 원하는 데이터를 가져와서 화면 중 일부만 새로 그려줄 수 있게 되었습니다.
그야말로 혁명이었습니다.

이때쯤 jQuery 라는 물건도 나옵니다.
얘는 자바스크립트를 사용할 때 같이 사용할 수 있는 라이브러리 같은건데요.
앞서 이야기했던 ajax 라던가 다른 자주 사용되는 동작들을 간편하게 사용할 수 있었습니다.
미리 스포를 좀 드리자면 이놈은 향후 10년간 거의 전세계 웹을 지배하게 됩니다.
안쓰이는데가 없었어요.
자바스크립트 = jQuery 같이 생각하는 분들도 많아집니다.
그리고 아직도 많이 쓰이긴 쓰여요.
지금에선 개발자들 사이에서 걷어내야 할 구시대의 레거시 같은 이미지를 가지고 있지만
사실 간단한 페이지에서는 이만큼 편한게 없거든요.

jQuery 가 처음 나온건 2000년대 중반이었는데
2008년까지는 압도적인 지위를 가지지는 못했습니다.
왜냐면 제가 딱 08년도에 군대를 갔는데 그 전까지 그랬거든요.
그냥 꽤 인기있는 라이브러리 중 하나였습니다.
근데 전역하고 나오니 jQuery 가 아주 그냥 군림하고 있더라구요.




... 2편에 계속