웹 프로그래밍

웹 프로그래밍 주 홍 택 계명대학교, 정보통신대학 컴퓨터 네트워크 연구실 juht@kmu.ac.kr Rm: 1228, Tel: 580-5234

강좌 개요 • 목표 • XML을 이용하여 웹 서비스 구축 능력 배양 • 내용 • XML을 이용한 웹 프로그래밍 • 마이크로소프트 XML 파서를 이용한 실습 • 수강자 요구사항 • HTML에 관한 기본 지식 • 웹 환경에 대한 전반적인 기초지식

강좌 일정 • 웹 프로그래밍 개요 • XML 개요 • XML 문서의 구조 • DTD • XML Schema • XML Style Sheet • DOM을 이용한 XML 프로그래밍

제1장:웹 프로그래밍의 개요 주 홍 택 계명대학교, 정보통신대학 컴퓨터 네트워크 연구실 juht@kmu.ac.kr Rm: 1228, Tel: 580-5234

웹 프로그래밍 • 정보를 공유하고 획득할 수 있는 방법 • 기술 보고서, 영업 자료, 영수증, ... • 엄청난 규모의 컴퓨터 연결: 인터넷 • 문자 뿐만 아니라 그림, 동영상 … • 정보가 다른 관련 정보와 연결되어 있음 • 여러 응용 분야를 가능하게 하는 기반 • 인터넷 홈 쇼핑 • 고객이나 관련회사에 도움을 주기 위한 기반 • ... • 웹 (인터넷)으로 무엇이 가능한가? 모든 것 (^..*)

웹 브라우져 웹 브라우져 웹 프로그래밍 –구성 요소 데이터베이스 웹 서버 인터넷 컨텐츠 HTML/HTTP TCP/IP 어플리케이션

웹 프로그래밍 - 구조 • Client/Server, Request/Response 구조 • 웹 문서 요청 • 예) http://www.kmu.ac.kr/default.asp • HTTP request • 웹 서버는 웹 문서로 응답 • HTTP response • 웹 문서는 HTML 형태임 • 웹 문서는 Uniform Resource Locator (URL)로 표시됨 • 프로토콜: http • 웹 서버: www.msn.com • 웹 문서: default.asp

웹 프로그래밍 - 웹 표준 • Internet Engineering Task Force (IETF) • http://www.ietf.org/ • 1986 설립 • 표준 문서들: Request For Comments (RFC) http://www.ietf.org/rfc.html • World Wide Web Consortium (W3C) • http://www.w3.org • 1994에 Tim Berners-Lee에 의해 창설 • 기술 보고서와 표준 제정

웹 프로그래밍 - 웹 기술 개발 원칙 • 호환성:소프트웨어, 하드웨어에 무관하게 모든 웹 구성요소들이 동작할 수 있도록 설계 • 발전성:웹 기술은 미래 기술을 수용할 수 있어야 함. 따라서 단순성, 모듈화 그리고 유연성을 유지해야 함. • 분산화:규모가 확장되어도 서비스 성능이나 기능에 차이가 없도록 해야 함.

웹 프로그래밍 - HTML • HyperText Markup Langugae • 마크업 언어(markup language: 조판 언어, 활자 언어) 웹 문서를 보여지기 위한 용도로 개발 • 보여지는 것에 중점을 둔 것으로 저장/전달 용도는 아니었음 • 웹 브라우저에서 해석되어 보여짐 • 링크(links)를 가지고 있어서 다른 이미지, 웹 문서 등에 연결할 수 있음 • 확장성이 없음 • Standard Generalized Markup Language (SGML)로 부터 탄생 • HTML 3.2, 4.01, XHTML 1.0

웹 프로그래밍 – HTML form • 역동적인 사용자 접속 방법을 제공함 • 버튼(Buttons) • 문장 입력 창(Text boxes) • 선택 리스트(Drop down lists) • 체크 박스(Check boxes) • 입력을 한 후에 전송 • 웹 서버는 입력을 받아서 처리한 후 결과를 응답함

웹 프로그래밍 – HTTP • 웹 문서를 요청하고 응답하는 웹의 최상위 프로토콜 • 예 HTML 문서, GIFs, JPEGs, Microsoft Word documents, Adobe PDF documents, etc. • 요청/응답(Request/Response) 프로토콜 • 명령어: GET, POST, HEAD, … • HTTP 1.0: 단순 • HTTP 1.1: 복잡하나 성능이 개선됨

웹 프로그래밍 – HTTP 요청 파일 (File) 명령 (Method) HTTP 버전 (HTTP version) 헤더 (Headers) GET /default.asp HTTP/1.0 Accept: image/gif, image/x-bitmap, image/jpeg, */* Accept-Language: en User-Agent: Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) Connection: Keep-Alive If-Modified-Since: Sunday, 17-Apr-96 04:32:58 GMT 빈 줄 (Blank line) 데이터(Data) – GET의 경우에는 비어 있음

웹 프로그래밍 – HTTP 응답 HTTP 버전 (HTTP version) 응답 문장 (Reason phrase) 응답 코드 (Status code) 헤더 (Headers) HTTP/1.0 200 OK Date: Sun, 21 Apr 1996 02:20:42 GMT Server: Microsoft-Internet-Information-Server/5.0 Connection: keep-alive Content-Type: text/html Last-Modified: Thu, 18 Apr 1996 17:39:05 GMT Content-Length: 2543 <HTML> 데이터가 여기 들어감. </HTML> 데이터 (Data) 빈 줄 (Blank line)

웹 프로그래밍 – HTTP 응답 코드

웹 프로그래밍 – HTTP 특성 • HTTP는 일회성 프로토콜(stateless) • 각 HTTP 요청은 이전의 요청과 무관하고 후의 요청에 영향을 주지 않음 • HTTP 1.1 에서 keep-alive도입하여 성능을 개선함 • 일회성이라는 특징이 여러 응용 분야에 적용하는데 많은 단점을 야기함

웹 프로그래밍 – HTTP 쿠키(Cookie) • 적은 정보 (4KB 정도)를 웹 클라이언트에 저장할 수 있는 방법 • 쿠기는 특정 웹 사이트와 관련이 있음 • 쿠키는 HTTP 헤더의 일부분임 • 쿠키는 각 HTTP 요청 때마다 보내짐 • 브라우저 프로그램이 종료될 때까지 사용되거나 또는 계속적으로 사용될 수 있음 • 시간에 의하여 유효성이 상실될 수 있음

웹 프로그래밍 – HTTP MIME • Multipurpose Internet Mail Extensions (MIME) • 문서나 데이터의 형식을 지정 • text/plain • text/html • image/gif • image/jpeg • audio/x-pn-realaudio • audio/x-ms-wma • video/x-ms-asf • application/octet-stream • 복수개의 부분으로 나누는 것을 허용(multi-parts) • E-mail에서 사용하기 위하여 도입되었으나 HTTP를 포함하여 여러 곳에서 사용됨

웹 프로그래밍 –웹 브라우저 • 웹 클라이언트의 일종 • 웹 서버에 웹 문서(HTML)를 요청하고 이를 해석하여 표시할 수 있음 • 많이 사용되는 웹 브라우저들: • Netscape • Internet Explorer • Opera • Safari (apple) • others

웹 프로그래밍 –네트워크(Network) • 네트워크 = 독립적이면서 상이한 여러 대의 컴퓨터를 연결한 것 • 네트워크가 필요한 이유? • 자원 공유 • 안정성 • 비용 절감 • 통신 • 웹 기술이 추가되면: • 새로운 사업 분야 생성: e-commerce, advertising • 즐거움이 있음 • 언제 어디서나 손 쉽게 이용할 수 있는 도구

웹 프로그래밍 –네트워크 종류 • 영역 • 인터넷(internet): 복수 네트워크를 연결한 네트워크 • 인터넷(Internet): TCP/IP에 기반을 두고 전세계를 연결한 네트워크로서 기업, 학교, 정보, 단체 및 개인 등이 연결되어 있음. DoD의 투자로 ARPANET에서 출발했음. • 인트라넷(intranet): 인터넷(Internet)에 기반을 두고 사내 또는 단체내의 컴퓨터를 연결한 네트워크 • 규모 • Local Area Network (LAN): 링이나 버스 그리고 트리 구조를 가지고 수 킬로 미터 내의 컴퓨터를 연결한 네트워크 • Wide Area Networks (WAN): 한 나라나 넓은 지역을 라우터를 사용하여 연결한 네트워크

웹 프로그래밍 –프로토콜 스택 OSI Model Layers TCP/IP Protocol Architecture Layers TCP/IP Protocol Suite Application Layer Presentation Layer Application Layer Telnet FTP SMTP DNS RIP SNMP HTTP Session Layer Host-to-Host Transport Layer TCP UDP Transport Layer Network Layer Internet Layer IP IGMP ICMP ARP Data Link Layer Network Interface Layer Ethernet Token Ring Frame Relay ATM Physical Layer

웹 프로그래밍 –웹 프로토콜 스택 HTTP HTTP TCP TCP IP IP Ethernet, ADSL, … Ethernet, ADSL, …

웹 프로그래밍 – DNS • Domain Name Server • 인터넷 주소(IP Address) 컴퓨터의 인터넷(Internet)상에서 유일하게 지정된 주소 • 도메인 네임(Domain name)은 편리성을 위하여 인터넷 주소와 1:1로 변환되는 문자 기반의 이름 • e.g. www.kmu.ac.kr • 도메인 네임은 계층적 구조 구조를 가지고 있음 • DNS 서버( DNS servers) 도메인 네임을 인터넷 주소로 변환하는 서비스를 제공함

웹 프로그래밍 • 웹 시스템 구축에 필요한 프로그램 • 웹 클라이언트와 서버 프로그램으로 구성 • 다양한 프로그램 언어가 사용됨 • C, C++, C#, Java, Perl, PHP • 웹의 특성을 고려한 프로그래밍 방법이 도입됨 • ASP, JSP, Plug-in, Javascript • 컴퓨터 분야의 다양한 기술이 포함됨 • 데이터베이스, 보안, 네트워크 • 새로운 기술들이 지속적으로 개발되고 있음 • Java, CORBA, XML

웹 프로그래밍 –프로그램 언어 • 기계어 (Machine code) • 어셈블리어 (Assembly language) • 고급 언어(High-level languages) • Fortran, LISP, Cobol • C, Pascal, Basic, Smalltalk • C++, Eiffel • Java, C# • 스크립트 언어(Scripting languages) • Shell scripts, Perl, TCL, Python, JavaScript, VBScript

웹 프로그래밍 –프로그래밍 방법 • 구조화 프로그래밍(Structured programming) • 객체지향 프로그래밍(Object-oriented programming) • 컴포넌트 기반 프로그래밍(Component-based programming) • 이벤트 기반 프로그래밍(Event-based programming)

웹 프로그래밍 –구조화 프로그래밍

웹 프로그래밍 –객체지향 프로그래밍 데이터(data) 호출(behaviors) 호출 계승 실체화

웹 프로그래밍 –컴포넌트 기반 프로그래밍 • 컴포넌트 • 설치나 재사용이 가능한 독립적인 모듈 • 객체보다는 좀더 큰 개념으로 받아들여짐 (객체는 언어 수준에서 정의된 것임) • 보통 다수의 클래스로 구성됨 • 구현언어에 무관한 특성을 가지고 있음 • 일반적으로 컴포넌트 개밸자와 사용자는 완전히 무관한 관계로 설정되어 있음 • 따라서 같은 회사도 아니고 같은 언어를 사용하지 않고 때로는 같은 컴퓨터 상에서 수행되지도 않음 • 자주 사용되는 컴포넌트들 • DCOM: Microsoft사에서 사내 컴포넌트 표준 기술 • Java Beans: Java 상에서 컴포넌트 표준 기술

웹 프로그래밍 –이벤트 기반 프로그래밍 • 예상된 사건이 발생하는 경우 그에 상응하는 코드가 수행됨 • 기존의 시스템에 새로운 사건에 대한 처리를 추가하거나 기존 처리 방법을 개선할 수 있음 • 이벤트(Event) = 콜벡(callback) • C.f. 핸들러 (handler) • 사용자 접속 방법은 모두 이벤트임 • onClick, onMouseOver, onMouseMove… • 시간기준으로 이벤트를 발생 시킬 수 있으며 네트워크, 운영체제 그리고 응용 프로그램과 데이터나 서비스를 이용하는 방법을 제공 • SQL Query, HTTP Push, etc.

웹 프로그래밍 –클라이언트 프로그래밍 • 웹 클라이언트 프로그램이란( client-side program)? • 웹 서버에서 웹 브라우저로 다운로드된 프로그램으로 웹 브라우저에서 수행됨 • 웹 서버에서 웹 브라우저로 다운로드된 데이터를 처리하기 위한 프로그램(플러그인:Plug-ins) • 웹 클라이언트 프로그램이 필요한 이유? • 서버 부담을 줄이기 위하여: 서버에서 적은 작업을 수행함 • 좀더 나은 성능을 제공함으로써 사용자의 편리성 제공 • HTML에 의존적이지 않은 사용자 접속 방법 제공 • Drop-down and pull-out menus • Tabbed dialogs • 멋진 효과를 만들 수 있음, 예: 애니메이션 • 데이터 검증 및 다양한 응용 프로그램 활용

웹 프로그래밍 –클라이언트 프로그래밍 • DHTML/JavaScript • COM • ActiveX controls • COM components • Java Applet (cf. Java Application, Java Servlet) • Plug-ins • Helpers

웹 프로그래밍 – DHTML/JavaScript • DHTML은 HTML에 포함된 스크립트 • 이식성(Portability) 또는 호환성(Operability)를 위하여 대부분 JavaScript로 프로그램됨 • Internet Explorer에서는 VBScript도 사용되기는 하나 제한적임 • 각 HTML 엘리먼트는 이벤트와 연결된 하나의 객체(object)로 인식됨 (예. onClick) • 스크립트는 브라우저의 이벤트를 처리하는 코드임

웹 프로그래밍 – ActiveX • 마이크로소프트사의 COM에 기반을 둠 • Internet Explorer에 특화된 것임 • Netscape에서도 plug-in으로 지원됨 • 사용자가 제한된 경우 효과적으로 적용할 수 있음 (예. intranet) • 코드가 작고 효율적임

웹 프로그래밍 – Java Applet • 자바 바이트코드(Java bytecode)에 기반을 둠 • 프로그램이 다운로드된 후에 자바 가상 기계(JVM)상에서 수행됨 • “Write once, run anywhere” • 이식성에서 가장 큰 장점이 있음 • 보안이 고려됨 • 코드는 “sandbox”모델에서 실행됨 • 대중적으로 널리 사용되기 위하여는 성능(Performance)와 호환성(Compatibility)가 문제점으로 인식됨

웹 프로그래밍 –서버 프로그래밍 • 웹 클라이언트가 아니라 웹 서버에서 수행되는 프로그램 • 기본적으로 클라이언트에게 시의 적절한 그리고 사용자에 특화된 HTML 또는 정보를 동적으로 생성하기 위하여 필요함 • 프로그램의 입력 • URL parameters • HTML form data • Cookies • HTTP headers • 웹 서버가 데이터베이스 (databases), e-mail 서버, 파일 서버 또는 다른 응용 프로그램 서버를 이용하여 웹 서비스를 제공하기 위하여 사용됨

웹 프로그래밍 –서버 프로그래밍 장점 • 접근성(Accessibility) • 인터넷에 연결된 컴퓨터만 있으면 웹 브라우저를 통하여 언제나, 어디서나 서비스를 받을 수 있음 • 관리성(Manageability) • 응용 프로그램 코드를 설치하고 분배할 필요성이 없음 • 서버에서 프로그램만 변경하면 업그레이드 가능함 • 보안성(Security) • 소스 코드가 공개되지 않음 • 다양한 웹의 보안 방법이 제공되고 있으므로 이를 이용하면 안전하게 서비스를 제공할 수 있음Scalability • 웹 기반의 3계층 구조(Web-based 3-tier architecture)는 수 많은 서비스를 동시에 제공할 수 있는 확장성 있는 구조를 제공함

웹 프로그래밍 –서버 프로그래밍 방법들 • Common Gateway Interface (CGI) • Internet Server API (ISAPI) • Netscape Server API (NSAPI) • Active Server Pages (ASP) • Java Server Pages (JSP)/Java Servlet • Personal Home Page (PHP) • Cold Fusion (CFM) • ASP.NET 웹 서버 제품 고유의 방법들

웹 프로그래밍 – CGI • 웹 브라우저의 요청에 의하여 웹 서버가 프로그램 (스크립트 포함)을 실행 시킴 • 프로그램은 웹 문서를 작성하여 웹 서버에 보내고 웹 서버는 이를 웹 브라우저에 보냄 • 장점 • 플랫폼에 관계없이 구축 가능 • 작성언어에 대해서도 독립적 • 단순한 인터페이스로 확장 가능하여 넓은 분야에서 활용이 가능 • 단점 • 데이터 베이스와 웹 사이의 인터페이스 기능으로 서버의 성능 약화 • 정적인 HTML로 중간매체 없이 대화형의 동적페이지를 구축하는 데에 문제 발생 • ASP(Active Server Page), Allaire의 Cold Fusion, PHP등이 등장

웹 프로그래밍 – ASP (JSP, PHP) • ASP 문서는 HTML 문서에 ASP 스크립트가 포함되어 있음 • ASP 스크립트는 웹 서버에 의하여 해석되어 스크립트 엔진에서 실행됨 • 스크립트 실행시 외부 컴포넌트를 활용함 • 마이크로소프트의 웹 서버(IIS 서버)에서만 사용가능함 • JSP, PHP는 모두 가능함 • 단점 • 플렛폼에 의존적임( ASP > JSP, PHP) • 언어에 의존적임 (스크립트 언어를 배워야 함) • 응용 분야가 제한적 (라이브러리가 지원되어야 함) • 장점 • 웹 브라우저 요청마다 쓰레드를 생성함으로 성능 향상 • 대화형 웹 문서 개발이 쉬움

웹 브라우져 웹 프로그래밍 –전체적으로 데이터베이스 DHTML(JavaScripts) CGI 웹 서버 컨텐츠 HTML/HTTP TCP/IP JVM 어플리케이션 Server Pages Java Applets

토론 주제 • 1시간 토론, 1시간 발표 • 스포츠 중계, 홈 쇼핑, 전자 결제 시스템, 오락, 등 모든 것이 웹을 통해서 이루어 지고 있다. 그렇다면 웹은 만능인가? 웹으로 불가능한 것이 무엇인가? • 웹 페이지, 특히 HTML,은 프로그램인가 스크립트인가?

제2장:XML 소개 주 홍 택 계명대학교, 정보통신대학 컴퓨터 네트워크 연구실 juht@kmu.ac.kr Rm: 1228, Tel: 580-5234

XML - XML에 관한 찬사들 • XML은 웹 기술 중에서 최첨단 기술이다. • XML은 각광은 받고 있는 기술이다. • XML은 HTML, HTTP, Java 보다 더 많이 활용되고 성공적인 기술이다. • 앞으로 XML이 모든 웹 기술을 대체할 것이다. • XML이 현재의 웹 환경을 획기적으로 개선할 것이다. • XML이 보다 나은 웹 환경을 마련해 줄 것이다. • XML은 ….

XML - XML이란 무엇인가? • XML은EXtensible Markup Language • 언어(Language) • 데이터을 설명한다. • 데이터을 전달한다. • 마크업(Markup: 조판, 활자) • 데이터에 의미나 모양을 추가한다 • HTML도 마크업 언어다. • 확장(Extensible) • 누구나, 언제나, 어느 용도로나 확장 가능하다. • XML은 (웹 상에서)데이터 를 설명, 전달하고 모양, 의미 등을 추가하며 언제나, 누구나, 어떤 용도로도 확장 가능하다.

XML - XML과 HTML • 처음 만들어진 목적이 다름 • XML은 데이터를 기술하고 데이터의 의미가 무엇인가에 초점을 두고 만들어 졌음. • HTML은 데이터를 (웹 상에) 표시하고 데이터를 어떻게 보여 줄 것인가에 초점을 두고 만들어 졌음. • XML과 HTML은 상호 보완적 • HTML만을 사용하면 데이터의 의미를 전달할 수 없음. • XML은 데이터를 전달하고 HTML은 이를 어떻게 표현할 것인가를 나타냄

일반 문서 • 수강과목 성적표(HTML)

HTML 문서 HTML 시작태그와 종료태그 HTML 시작태그와 종료태그 HTML 시작태그와 종료태그 내용 시작태그와 종료태그 주석문 데이터 * 웹 브라우저 상에서 소스 보기

XML 문서 • 수강과목 성적표(XML) XML 문서 선언문 데이터

웹 프로그래밍