chapter 05. 인터페이스 구현

인터페이스 기능 구현 기술

XML(Extensible Markup Language) [2020년 1회]

① XML의 개념

XML은 HTML의 단점을 보완한 인터넷 언어로, SGML의 복잡한 단점을 개선한 특수한 목적을 갖는 마크업 언어이다.

 

② XML의 특징

• XML의 송.수신 시스템 간 데이터 연계의 편의성을 위해서 전송되는 데이터 구조를 동일한 형태로 정의한다.
• 인간과 기계가 모두 이해할 수 있는 텍스트 형태로 마크업 포맷을 정의하기 위한 메타언어이다.
• 사용자가 직접 문서의 태그를 정의할 수 있으며, 다른 사용자가 정의한 태그를 사용할 수 있다.

③ XML의 문서 구조

구분	설명
XML 문서 작성 규칙	- 트리 구조로 구성되어 있어 상위 태그는 여러 개의 하위 태그를 가질 수 있음 - 모든 태그는 종료 태그를 가져야하고, 시작 태그와 종료 태그의 요소명칭은 동일해야 함 - XML 태그의 여닫는 순서는 반드시 지켜져야 하고, 띄어쓰기는 인식 - 속성값은 반드시 큰따옴표(" ")로 묶어줘야 하고, 대.소문자는 구분
XML 문서 구조	<?xml version="1.0" encoding="UTF-8"?> <shop city="인천" type="전자상가">     <smart device>         <name>iphone</name>         <sort>smart phone</sort>         <cost>960,000</cost>     </smart device>     <smart device>         <name>삼성갤럭시탭</name>         <sort>태블릿 PC</sort>         <cost>1,160,000</cost>     </smart device> </shop>	- XML 문서는 맨 첫 줄에 <xml>태그를 사용하여 XML 문서임을 명시 - XML 문서에 단 하나만 존재하는 루트(root) 요소 생성 - 첫 번째 <smart device> 요소는 <name> 요소, <sort> 요소, <cost> 요소의 총 세 개의 자식요소를 가짐 - 두 번째 <smart device> 요소도 <name> 요소, <sort> 요소, <cost> 요소의 총 세 개의 자식요소를 가짐 - XML 문서는 전자상가에서 판매하는 스마트 기기에 관한 정보를 담고 있는 문서임을 알 수 있음 - 이처럼 XML 문서에서 요소의 이름만으로 데이터의 내용을 알 수 있는 구조

 

④ XML 구성

XML의 문서는 크게 XML 프롤로그 부분과 XML 요소로 구성된다.

 

㉮ XML 프롤로그

• XML 문서는 맨 첫 줄에 <xml> 태그를 사용하여 XML 문서임을 명시하는 선언부
• <xml> 태그의 이름은 소문자로만 사용

XML 프롤로그 문법

<?xml version="XML문서버전" encoding="언어셋" standalone="yes|no"?>

XML 프롤로그 문법 구성요소

- version : XML 문서에 사용된 XML의 버전을 명시

- encoding : XML의 언어 셋 명시, 생략이 가능하며, 생략 시 기본값은 UTF-8

- standalone : XML 문서를 해석할 때 외부 문서의 참조 여부 명시, 생략이 가능하며, 생략 시 기본값은 no로 외부 문서를 참조한다는 의미

 

㉯  XML 요소

XML 요소란 시작 태그부터 종료 태그까지의 모든 것

 

XML 요소 문법

<요소이름 속성1="속성값" 속성2="속성값"...> 내용 </요소이름>

XML 요소 문법 구성요소

- 요소이름 : 요소의 이름으로 사용자가 임의로 지정 가능, 요소 이름의 작성 규칙

- 속성="속성값" : XML요소의 속성은 속성명-"속성값"의 형태로 정의, 속성 이름의 작성 규칙

- 내용 : 요소의 내용으로 생략이 가능

 

 

AJAX(Asynchronous Javascript And XML) [2020년 2회]

① AJAX의 개념

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

② AJAX의 주요 기술

주요 기술	설명
XMLHttpRequest	- 웹 브라우저와 웹 서버 간에 메서드가 데이터를 전송하는 객체 폼의 API - 비동기 통신을 담당하는 자바스크립트 객체
JavaScript	- 객체 기반의 스크립트 프로그래밍 언어 - 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능 소유
XML (Extensible Markup Language)	- HTML의 단점을 보오나한 인터넷 언어로서 SGML의 복잡한 단점을 개선한 특수한 목적을 갖는 마크업 언어
DOM (Document Object Model)	- XML 문서를 트리 구조의 형태로 접근할 수 있게 해주는 API - 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 객체 지향 모델
XSLT (Extensible Stylesheet Language Transformations)	- XML 문서를 다른 XML 문서로 변환하는 데 사용하는 XML 기반 언어 - W3C에서 제정한 표준으로 XML 변환 언어를 사용하여 XML 문서로 바꿔주며, 탐색하기 위해 XPath를 사용
HTML (HyperText Markup Language)	- 인터넷 웹(WWW) 문서를 표현하는 표준화된 마크업 언어
CSS (Cascading Style Sheets)	- 마크업 언어가 실제 표시되는 방법을 기술하는 언어 - 운영체제나 사용 프로그램과 관계없이 글자 크기, 글자체, 줄 간격, 색상 등을 자유롭게 선택할 수 있는 스타일 시트

 

③ AJAX의 동작 원리

1. 사용자에 의한 요청 이벤트 발생
2. 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트 호출
3. 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청, 이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업 처리 가능
4. 서버는 전달받은 XMLHttpRequest 객체를 가지고 AJAX 요청을 처리
5. 서버는 처리한 결과를 HTML, XML, JSON 형태의 데이터로 웹 브라우저에 전달
6. 서버로 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출
7. 결과적으로 웹 페이지의 일부분만이 다시 로딩되어서 표시

 

[참고 : 수제비 2022]