인터페이스 기능 구현 기술

개요: 정보처리기사 공부 중 반가운 개념이 보여서 정리.

자주 쓰고 잘 쓰는 개념인데 두루뭉술하게 잡혀있던 개념을 다시 한 번 정리하고자 따로 기록한다.

파고들면 파고들수록 어렵지만 재밌는 개념.

 

---

 

 

1. JSON (Javascript Object Notation) 

JSON은 속성-값(Attribute-Value Pair) 쌍 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다.

 

• AJAX(Asynchronous JavaScript and XML)에서 많이 상용되고 XML을 대체하는 주요 데이터 포맷이다.
• 언어 독립형 데이터 포맷으로 다양한 데이터 프로그래밍 언어에서 사용된다.
• 사람이 읽고 쓰기에 용이하며 기계가 분석하고 생성하기에 용이하다.

 

 

---

 

자바스크립트 객체 표기법! JSON을 뜯어보면 그 이름 답게 객체처럼 생겼다.

 

숫자(number): 따옴표가 없다. 따옴표가 들어가면 문자가 된다는 것은 이제 상식! 2와 "2"는 다르다.

 

문자열(string): 항상 따옴표("")로 묶어야하며 그 안에는 유니코드 문자들이 나열된다.

 

배열: 대괄호로 표시하고 각 요소는 기본 자료형이거나 배열, 객체로 되어있다.

각 요소가 나타나는 순서는 의미가 있다. 

 

객체: 이름/값 쌍의 집합으로 중괄호를 사용. 이름은 문자열이므로 반드시 따옴표를 하며, 값은 기본 자료형이다. 각 쌍들은 쉼표로 구별되고 각 쌍이 나오는 순서는 의미가 없다.

 

 

---

 

2. AJAX(Asynchronous Javascript And XML)

• 자바스크립트를 사용하여 웹 서버와 클라이언트 간 비동기적으로 XML 데이터를 교환하고 조작하기 위한 웹 기술이다.
• 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 로드하지 않고 필요한 일부 페이지의 데이터만을 로드하는 기법이다.
• 하이퍼텍스트 표기 언어(HTML)만으로는 어려운 다양한 작업을 웹페이지에서 구현해서 이용자가 웹 페이지와 자유롭게 상호 작용할 수 있도록 구현하는 기법이다.

 

AJAX의 동작 원리

 

1. 사용자에 의한 요청 이벤트 발생

2. 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트 호출

3. 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청, 이때 웹 브라우저는 요청을 보내고나서 서버의 응답을 기다릴 필요 없이 다른 작업 처리 가능 (비동기의 주요 특징!)

4. 서버는 전달받은 XMLHttpRequest 객체를 가지고 AJAX 요청을 처리

5. 서버는 처리한 결과를 HTML, XML, JSON 형태의 데이터로 웹 브라우저에 전달

6. 서버로 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트 호출

7. 결과적으로 웹 페이지의 일부분만이 다시 로딩되어서 표시

 

XMLHttpRequest : 웹 브라우저와 웹 서버 간에 메서드가 데이터를 전송하는 객체 폼의 API

비동기 통신을 담당하는 자바스크립트 객체

---

 

Asynchronous!

AJAX로 비동기를 처리하려고 할 때 필수적으로 마주할 수 밖에 없는 개념이다.

AJAX는 브라우저 안에 빌트인(Built-in)되있는 XMLHttpRequest라는 객체와, JavaScript + HTML DOM의 조합

---

 

 

어떻게 사용하는지는 엘리님이 정말 잘 설명해주신다.

 

 

youtu.be/FN_D4Ihs3LE