웹 2.0 및 Ajax 개요
1. 웹2.0 탄생 배경 2004.10, Web 2.0 Conference (미국 오라일리 사 주최) Long Tail 법칙 2000년대초 닷컴(.com) 버블의 붕괴 닷컴 버블 이후 생존 회사 및 소멸 회사 비교 10년간 웹의 환경 변화 및 발전 방향을 정리 “Web2.0” : 제2세대 웹의 의미 Long Tail 법칙 파레토 법칙, 20:80 법칙 오프라인 기업에서 20% 상품이 80% 매출 아마존의 경우 하위 80% 상품의 매출이 더 크다 즉, 꼬리에 해당하는 매출이 중요
웹2.0 기본 개념 웹2.0의 특징 : “참여, 공유, 개방” 사용자의 능동적인 참여와 공유 웹2.0은 개방적 사용자 생산 콘텐츠(UCC, UGC) 예) 블로깅, 위키피디아, Flickr, YouTube 소셜북마킹은 태깅(Tagging) 개념으로 발전 웹2.0은 개방적 콘텐츠 유통 : 블로그, RSS 피드 다양한 활용(뉴스, 팟캐스팅 등) 공개 API (OpenAPI) => 매쉬업(Mashup) 또 다른 서비스 개발, 예) 검색엔진 + 구글 맵 등
2. 웹2.0 주요 기술 ▶ Blog와 RSS Blog : Web + log RSS “RDF Site Summary”, “Really Simple Syndication”, … 적용 사례 뉴스/자료 제공, 블로그 연동 팟캐스팅(아이팟, 아이튠즈) (b) RSS 작동 원리
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> <title>XML Tutorial</title> <link>http://www.w3schools.com/xml</link> <description>New XML tutorial on W3Schools</description> </channel> </rss> 채널 정보 아이템 정보 아이템 정보
▶ Social Tagging & Foxonomy 사용자가 임의의 키워드를 태그로 붙이고 이들을 검색 폭소노미(Folksonomy: Folk + Taxonomy) Taxonomy : 미리 정해진 카테고리를 분류기준으로 Foxonomy : 사용자가 임의의 키워드로 태깅 예) 소셜 북마킹 사이트 : 딜리셔스(del.icio.us) 예) UCC 사이트 : Flickr, YouTube 태그 구름(Tag Cloud)
▶ OpenAPI & Mashup API(Application Programming Interface) 매쉬업(Mashup) 응용 프로그램 개발환경 : 라이브러리나 규약집 형태로 제공 공개 API : 자신의 사이트 기능을 활용하도록 API를 제공 매쉬업(Mashup) 공개된 API로 웹 서비스를 조합하여 새로운 웹 서비스 제공 추가의 개발비용이 매우 적다 최초의 예) HousingMaps = Google Map + 부동산정보 craigslist 요즘 많은 사이트에서 제공 : 구글, 아마존, 야후, 네이버, 다음 + ⇒ 매쉬업 사례 HousingMaps의 실행화면
매쉬업 사이트 구축 사례 네이버 지도 보완 기본 지도에 줌콘트롤, 범례, 마커, 교통상황 등 각종 정보 추가 기본 지도에 줌콘트롤, 범례, 마커, 교통상황 등 각종 정보 추가 API 이용등록 페이지에서 지도 API 키를 발급 http://dev.naver.com/openapi/register 코딩(참고) ①네이버에서 제공하는 스크립트를 헤드에 포함(지도 API키 입력) ②지도를 출력할 컨테이너 설정 ③위치객체와 지도객체를 생성하고 컨테이너에 삽입 여기에 줌 컨트롤 객체, 필요 정보 및 기능을 추가
<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>
▶ Ajax & RIA 기존의 웹 응용 : 동기식(Synchronous) 비동기식 (Asynchronous) HTML 에서 웹 서버에 작업 요청 => 웹 서버 실행 웹 서버 실행 결과를 전송 (페이지 단위) => 브라우저에서 표시 항상 페이지 전체를 전송 비동기식 (Asynchronous) 웹 서버에 작업 요청 후 바로 다음 사용자 작업을 처리 RIA(Rich Internet Application) 개발에 활용 Ajax = Asynchronous + Javascript + XML + DOM + CSS + XSLT + XMLHttpRequest 플러그인 필요없음, 속도증진 효과, 임의로 화면 재구성 가능 예) 구글맵 지도 이동시, 지메일 시작화면 구성, 제시어 기능
2. Ajax 개요 Ajax(Asynchronous Javascript And XML) 웹 애플리케이션에서 풍부한 사용자 인터페이스 구현 기술 자바스크립트와 XML 기반 비동기 통신방식 2005.2 제임스 가렛(Jesse James Garrett)이 발표한 에세이 “Ajax: A New Approach to Web Application”, Adaptive Path 다음 7가지 기술의 조합 표준언어 XHTML과 CSS를 이용한 표현 기술 DOM을 이용한 동적인 화면 구성과 상호작용 XML과 XSLT를 이용한 데이터 교환 및 데이터 처리 XHR(XMLHttpRequest)를 이용한 비동기 데이터 통신 손쉬운 Javascript 언어를 이용하여 모든 것을 통합 제어
Ajax 특징(1) Ajax 웹 어플리케이션 모델 전통적인 웹 Ajax : 웹서버에서 데이터를 처리한 후 응답 페이지를 HTML로 작성 Ajax : 처리 결과에서 필요한 데이터만 가벼운 형태의 XML 데이터로 전송 CSV, JSON 클라이언트에서 이를 받아서 결과 페이지를 작성 데이터 처리속도와 인터페이스의 입출력 반응속도가 현저하게 증가 사례) 검색창 제시어
Ajax 특징(2) Ajax 비동기 통신 모델 전통적인 웹 : 클릭 할 때마다 HTML 문서 요청하여 해석 Ajax : 데이터 처리를 위해 서버와 HTTP 객체로 통신 서버에 요청한 처리 결과를 다 받기 전에 다른 작업 병행 가능
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>
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 이외 reqHttp = new XMLHttpRequest(); if (!reqHttp) alert(“지원하지 않는 브라우저”); return reqHttp;
receiveText.js // 파일 수신 함수 function openstate() { var req = newXHR(); // XMLHttpRequest 객체 생성 req.onreadystatechange = function() { if (req.readyState == 4) { // 0: open 수행전, 1: 로딩중, 2: 로딩완료, // 3: 서버 처리중 4: 처리완료 if (req.status == 200) { // 200: 성공, 403: 접근거부, 404: 파일 없음 mainTask(req); } req.open(“GET”, “server.txt”, true); // 전송방식(GET/POST), URL, 비동기(true)/동기(false) req.send(null); // 서버로 데이터 전송 // 메인 함수 function mainTask(request) { var output = document.getElementById(“receive_data”); output.innerHTML = request.reponseText;
JSON(JavaScript Object Notation) 데이터의 전달 비동기 브라우저/서버 통신을 위해 XML을 대체하는 데이터 포맷 { 속성-값 } 쌍으로 이루어진 데이터 오브젝트 전달 시트 값이나 변수값 전달에 유리 Javascript 문법에 따르지만 프로그래밍 언어와 플랫폼에 독립적 Ajax와 잘 어울림 텍스트 형식으로 읽기 쉽다. 확장자는 .json 작성 형식 객체 := { 멤버 }, 멤버 := “이름: 값” 예, {"name2": 50, "name3": "다음1", "name1": true} 예, {"soccer" : "축구", "baseball" : "야구" } 배열 := [ 요소들 ] 예, [10, {"v": 20}, [30, "마흔"]]
XML, JSON, CSV 비교 XML 예 JSON 예 CSV(Comma Separate Value) 예 <종목> <영>soccer</영> <한>축구</한> </종목> <종목> <영>baseball</영> <한>야구</한> </종목> JSON 예 { “종목” : [ {"영”:"soccer", "한”:"축구"}, {"영”:"baseball", "한”:"야구”}] } 접근 예, 종목.영[0] => "soccer“, 종목.한[1] => "야구" CSV(Comma Separate Value) 예 “종목”, "영", "soccer", "한", "축구", "영", "baseball", "한", "야구" soccer