- 회원들이 추천해주신 좋은 글들을 따로 모아놓는 공간입니다.
- 추천글은 매주 자문단의 투표로 선정됩니다.
Date 21/11/05 15:13:36
Name   nothing
Subject   변화무쌍한 웹 기술 역시 톺아보기 - 1
태초에 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편에 계속

* Cascade님에 의해서 티타임 게시판으로부터 게시물 복사되었습니다 (2021-11-14 19:22)
* 관리사유 : 추천게시판으로 복사합니다.



10
  • 유용합니다!
이 게시판에 등록된 nothing님의 최근 게시물


목록
번호 제목 이름 날짜 조회 추천
1146 기타쓸까말까 고민하다 쓰는 육아템 3 33 + 엄마곰도 귀엽다 21/11/23 1145 25
1145 문화/예술회사 식당에서 만난 박수근 9 순수한글닉 21/11/19 1396 42
1144 일상/생각어느 유서깊은 양반가문 이야기. 17 Regenbogen 21/11/16 1238 35
1143 정치/사회개인적인 투자 원칙 방법론 공유 16 Profit 21/11/09 1613 14
1142 경제최순실로 인해 불거진 ODA 문제는 해결되었는가 5 정중아 21/11/08 1083 16
1141 IT/컴퓨터변화무쌍한 웹 기술 역시 톺아보기 - 1 16 nothing 21/11/05 1028 10
1140 창작개통령 1화 46 흑마법사 21/11/02 1272 27
1139 정치/사회검단신도시 장릉아파트에 대한 법개정을 추적해 봤습니다. 15 Picard 21/10/28 1532 8
1138 정치/사회다시 보는 사법농단 8 과학상자 21/10/19 1474 18
1137 일상/생각마치츄카町中華 6 向日葵 21/10/18 911 39
1136 꿀팁/강좌여자 생활한복 경험담+코디팁+쇼핑추천(부제:남편이여 선물하라) 38 흑마법사 21/10/12 1890 26
1135 일상/생각약간의 일탈과 음주 이야기 3 머랭 21/10/11 1087 19
1134 정치/사회IT 중소기업을 선택할 그리고 선택한 이들을 위한 -틀-의 조언 14 아재 21/10/07 2170 23
1133 정치/사회청소년, 정체성의 발전, 인종관계 15 소요 21/10/03 1302 29
1132 정치/사회산재 발생시 처벌에 대한 개인적인 경험 3 Picard 21/09/30 1011 25
1131 여행[스압/사진多]추석 제주 여행기 20 나단 21/09/27 954 24
1130 일상/생각합리적인 약자 9 거소 21/09/19 1950 32
1129 기타남자 곰타입의 옷배색에 관한 연구 43 흑마법사 21/09/15 1853 10
1128 게임월간 스타여캠 9월호 (비정기 간행) 25 알료사 21/09/18 1710 34
1127 역사뉴질랜드와 핵실험, 거짓말쟁이 프랑스. 6 코리몬테아스 21/09/18 1127 18
1126 기타물 반컵 12 쉬군 21/09/14 1014 62
1125 일상/생각손님들#2 - 할매 고객님과 자존심을 건 대결 27 Regenbogen 21/09/09 1540 47
1124 일상/생각그동안 홍차넷에서 그린것들 78 흑마법사 21/09/08 1902 29
1123 기타남자바지3종(청바지,검은바지,베이지면바지) 입는방법에 대한 연구 22 흑마법사 21/08/31 1910 17
1122 일상/생각사랑하는 소년 6 아시타카 21/08/29 1047 20
목록 이전 다음

+ : 최근 6시간내에 달린 댓글
+ : 최근 12시간내에 달린 댓글

댓글