- 회원들이 추천해주신 좋은 글들을 따로 모아놓는 공간입니다.
- 추천글은 매주 자문단의 투표로 선정됩니다.
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님의 최근 게시물


목록
번호 제목 이름 날짜 조회 추천
1161 경제인구절벽발 노동인력 부족 우려는 과장인가 31 카르스 22/01/12 1694 39
1160 일상/생각리을 이야기 21 아침커피 22/01/10 1000 65
1159 경제OECD 경제전망 - 한국 (전문번역) 7 + 소요 22/01/06 1189 21
1158 꿀팁/강좌인체공학적 사무 환경 조성하기 33 구글 고랭이 21/12/31 2046 30
1157 일상/생각중년 아저씨의 베이킹 도전기 (2021년 결산) (스압주의) 23 쉬군 21/12/31 803 31
1156 기타중세 판타지의 인종다양성, 시간의 수레바퀴(Wheel of time) 11 + 코리몬테아스 21/12/30 945 8
1155 정치/사회20대 대통령 선거 정책 공약 살펴보기 (각 후보자 1호 공약 + 선거관리위원회 공약 이슈트리) 23 소요 21/12/24 1661 12
1154 일상/생각구박이는 2021년에 무엇을 어떻게 먹었나 62 구박이 21/12/23 1750 71
1153 일상/생각도어락을 고친 것은 화성학과 치과보철학이었다 2 Merrlen 21/12/15 1432 30
1152 일상/생각헌혈하는 것의 의미 9 샨르우르파 21/12/14 829 23
1151 음악2021 걸그룹 35 헬리제의우울 21/12/13 1856 58
1150 일상/생각벨기에 맥주 오프모임에 참석하지 못해서 하는 벨기에 맥주 셀프시음회(어?) 10 세리엔즈 21/12/08 1246 22
1149 정치/사회노인 자살률은 누가 감소시켰나 10 구밀복검 21/12/06 2170 32
1148 기타서울대병원 응급실에 대한 단상 6 경계인 21/12/03 1922 14
1147 일상/생각둘째를 낳았습니다. 15 고양이카페 21/11/29 1439 31
1146 기타쓸까말까 고민하다 쓰는 육아템 3 33 엄마곰도 귀엽다 21/11/23 1901 25
1145 문화/예술회사 식당에서 만난 박수근 12 순수한글닉 21/11/19 2168 45
1144 일상/생각어느 유서깊은 양반가문 이야기. 18 Regenbogen 21/11/16 1908 35
1143 정치/사회개인적인 투자 원칙 방법론 공유 16 Profit 21/11/09 2369 15
1142 경제최순실로 인해 불거진 ODA 문제는 해결되었는가 5 정중아 21/11/08 1586 16
1141 IT/컴퓨터변화무쌍한 웹 기술 역시 톺아보기 - 1 16 nothing 21/11/05 1561 10
1140 창작개통령 1화 47 흑마법사 21/11/02 1806 27
1139 정치/사회검단신도시 장릉아파트에 대한 법개정을 추적해 봤습니다. 15 Picard 21/10/28 2024 8
1138 정치/사회다시 보는 사법농단 8 과학상자 21/10/19 1807 19
1137 일상/생각마치츄카町中華 6 向日葵 21/10/18 1301 39
목록

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

댓글