mm.sookmyung.ac.kr
Download
Report
Transcript mm.sookmyung.ac.kr
웹 2.0 및 Ajax 개요
1
1. 웹2.0 탄생 배경
2004.10, Web 2.0 Conference (미국 오라일리 사 주최)
2000년대초 닷컴(.com) 버블의 붕괴
닷컴 버블 이후 생존 회사 및 소멸 회사 비교
10년간 웹의 환경 변화 및 발전 방향을 정리
“Web2.0” : 제2세대 웹의 의미
Long Tail 법칙
파레토 법칙, 20:80 법칙
아마존의 경우
ⓒsblim
오프라인 기업에서 20% 상품이 80% 매출
하위 80% 상품의 매출이 더 크다
즉, 꼬리에 해당하는 매출이 중요
2
웹2.0 기본 개념
웹2.0의 특징 : “참여, 공유, 개방”
사용자의 능동적인 참여와 공유
사용자 생산 콘텐츠(UCC, UGC)
예) 블로깅, 위키피디아, Flickr, YouTube
소셜북마킹은 태깅(Tagging) 개념으로 발전
웹2.0은 개방적
콘텐츠 유통 : 블로그, RSS 피드
공개 API (OpenAPI) => 매쉬업(Mashup)
ⓒsblim
다양한 활용(뉴스, 팟캐스팅 등)
또 다른 서비스 개발, 예) 검색엔진 + 구글 맵 등
3
2. 웹2.0 주요 기술
▶ Blog와 RSS
Blog : Web + log
RSS
“RDF Site Summary”, “Really Simple Syndication”, …
적용 사례
뉴스/자료 제공, 블로그 연동
팟캐스팅(아이팟, 아이튠즈)
(b) RSS 작동 원리
ⓒsblim
4
RSS 사례(참고): w3schools
<?xml version="1.0" encoding="ISO-8859-1" ?>
<rss version="2.0">
<channel>
<title>W3Schools Home Page</title>
<link>http://www.w3schools.com</link>
채널 정보
<description>Free web building tutorials</description>
<item>
<title>RSS Tutorial</title>
<link>http://www.w3schools.com/rss</link>
아이템 정보
<description>New RSS tutorial on W3Schools</description>
</item>
<item>
<title>XML Tutorial</title>
아이템 정보
<link>http://www.w3schools.com/xml</link>
<description>New XML tutorial on W3Schools</description>
</item>
</channel>
</rss>
ⓒsblim
5
▶ Social Tagging & Foxonomy
소셜 태깅 (Social Tagging)
사용자가 임의의 키워드를 태그로 붙이고 이들을 검색
폭소노미(Folksonomy: Folk + Taxonomy)
Taxonomy : 미리 정해진 카테고리를 분류기준으로
Foxonomy : 사용자가 임의의 키워드로 태깅
ⓒsblim
예) 소셜 북마킹 사이트 : 딜리셔스(del.icio.us)
예) UCC 사이트 : Flickr, YouTube
태그 구름(Tag Cloud)
6
▶ OpenAPI & Mashup
API(Application Programming Interface)
응용 프로그램 개발환경 : 라이브러리나 규약집 형태로 제공
공개 API : 자신의 사이트 기능을 활용하도록 API를 제공
매쉬업(Mashup)
공개된 API로 웹 서비스를 조합하여 새로운 웹 서비스 제공
추가의 개발비용이 매우 적다
최초의 예) HousingMaps = Google Map + 부동산정보 craigslist
요즘 많은 사이트에서 제공 : 구글, 아마존, 야후, 네이버, 다음
+
ⓒsblim
⇒
매쉬업 사례 HousingMaps의 실행화면
7
매쉬업 사이트 구축 사례
네이버 지도 보완
기본 지도에 줌콘트롤, 범례,
마커, 교통상황 등 각종 정보 추가
API 이용등록 페이지에서
지도 API 키를 발급
http://dev.naver.com/openapi/register
코딩(참고)
①네이버에서 제공하는 스크립트를 헤드에 포함(지도 API키 입력)
②지도를 출력할 컨테이너 설정
③위치객체와 지도객체를 생성하고 컨테이너에 삽입
여기에 줌 컨트롤 객체, 필요 정보 및 기능을 추가
ⓒsblim
8
<html>
<head>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?
ver=2.0&key=f32441ebcd3cc9de474f8081df1e54e3"> </script> // ① 오픈 API 호출 - API 키
</head>
<body>
<div id="testMap" style="border:1px solid #000; width:700px; height:400px; margin:20px;
display:block;"></div>
<!-- ② -->
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(37.5010226, 127.0396037); // ③ 위치 생성
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('testMap', {
// ④ “testMap" 태그에 지도 생성
point : oPoint,
// 지도 중심점의 좌표
zoom : 10,
// 초기 줌 레벨은 10으로 둔다.
enableWheelZoom : true,
// 마우스 휠 동작으로 지도를 확대/축소할지 여부
enableDragPan : true,
// 마우스로 끌어서 지도를 이동할지 여부
enableDblClickZoom : false,
// 더블클릭으로 지도를 확대할지 여부
mapMode : 0,
// 지도 모드(0: 일반 지도, 1: 겹침 지도, 2: 위성 지도)
minMaxLevel : [ 1, 14 ],
// 지도의 최소/최대 축척 레벨
size : new nhn.api.map.Size(500, 400)
// 지도의 크기
});
var mapZoom = new nhn.api.map.ZoomControl(); // ⑤ 줌 컨트롤 선언
mapZoom.setPosition({left:80, bottom:40});
// 줌 컨트롤 위치 지정
oMap.addControl(mapZoom);
// 줌 컨트롤 추가.
</script>
</body>
</html>
9
▶ Ajax & RIA
기존의 웹 응용 : 동기식(Synchronous)
HTML 에서 웹 서버에 작업 요청 => 웹 서버 실행
웹 서버 실행 결과를 전송 (페이지 단위) => 브라우저에서 표시
항상 페이지 전체를 전송
비동기식 (Asynchronous)
웹 서버에 작업 요청 후 바로 다음 사용자 작업을 처리
Ajax = Asynchronous + Javascript + XML + DOM + CSS +
XSLT + XMLHttpRequest
플러그인 필요없음, 속도증진 효과, 임의로 화면 재구성 가능
ⓒsblim
RIA(Rich Internet Application) 개발에 활용
예) 구글맵 지도 이동시, 지메일 시작화면 구성, 제시어 기능
10
2. Ajax 개요
Ajax(Asynchronous Javascript And XML)
웹 애플리케이션에서 풍부한 사용자 인터페이스 구현 기술
2005.2 제임스 가렛(Jesse James Garrett)이 발표한 에세이
“Ajax: A New Approach to Web Application”, Adaptive Path
다음 7가지 기술의 조합
ⓒsblim
자바스크립트와 XML 기반 비동기 통신방식
표준언어 XHTML과 CSS를 이용한 표현 기술
DOM을 이용한 동적인 화면 구성과 상호작용
XML과 XSLT를 이용한 데이터 교환 및 데이터 처리
XHR(XMLHttpRequest)를 이용한 비동기 데이터 통신
손쉬운 Javascript 언어를 이용하여 모든 것을 통합 제어
11
Ajax 특징(1)
Ajax 웹 어플리케이션 모델
전통적인 웹
웹서버에서 데이터를 처리한 후
응답 페이지를 HTML로 작성
Ajax :
처리 결과에서 필요한 데이터만
가벼운 형태의 XML 데이터로 전송
클라이언트에서 이를 받아서
결과 페이지를 작성
데이터 처리속도와 인터페이스의
입출력 반응속도가 현저하게 증가
ⓒsblim
CSV, JSON
사례) 검색창 제시어
12
Ajax 특징(2)
Ajax 비동기 통신 모델
전통적인 웹 : 클릭 할 때마다 HTML 문서 요청하여 해석
Ajax : 데이터 처리를 위해 서버와 HTTP 객체로 통신
ⓒsblim
서버에 요청한 처리 결과를 다 받기 전에 다른 작업 병행 가능
13
Ajax 프로그램 예제(참고)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax 텍스트 파일 수신 예제 </title>
<script language="javascript" type="text/javascript" src="newXHR.js" />
<script language="javascript" type="text/javascript" src="receiveText.js" />
</head>
<body>
<h1>Ajax 텍스트 파일 수신 예제</h1>
<input type="button" name="receive_button" value="파일 수신 확인" onClick="openState()" />
<div id="receive_data" />
</body>
</html>
ⓒsblim
14
newXHR.js
// XMLHttpRequest 생성 함수
function newXHR() {
var reqHttp;
if (window.ActiveXObject) {
// IE browser
try {
reqHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
reqHttp = null;
}
} else if (window.XMLHttpRequest) {
// IE 이외
try {
reqHttp = new XMLHttpRequest();
} catch (e) {
reqHttp = null;
}
}
if (!reqHttp) alert(“지원하지 않는 브라우저”);
return reqHttp;
}
ⓒsblim
15
receiveText.js
// 파일 수신 함수
function openstate() {
var req = newXHR();
req.onreadystatechange = function() {
if (req.readyState == 4) {
}
}
if (req.status == 200) {
mainTask(req);
}
}
req.open(“GET”, “server.txt”, true);
req.send(null);
// XMLHttpRequest 객체 생성
// 0: open 수행전, 1: 로딩중, 2: 로딩완료,
// 3: 서버 처리중 4: 처리완료
// 200: 성공, 403: 접근거부, 404: 파일 없음
// 전송방식(GET/POST), URL, 비동기(true)/동기(false)
// 서버로 데이터 전송
// 메인 함수
function mainTask(request) {
var output = document.getElementById(“receive_data”);
output.innerHTML = request.reponseText;
}
ⓒsblim
16