[JavaScript] 자바스크립트

 이전에 자바스크립트를 한번 공부한 적이 있는데, 스터디로 일주일이 안 되는 기간동안 빠르게 배우다보니 지금은 머릿속에 거의 남지 않은 상태다.

그래서 이번에는 혼자서 자료도 찾아보고, 서적도 참고하면서 차근차근 배워보고자 한다.

 

 멋쟁이 사자처럼에서 아이디어톤이나 해커톤에 참가했을 당시, 내가 다룰 줄 아는 HTML, CSS, Django 만을 이용하다보니 구현가능한 범위에 한계가 너무 컸고, 특히나 반응형 웹을 제작하기 위해서라도 (React) 하루 빨리 자바스크립트를 배워야겠다는 생각이 들었다.

 

 우선 자바스크립트를 배우기에 앞서, 웹 개발 과정에서 자바스크립트를 왜 사용해야하는지, 기본적인 지식을 쌓아보고 본격적으로 공부를 시작하고자 한다. 특정 언어를 본격적으로 배우기 전에, 이 언어를 왜 사용해야하는지 탄생 배경과 함께 알아둔다면 이 언어를 어떨 때 활용해야하는지 알 수 있을 것이다. 그동안은 무작정 학교에서 가르치는대로 커리큘럼만 따라서 배웠지만, 앞으로 이렇게 혼자서 공부할 때는 항상 그 언어의 탄생 배경과 이유를 짚고 넘어가고자 한다. 

 

 

JavaScript ?

 자바스크립트는 HTML에 동적인 효과를 넣기 위해 탄생한 언어로, 넷스케이프에서 탄생했다. 이 자바스크립트는 넷스케이프사의 브라우저와 호환하는 언어였다. 이러한 자바스크립트가 큰 인기를 끌게 되자, 각 회사(ex 마이크로소프트)에서 자바스크립트와 유사한 언어들이 대거 등장하게 되었고, 각 언어와 호환하는 브라우저가 각기 달랐기 때문에 당시 개발자들이 엄청난 고생을 해야했다. 

 

 이를 해결하기 위해 ECMA International을 통해 표준화를 진행하게 되었고, 이후 자바스크립트에 대한 명세는 이곳에서 관리하게 되었다. 이렇게 표준화된 자바스크립트는 ECMAScript 라고 불리고, 흔히 줄여서 ES로 표현한다. ES5와 ES6를 기점으로 자바스크립트는 획기적인 발전을 하게 되었고, 지금은 웹 개발에 있어서 필수적인 언어로 자리잡게 되었다.

 

 

 JavaScript의 발전

 이러한 자바스크립트의 등장 이후로, 동적인 웹 페이지를 만들 수 있게 되었다. 이러한 동적인 효과를 주기 위해서는 HTML 문서 내의 요소에 접근하고 조작할 수 있어야 한다. 이러한 방법을 정의하는 것이 바로 문서 객체 모델(DOM)이다. DOM은 계층 구조로 표현되며 이를 통해 자바스크립트는 아래와 같은 작업을 수행할 수 있다. 

 

• HTML 내에 새로운 요소나 속성을 추가할 수 있다.
• HTML 내에 존재하는 요소나 속성을 제거할 수 있다.
• HTML 내에 존재하는 모든 요소나 속성을 변경할 수 있다.
• HTML 내의 모든 CSS 속성을 변경할 수 있다.
• HTML 내에 새로운 HTML 이벤트를 추가할 수 있다.
• HTML 내의 모든 HTML 이벤트에 반응할 수 있다. 

(출처: http://tcpschool.com/javascript/js_dom_concept)

 

이를 시작으로 자바스크립트는 여러 발전 과정을 거치게 된다. 

---

1. XMLHttpRequest

 XMLHttpRequest 라는 API가 등장하는데, 이를 통해 클라이언트 측의 스크립트를 http 혹은 https 서버에게 요청함으로써 데이터를 텍스트 형식(XML, HTML, JSON 등)으로 받을 수 있게 되었다. 

 

2. JSON

JSON은 자바스크립트 기반의 데이터 교환 포맷으로, 텍스트 형식으로 데이터를 저장하는 자바스크립트 문법이다. JSON은 객체, 배열, 문자열, 숫자, 부울 값 등을 구조적인 데이터로 표현하기 위해 자바스크립트 리터럴로 사용된다. 

 

{
"first: "Park",
"last": "minddon",
"married": false,
"born": 2000,
"friends": ["John", "Claire"]
}

 

3. 프레임 워크 Dojo Toolkit

상속 라이브러리, 모듈 시스템, 데스크탑 스타일의 그래픽 위젯 등에 사용되었으며, 규모가 큰 프로그래밍을 용이하게 하였다.

 

4. Ajax

Ajax는 데스크탑 어플리케이션 수준으로 웹 페이지들 간의 상호작용을 위한 기술 모음이다.  이러한 Ajax는 다음과 같은 특징을 갖는다.

1. 컨텐츠 로딩을 백그라운드에서 비동기적으로 진행한다. (XMLHttpRequest)
2. 그 결과물을 현재 페이지에 동적으로 업데이트한다. (Dynamic HTML)

이러한 특징 덕에, 기존(매번 전체 페이지를 다시 로드)보다 많은 사용성이 개선되었다. Ajax 등장 이후, 이전과 다른 데이터 형식이 인기를 얻게 되었고(XML 대신 JSON), HTTP뿐만 아니라 웹 소캣과 같은 다른 프로토콜도 사용되게 되었다. 또한, 양방향 통신이 가능해졌다. 

 

5. jQuery

jQuery는 클라이언트 사이드에서 DOM 조작을 편리하게 하도록 돕는 API 이다.

 

(출처: https://wit.nts-corp.com/2014/08/13/1925)

 

---

 

JavaScript에 대한 기본 배경지식은 이정도로 정리하도록 하고, 앞서 언급한 부분들은 앞으로 자바스크립트를 배우면서 차차 다루게 될 것이다. 이제 다음 게시글부터는 기본적인 자바스크립트 문법을 정리할 것이다.