[쉽게 배우는 데이터 통신과 네트워크] CH13. 웹(WWW)

SMALL

01 웹 서비스

1 클라이언트-서버 모델

클라이언트가 웹 서버를 지칭할 때 사용하는 주소를 URL이라 한다.
HTTP는 클라이언트의 요청과 서버의 응답 정보를 전송하기 위한 목적으로 구현된 프로토콜이다.
클라이언트는 수신한 정보를 사용자가 볼 수 있게 웹 브라우저 화면에 표시한다.
사용자가 화면을 보는 시점에는 클라이언트와 서버 사이에 어떠한 전송 계층의 연결도 존재하지 않는다.

2 APM의 웹 서비스 구조

PHP는 유닉스나 리눅스 환경에서 주로 사용되며, 웹 서버 프로그램인 아파치와 데이터베이스 기능을 지원하는 MySQL이 서로 연동해 동작한다. 이 3가지를 통칭하여 APM(Apache, PHP, MySQL)이라 부른다.

2.1 APM의 동작 원리

클라이언트 기능을 수행하는 웹 브라우저는 웹 서버 기능을 수행하는 아파치와 연결을 설정하여 필요한 웹 문서를 요청한다.
웹 문서에 PHP와 MySQL 기능을 사용하는 코드가 있으면 PHP에 해당 코드를 전송하여 처리하도록 요청한다.
MySQL 데이터베이스에 저장된 데이터와 접속이 필요하면 해당 질의어를 MySQL에 보낸다.
질의어를 통해 MySQL을 PHP가 원하는 데이터를 전달한다.
PHP가 아파치 서버에 정보를 회신한다.
이때 모든 정보가 HTML로 번역되므로 PHP 코드, MySQL 처리를 위한 질의어 등이 웹 브라우저에 회신되지 않는다. (단, 문서 내용이 HTML만으로 구성되었으면 PHP, MySQL과의 연동 과정을 생략하고, 아파치 서버가 바로 엡 브라우저에 문서 내용을 회신)

2.2 PHP 코드의 처리

<HTML>
	<BODY>
		<? $value = 10; ?>
		츨력<br>
		<? echo $value; ?>
	</BODY>
</HTML>

🔼 PHP 코드가 추가된 웹 문서

PHP 코드는 HTML 문서 내용의 일부로 작성되며, '<?'와 '?>' 구분자를 사용하여 HTML 코드와 구분한다.
다음과 같이 가정한다.
- 웹 서버의 주소는 www.korea.co.kr이다.
- hong이라는 사용자의 public_html 디렉토리 밑에 index.php라는 파일 이름으로 저장되어 있다.
클라이언트의 웹 브라우저 주소에 http://www.korea.co.kr/~hong을 입력하면 웹 서버에서는 서버에 해당 문서를 요청한다.
PHP 코드는 PHP 번역기에 의해 번역되었으므로, 클라이언트에 회신되는 문서에는 PHP 코드가 존재하지 않는다.
수신한 웹 브라우저는 HTML 태그를 해석하여 출력하고, 웹 서버와의 연결을 종료한다.

<HTML>
	<BODY>
		출력<br>
		10
	</BODY>
</HTML>

🔼 클라이언트에 회신되는 문서

02 HTML

HTML은 웹 브라우저의 어느 위치에 어떤 데이터를 어떤 모양으로 표시하는지를 나타낸다.

1 HTML 문서의 구조

HTML은 웹 문서를 작성하는 언어이며, HTML 문서는 <HTML> 태그로 시작하여 </HTML> 태그로 종료한다.

<HTML> <!-- 문서의 시작 -->
	<!-- 헤더 -->
	<HEAD>
		<TITLE> HTML의 예 </TITLE>
	</HEAD>

	<!-- 바디 -->
	<BODY>
		HTML 문서의 내용
	</BODY>
</HTML> <!-- 문서의 종료 -->

전체 내용은 크게 헤더와 바디의 두 부분으로 구성된다.
- 헤더는 <HEAD>와 </HEAD> 태그를 사용한다.
- 바디는 <BODY>와 </BODY> 태그를 사용한다.
<TITLE>은 문서 제목으로 웹 브라우저 상단에 표시된다.

2 기본 태그

태그	설명
<Hn>	제목을 표시한다. n(1~6)은 제목 크기로, H1이 가장 크고 H6이 가장 작다.
<HR>	수평선을 표시한다.
<P>	문단을 구분한다.
<BR>	다음 줄(행)로 넘어가는 줄 바꿈 기능을 수행한다.
<B>	글자를 굵게 한다.
<I>	글자를 이탤릭으로 처리한다.
<U>	글자에 밑줄을 긋는다.
<SUB>	글자를 아래 첨자로 만든다.
<FONT size='n' color="#ffffff">	글자 크기와 색을 지정한다. n(1~7)은 글자 크기이고, ffffff(16진수)는 글자 색이다.
<A HREF="URL">	URL로 지정한 다른 웹 문서와 링크할 때 사용한다.
<IMG src="그림 파일명">	지정된 그림 파일을 화면에 표시한다.

🔼 HTML 기본 태그

<HTML>
	<HEAD>
		<TITLE>기본 웹 문서</TITLE>
	</HEAD>
	<BODY>
		<H2>기본 태그 연습</H2>
		<HR>
		<B>굵은 글자</B><BR>
		<I>이탤릭 글자</I><BR>
		<U>밑줄 글자</U><BR>
		<A HREF="http://www.korea.co.kr">한국주식회사</A>
	</BODY>
</HTML>

🔼 HTML 기본 태그의 사용

각 단어를 정해진 형식으로 출력하도록 하고, '한국주식회사'에는 http://www.korea.co.kr 사이트를 링크한다.

3 표 태그

태그	설명
<TABLE>	표 하나의 환경을 지정한다.
<TR>	표의 한 줄(행)을 지정한다.
<TD>	줄의 한 칸(열)을 지정한다.

🔼 HTML 표 태그

<HTML>
	<HEAD>
		<TITLE>표 만들기</TITLE>
	</HEAD>
	<BODY>
		<TABLE>
		<TR>
			<TD>학년</TD>
			<TD>1</TD>
			<TD>2</TD>
			<TD>3</TD>
			<TD>4</TD>
		</TR>
		<TR>
			<TD>인원</TD>
			<TD>50</TD>
			<TD>52</TD>
			<TD>54</TD>
			<TD>46</TD>
		</TR>
	</BODY>
</HTML>

🔼 HTML 표 태그의 사용

2*5의 표를 만든 예이다.
표의 각 셀은 <TR> 태그로 특정 줄의 시작과 끝을 지정한 후에, 해당 줄에서 <TD> 태그를 사용한다.

4 프레임 태그

HTML은 한 화면을 여러 프레임으로 나누는 기능을 제공한다.

<HTML>
	<FRAMESET cols="10%,*" border=5>
	<FRAME name="left" src="left.html">
	<FRAME name="right" src="right.html">
	</FRAMESET>
</HTML>

🔼 HTML 프레임 태그의 사용 예

<FRAMESET> 태그를 사용해 전체 화면을 1:9의 비율로 하여 좌우로 나눌 수 있다.
왼쪽 프레임에는 left.html 문서를, 오른쪽 프레임에는 right.html 문서를 표시한다.
화면을 위아래로 나눌 때는 <FRAMESET> 태그의 속성 cols를 rows로 변경하고, 비율을 적절히 지정하면 된다.

03 HTTP

HTTP는 분산 하이퍼미디어 환경에서 빠르고 간편하게 데이터를 전송하는 프로토콜이다.

1 HTTP의 요청과 응답

동작 원리는 다음과 같다.

HTTP 클라이언트가 서버에 요청을 전송한다.
HTTP 서버는 요청의 처리 결과를 의미하는 응답 코드가 포함된 상태 정보를 회신한다.

1.1 비상태 연결

클라이언트와 서버 간의 요청과 응답이 전송되는 과정이다.
TCP 연결이 설정되면서 요청과 응답이 진행되고, 이후 TCP 연결이 해제되기 때문에 둘 사이에는 연결 존재에 따른 상태 정보가 존재하지 않는다.
HTTP는 비상태(stateless) 프로토콜로 분류된다.
- 웹 문서의 내용이 복잡하면 문제를 야기한다.
- 웹 문서 하나가 다양한 그림 정보나 데이터 파일과 연관되기 때문에 성능이 저하될 수 있다.

1.2 MIME 유사 메시지

HTTP의 요청/응답 메시지는 MIME(Multipurpose Internet Message Extensions) 유사 구조를 사용해 데이터를 전송한다.
웹 브라우저에서 발생하는 모든 메시지는 MIME 개체와 거의 유사하게 표현되며, 서버에서 전송된 데이터도 MIME 개체로 표현된다.

1.3 요청 메시지

요청문, 헤더, 바디로 구성된다.

명령	설명
GET	클라이언트가 서버에 URL이 가리키는 웹 문서의 내용을 전송하도록 요구한다. 문서 내용은 서버가 회신하는 응답 메시지의 바디에 포함된다.
HEAD	문서 내용보다는 특정 문서의 정보를 원할 때 사용한다.
POST	클라이언트가 서버에 정보를 전송할 수 있도록 해준다. 보통 게시판, 방명록처럼 사용자가 입력한 정보를 서버에 전달하는 용도로 사용한다.
PUT	클라이언트가 서버에 문서를 전달하려고 사용한다. 문서 내용은 바디에 포함된다.

🔼 요청 메서드의 명령

1.4 응답 메시지

클라이언트로부터 요청 메시지를 수신한 서버는 해당 요구를 처리한 후에 그 결과를 응답 메시지 형식으로 회신한다.
응답 메시지의 구조는 요청 메시지와 거의 동일한데, 요청문 대신 처리 결과를 의미하는 상태문이라는 용어를 사용한다.

코드	이름	의미
200	OK	요청이 성공적으로 수행되었다.
202	Accepted	클라이언트의 요청을 수신하였으나, 즉각 실행되지 않고 있다.
400	Bad Request	요청 메시지의 내용에 문법 오류가 존재한다.
401	Unauthorized	요청을 실행하는 데 필요한 적절한 권한이 존재하지 않는다.
403	Forbidden	서비스 요청이 거부되었다.
404	Not Found	원하는 문서를 찾을 수 없다.
500	Internal Server Error	서버 내부에 불가피한 오류가 발생하였다.
501	Not Implemented	요청 사항을 수행할 수 없다.

🔼 HTTP 상태 코드

2 HTTP의 동작 과정

2.1 요청 메시지

GET /index.php HTTP/1.1 # 요청문
Host: uu.ac.kr		# 헤더
			# 공백 한 줄

HTTP 클라이언트는 임의의 호스트이며, HTTP 서버는 uu.ac.kr이라 가정한다.
요청 메시지에는 요청문, 헤더와 함께 공백 한 줄이 있으며, 바디는 존재하지 않는다.
- GET : 요청 메서드
- /index.php : URL
- HTTP/1.1 : HTTP 버전
- Host: uu.ac.kr : 클라이언트가 요청하는 자원이 있는 서버의 주소
위의 요청 메시지는 HTTP 서버 uu.ac.kr의 최상위 디렉토리 밑에 있는 index.php 파일의 전송을 요청하는 것이다.

2.2 응답 메시지

HTTP/1.1 200 OK	<!-- 상태문 -->

<!-- 헤더 -->
Date: Thu, 12 Feb 2016 06:29:38 GMT
Server: Apache/1.3.29 (Unix) PHP/4.3.4RC3
X-Powered-By: PHP/4.3.4RC3
Transfer-Encoding: chunked
Content-Type: text/html

<!-- 공백 한 줄 -->


<!-- 바디 -->
<HTML>
	<HEAD>
		<TITLE>한국주식회사 홈페이지</TITLE>
	</HEAD>
	<FRAMESET rows="100,*" BORDER="0" frameorder="NO">
	<FRAME SRC="top.htm" name="top" SCROLLING="NO" frameborder="NO" noresize MARGINWIDTH="0" MARGINHEIGHT="0">
	<FRAME SRC="bot.htm" name="bot" SCROLLING="NO" frameborder="NO" noresize MARGINWIDTH="0" MARGINHEIGHT="0">
	</FRAMESET>
</HTML>

🔼 응답 메시지

첫 줄의 HTTP/1.1 200 OK는 상태문이고, 이후 5줄의 헤더와 한 줄의 공백에 이어 <HTML>로 시작하는 웹 문서의 내용이 기록된 바디가 위치한다.
바디 내용은 클라이언트가 요청한 index.php 파일의 내용이다.

2.3 시뮬레이션

kihyun.uu.ac.kr에서 텔넷 프로그램을 사용해 80번 포트로 TCP 접속을 시도함으로써, HTTP가 어떻게 진행되는지 알 수 있다.

텔넷 프로그램으로 HTTP 서버와 연결을 시도하여 요청문과 상태문이 어떻게 전송되는지 설명한다.
1. telnet 명령으로 연결을 시도한다.
2. 텔넷 프로그램의 실행과 관련된 메시지 3줄이 출력되고, 80번 포트에서 대기하던 HTTP 서버와 연결된다.
3. 이후 HTTP 서버는 클라이언트의 요청을 기다리는데, 사용자가 GET/index.php HTTP/1.1, Host:uu.ac.kr 두 줄과 공백 한 줄을 입력한다.
4. 3줄의 요청 메시지를 수신한 HTTP 서버는 HTTP/1.1 200 OK를 시작으로, 응답 메시지를 회신하고 HTTP 동작을 완료한다.

04 CGI

사용자가 입력하는 정보를 처리하려면 CGI(Common Gateway Interface) 기능이 필요하다.

웹 서버와 CGI 프로그램으로 구현된 서버의 컴퓨팅 환경(ex. 데이터베이스)이 클라이언트와 어떤 관계인지 설명한다.

속성	설명
ACTION	사용자의 입력 데이터를 처리할 CGI 프로그램의 URL 주소 지정
METHOD	사용자 데이터를 넘겨주는 방식 지정 - GET 방식: 데이터를 프로그램 환경 변수로 넘김 - POST 방식: 표준 입력 사용
ENCTYPE	데이터 형식 지정

🔼 <FORM> 태그 속성

HTML 문서에서 사용자의 입력을 서버로 전달하는 기능은 <FORM> 태그를 이용해 구현된다.

속성	설명
text	텍스트 입력
password	암호 입력
checkbox	체크 박스
radio	라디오 버튼
submit	입력 데이터 전송
reset	입력 데이터 취소

🔼 <INPUT> 태그 속성

웹 브라우저 화면에 사용자 정보의 입력 형식을 표시할 때는 <INPUT> 태그를 이용한다.

<HTML>
	<HEAD><TITLE>INPUT 태그</TITLE></HEAD>
	<BODY>
		<H1>정보 입력</H1>
		<FROM action="test.cgi">
			이름:<INPUT type="text" name="name" size=10> <BR>
			암호:<INPUT type="password" name="passwd" size=10> <BR>
			전화:<INPUT type="text" name="tel" size=15> <BR>
			학과:<INPUT type="text" name="dept" size=20 value="컴퓨터학과"> <BR>
			<BR><BR>
			<INPUT type="submit" value="승인">
			<INPUT type="reset" value="취소">
		</FROM>
	</BODY>
</HTML>

🔼 <INPUT> 태그의 사용 예

사용자에게서 4가지 정보를 입력받는다.
학과 정보의 기본 값은 '컴퓨터학과'이고, 승인과 취소 버튼을 제공한다.
입력 데이터의 처리는 HTTP 서버의 test.cgi 프로그램이 수행한다고 가정한다.
- 실행 화면에서 <승인> 버튼을 클릭하면 사용자가 입력한 데이터가 test.cgi 프로그램에 전달되어 처리된다.
- test.cgi와 같은 CGI 프로그램을 작성할 때는 범용 프로그래밍 언어를 포함하여, 스크립트 언어도 사용할 수 있다.

Reference

쉽게 배우는 데이터 통신과 컴퓨터 네트워크

LIST

'Computer Science > 네트워크' 카테고리의 다른 글

[쉽게 배우는 데이터 통신과 네트워크] CH15. 전자 메일 (0)	2024.06.18
[쉽게 배우는 데이터 통신과 네트워크] CH14. DNS (0)	2024.06.15
[쉽게 배우는 데이터 통신과 네트워크] CH12. 소켓을 이용한 네트워크 프로그래밍 (0)	2024.06.12
[쉽게 배우는 데이터 통신과 네트워크] CH11. 상위 계층의 이해 (0)	2024.06.11
[쉽게 배우는 데이터 통신과 네트워크] CH10. 전송 계층 (0)	2024.06.09

so._.hyeon

[쉽게 배우는 데이터 통신과 네트워크] CH13. 웹(WWW)

01 웹 서비스

1 클라이언트-서버 모델

2 APM의 웹 서비스 구조

2.1 APM의 동작 원리

2.2 PHP 코드의 처리

02 HTML

1 HTML 문서의 구조

2 기본 태그

3 표 태그

4 프레임 태그

03 HTTP

1 HTTP의 요청과 응답

1.1 비상태 연결

1.2 MIME 유사 메시지

1.3 요청 메시지

1.4 응답 메시지

2 HTTP의 동작 과정

2.1 요청 메시지

2.2 응답 메시지

2.3 시뮬레이션

04 CGI

Reference

'Computer Science > 네트워크' 카테고리의 다른 글

티스토리툴바

[쉽게 배우는 데이터 통신과 네트워크] CH13. 웹(WWW)

01 웹 서비스

1 클라이언트-서버 모델

2 APM의 웹 서비스 구조

2.1 APM의 동작 원리

2.2 PHP 코드의 처리

02 HTML

1 HTML 문서의 구조

2 기본 태그

3 표 태그

4 프레임 태그

03 HTTP

1 HTTP의 요청과 응답

1.1 비상태 연결

1.2 MIME 유사 메시지

1.3 요청 메시지

1.4 응답 메시지

2 HTTP의 동작 과정

2.1 요청 메시지

2.2 응답 메시지

2.3 시뮬레이션

04 CGI

Reference

'Computer Science > 네트워크' 카테고리의 다른 글

'Computer Science/네트워크' Related Articles

티스토리툴바