javascript) 객체(object)의 구성 + JSON / AJAX

ECMA Script 기준.

 

---

 

 

❗ 객체의 구성

 

1. Built-in Object(자바스크립트 내장객체)

Built-in Object 에는 Global, Object, String, Number, Boolean, Date, Array, Math, RegExp, Error 등

많은 내장객체들이 존재한다.

이들은 자바스크립트 엔진이 구동되는 시점에서 바로 제공되며 자바스크립트코드 어디에서든 사용이 가능하다.

 

 

2. Native Object(브라우져 내장 객체)

Native Object 역시 자바스크립트가 구동되는 시점에서 바로 사용이 가능한 객체 들이다.

하지만 이들은 자바스크립트 엔진이 구성하는 기본객체라고 하기 보단 브라우져 즉 자바스크립트 엔진을 구동하는 녀석들에서 빌드되는 객체 들이다.

 

자바스크립트 프로그램을 작성하면서 사용하는 브라우져객체모델(BOM)과 문서객체모델(DOM)들이 이에 속한다.

Native Object역시 내장객체이며 Built-in Object와 동일하게 자바스크립트 구동시점부터 바로 사용가능 하다.

 

그러나 브라우져마다 이 Native Object 를 사용함에 있어서 그 구성을 달리하는 경우가 있다.

 

 

3. Host Object(사용자 정의 객체)

Host Object 는 말그대로 사용자가 생성한 객체 들이다.

constructor 혹은 객체 리터럴을 통해 사용자가 객체를 정의하고 확장시킨 녀석들이기 때문에

Built-in Object 와 Native Object가 구성된 이후에 구성되어 진다.

 

 

 

 

---

 

❗ 객체의 생성

 

 

• constructor 를 이용하여 생성
• 객체 리터럴을 이용 - JSON(Java-Script Object Notation) 이용

-> JSON 방식을 이용하면 객체리터럴이기에 단일 객체로만 활용됨.

cf> constructor 를 이용하면 동일한 구성을 가진 객체를 여러개 만들어 낼수 있음.

 

 

 

 

 

💡 JSON이란?

 

JavaScript Object Notation)은 속성-값 쌍(attribute–value pairs / array data types (or any other serializable value))

또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해

인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷.

 

 

인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있음.

자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합함.

 

 

비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷.

 

 

 

 

💡 AJAX 란?

 

 

Ajax(Asynchronous JavaScript and XML, 에이잭스)는 

비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법

 

 

• 표현 정보를 위한 HTML (또는 XHTML) 과 CSS
• 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
• 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest

+) Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있음.

 

 

 

- AJAX와 기존 기술과의 차이

 

 

 

cr: https://ko.wikipedia.org/wiki/Ajax

 

 

기존의 기술	AJAX
브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)함	필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리
웹 서버는 요청된 내용에 따라서 데이터를 가공,  새로운 웹 페이지를 작성하고 응답으로 되돌려줌.	웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서는  자바스크립트를 사용.
페이지와 사용자가 이 폼을 채워 결과물로서 되돌려 받은 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많다. -> 중복되는 HTML 코드를 다시 한번 전송을 받음 (많은 대역폭을 낭비)	웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리 되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아짐.

 

 

 

 

 

 

REFERENCE

 

Javascript : 함수와 메서드의 차이는? object를 파헤쳐보자!

 

Ajax - 위키백과, 우리 모두의 백과사전