javascript- 속깊은 Javascript [1. 웹과 자바스크립트]

javascript- 속깊은 Javascript [1. 웹과 자바스크립트]

이 블로그 포스팅은 루비페이퍼의 속깊은 javascript를 읽고 학습내용을 정리한 글입니다.

| 시작하기에 앞서

• 자바스크립트를 학습하고 있는 와중에, 왜 자바스크립트를 쓰게 됬는지, 어떠한 역할을 하고있는지에 대한 질문에 대해 답하라고 하면, 명확한 답변을 나는 내지 못하고 있다고 생각했다. 이러한 부분에 대한 답변에 해당하는 부분이 책의 1단원에 정리되어 있었던 것 같다. 그리고 웹과 자바스크립트가 어떻게 밀접하게 관계를 가져왔는지도 알아보자.

| 1. 자바스크립트의 어제와 오늘

• 개발환경의 변화

예전에는 자바스크립트를 디버깅 할때 alert 창을 띄워가며 했었다면, 지금은 브라우저에 기본으로 내장된 다양한 디버깅 툴들이 등장하게 되었고, IDE들도 등장하며 자바스크립트를 개발하는 환경이 크게 발전했다. 따라서 이제는 자바스크립트가 "다양한 기능을 쉽게 구현할 수 있는 언어"로 재발경 되어가고 있다고 한다.

• 자바스크립트와 ECMAScript

처음에는 ECMAScript라는 단어가 입에 잘 달라붙지도 않고, 그개념에 대해서 모호했다. 이에대해 살펴보면, 자바스크립트는 원래 1995년 넷스케이프에서 Brendan Eich가 "Mocha"라는 이름으로 2주간 만들어낸 언어로 시작해 라이브스크립트라는 이름으로 공개했다고 한다. 

그리고 넷스케이프와 썬 마이크로시스템즈가 협업하며, 자바스크립트로 바꿔 불렀다고 한다. 마이크로소프트에서는 이에 대응해 Jscript라는 것을 만들었다고도 한다. Jscript는 자바스크립트와 서로비슷하지만 특징이 다르다고 한다. 그리고 일부 특징들이 혼합되어 자바스크립트 표준인 ECMAScript라는 이름으로 표준화 작업을 진행했다고 한다.

자바스크립트가 아닌 ECMAScript라는 이름으로 표준화된 이유는 넷스케이프에서 자바스크립트의 표준을 잡으려고 ECMA(European Computer Manufacturers Association)에 표준화 작업을 요청했다고 한다. 이때 자바스크립트라는 이름을 사용하려 했지만 썬과의 라이센스 계약 때문에 ECMAScript라는 이름으로 표준화 작업을 진행했다고 한다.

| 2. 웹 개발 방법론의 변화

월드와이드웹이 처음 나오고 웹의 개발 방법론은 꾸준히 변화해왔다고 한다. 웹과 자바스크립트는 함께 발전해 왔기 때문에 자바스크립트 역시 그 역할이나 위치또한 변화해 왔으므로 웹 개발 방법론이 어떻게 변화해 왔는지 확인해보자.

• 초기 웹 개발 방법론

웹 환경에서는 대부분 정적인 정보를 제공하는 웹페이지가 주를 이루었다. 그러나 검색 포털이나 이메일처럼 동적인 페이지를 생성하는 서버 언어또한 존재했다고한다. 가장 많이 활용되었던 언어는 perl 그리고 c 였다고 한다. c로 웹 서버단을 만들었다니 꽤 흥미로웠다 ㅋㅋ 그리고 이러한 언어들로 CGI(Common GateWay Interface)를 구현해 동적인 데이터를 구현했다고 한다.

그리고 이때는 단순 정보 제공을 위한 HTML 페이지로 이루어진 웹사이트가 많아서 데이터 관리가 적극적으로 이루어지지 않았다고 한다. 그렇기 때문에 자연스레 파일시스템이나 데이터베이스 서버의 역할은 작을 수 밖에 없었던 것 같다. 

고속 인터넷이 보급되기 시작하면서 웹에 다양한 미디어들이 나타나고, 플래시가 등장했다고 한다. 그리고 이때부터, 웹개발의 범주가 커지면서 '웹마스터' 즉 혼자서 만들고, 디자인하고 관리하는것이 아닌 클라이언트 개발자,서버개발자,웹디자이너로 세분화 되기 시작했다고 한다.

이때부터, 플래시와 activeX가 등장하면서 사용자들간의 커뮤니케이션 역시 활성화 시키면서 그들이 남기는 데이터에 대한 효율적인 관리가 필요해지기 시작했다고 한다.

• 웹 프로그래밍 언어의 발전

2000년도를 지나면서 다양한 웹 언어가 급격히 활성화 되기 시작했다고 한다. asp,jsp,php를 필두로 다양한 웹 프로그래밍 언어가 퍼져나갔다고 한다.

웹에서의 사용자 커뮤니케이션이 활성화 되면서 이러한 내용들을 보관하기 위해서 DB가 중요해졌다고 한다. 또한 자연스레 데이터들을 관리하고 무결성을 지켜 줄 수 있는 DBMS의 역할이 중요해졌다고 한다. 이와 같이 커뮤니티가 강조되는 웹페이지의 역할 변화로 인해서 주류 웹프로그래밍 언어가 기존의 C나, Perl에서 ASP,JSP,PHP로 넘어 갔다고 한다. 그리고 데이터베이스가 본격적으로 사용되기 시작했는데, MySQL,Oracle,SQL Server가 활용되기 시작했다고 한다.

• AJAX의 등장

구글은 2005년에 구글맵을 공개 했다고 한다. 구글맵은 AJAX(Asynchronous Javascript And XML)를 이용한것을 처음 공개했다고 한다. 

AJAX는 자바스크립트를 이용해 비동기로 HTTP Request를 서버로 보내는 기술이다. 이전에는 페이지 주소를 입력하거나 다른 웹페이지에 있는 링크를 눌러야만 전송되었다면, 이제는 화면의 변화 없이도 HTTP Request가 가능해진 것이다.

따라서 이를 통해 페이지를 새로고침하지 않고, 구글맵에서 확대나 축소 등 지도를 자유자재로 조절할 수 있게 된것이다. 이렇게 AJAX 기술로 소스를 비동기로 처리하는 것이 가능해졌기 때문에 웹 개발 방법론이 변화가 일어 났다고 한다. 웹 언어로페이지 전체를 생성하는 것이 아니라 본래의 화면은 HTML이나 웹 언어를 조금만 넣어서 기본 페이지를 만들고, 나머지 동적으로 변경 될 수 있는 부분은 별도로 생성하는 웹 언어를 두고 AJAX로 내용을 불러오는 방식을 사용한 것이다.

처음에 웹페이지를 로딩할 때나 사용자의 입력을 받아서 화면을 새로고치지 않고, 그대로 변경된 내용을 반영해주는 등 이시기 부터 사용자 경험(UX)가 중요한 이슈가 되기 시작했다고 한다. 그리고 웹서버에서 처리하던 많은일들이 클라이언트 쪽으로 넘어왔다고 한다.

2006년 초창기 ajax 활용 이후 xhtml의 표준화 작업에서 html5 표준화 작업으로 넘어가게 되면서 xml http request를 통해 xml이나 html을 전송받는것이 아니라 다양한 텍스트 또는 JSON 규격의 텍스트를 받는 식으로 개발 방식이 변경되었다고 한다.

이때부터 웹서비스라고 불리는 API들이 등장하면서 연동 규격으로 JSON을 사용하는 것이 일반화되기 시작하였다고 한다. 이러한 api 뿐만 아니라 직접 개발을 도와주는 개발 프레임워크와 라이브러리들이 나왔다. 대표적으로 jquery와 prototype이 있다. 이들을 통해 자바스크립트 활성화가 이루어졌다고도 한다. 

이렇게 쭉 흐름대로 살펴보니 json의 등장과 api라는 개념의 등장이 자연스레 연결 되었다. ㅎㅎ

• 모바일 시대의 웹 애플리케이션

다양한 api들과 ajax 활성화 그리고 웹 표준도 HTML5로 정착해 가고있을때, 다양한 웹 애플리케이션이 등장했다고 한다. 그 중 대표적인 것이 구글 Docs라고 한다.(여기서도 구글이 등장한다..ㅎ 개발자 들의 최종 종착지가 왜 구글인지, 웹의역사를 통해서 여실히 느낀다.) 

데스크톱에서나 생각했던 기능들이 웹페이지에서 이루어지게 된것이다. json의 등장과 더불어 웹 언어에서는 html을 직접 그리는 경우가 점점 줄어들고 자바스크립트에서 html을 그리는데 필요한 정보를 전달하는 역할을 수행하게 되었다.

기존에는 웹 언어에서 자바스크립트로 전달할 때 HTML 자체를 생성해서 보내기도하고, XML 기반의 데이터로 보내기도 했는데, 이제는 json으로 데이터를 주고받는 것이 일반적이게 되었다. 따라서 api에서도 restful 요청시 웹서버에서 CRUD기능을 수행한 다음, JSON을 통해서 결과를 보내는것이 일반적이게 되었다.

이렇게 HTML과 자바스크립트, CSS를 사용하는 프런트엔드와 웹프로그래밍 언어처럼 서버언어로 이루어진 백엔드 기술이 명확하게 구분되기 시작하게 된것이다.

웹서버에서 HTML을 생성하던 부분들까지 클라이언트로 넘어오게 되면서 웹서버의 역할이 줄어들고 클라이언트가 웹서비스를 수행해야 하는 부분이 많아졌다고 한다. 웹브라우저에서만 수행하던 기능을 모바일 앱에서도 웹기능을 수행하면서 자바스크립트의 활용은 점점 더 다양해지고 있기도 하다.

위와 같이 클라이언트가 많은 역할을 수행하게 된 배경에는 개발 방법론의 변화도 있지만, 클라이언트 단말의 성능과 브라우저의 발전도 있었다고 한다. 개발론이 변화하면서 자바스크립트의 역할이 어떻게 달라졌는지를 마지막으로 살펴보자.

| 3. 자바스크립트의 역할 변화

• -역할 거의 없음
• -form validation은 페이지가 다시 로드하고 나서 이루어짐

• -웹 언어의 보조 수단
• -form validation을 자바스크립트로 함

• -ajax를 활용하기 위한 수단
• -웹 페이지에 웹언어의 렌더링 결과를 뿌려줌

• -데이터 처리와 렌더링을 자바스크립트로함
• -다양한 HTML5 기능 활용 가능

| 4. 마치며

• 일단, 웹의 개발 방법론이 어떻게 변화해 왔는지 살펴보며 자바스크립트의 역할의 변화에 대해 자연스레 체화 할 수 있었고, 자바스크립트에 대한 이해뿐 아니라, 백엔드개발자와 프론트개발자가 어떻게 나오게 됬는지, ajax, json, api라는 개념이 어떻게 나오게 됬는지 등등을 학습해보며, 웹 필수 개념들에 대해 한번 흐름을 잡는 계기가 된 것 같았다. 

• 위에서 살펴봤듯이, 개발 방법론이 변화함에 따라 자바스크립트의 역할이 달라진 것 같았고, 기존 자바스크립트를 단순하게 입력 폼의 검증기능으로 사용했던 개발자들은 더 깊이 있는 이해가 필요한 시점이라고 책에서 말한다.또  자바스크립트가 내부적으로 어떻게 동작하는지 이해하려면, ECMAScript 표준을 이해하는것이 매우 도움된다고 한다. 그래서 다음단원에서 자바스크립트에서 동작과정에 의문점이 생기는 부분들은 ECMAScript 표준에서 어떻게 정의하고 있고, 왜 그렇게 동작하는지 살펴보자.