[기초 이론] 2. WWW (World Wide Web)과 URL

이 포스트는 인프런의 반드시 알고 넘어가야 할 웹 기술 기초편 을 보고 작성하였습니다!

 

 

2-1. WWW (World Wide Web)

-통상 web(웹)이라고 지칭한다.

 

(1) 웹이란,

다수의 네트워크가 모여서 형성된 공간이다.

디바이스의 제약이 없으며 웹 클라이언트만 있으면 접근이 가능하다.

정보공유와 교류의 공간이 된다.

 

(2) 웹의 탄생과 발전

유럽 입자 물리 연구소의 소프트웨어 공학자인 팀 버너스리가 

멀리 떨어져 있는 동료들끼리 , 시간, 공간 제약없이 지식을 공유하기 위해 고안된 기술이다.

최초의 웹은 하이퍼텍스트 중심으로 구성을 하였다.

 

(3) 웹의 역사

① 웹1.0: 초기 웹.

<특징>

•  텍스트로 구성 (글만 있는 것) 

⇒ 이용자는 일방적으로 정보를 제공받는다(수정, 변경 불가능)

    서버는 서비스를 제공만하는 형태

• 하이퍼텍스트를 이용해 다른페이지로 이동

	클라이언트	서버
역할	정보를 제공 받음.	정보를 제공함.

* 하이퍼 텍스트란?

hyper와 text의 합성어이다.

한 문서에서 다른 문서로 접근할 수 있는 링크이다. 

* 웹 서핑이란?

한 문서에서 다른 문서로 이동할 때 그 활동을 웹서핑이라고 지칭힌다. 

 

②웹2.0

• 예시: ucc, 블로그, 커뮤니티

⇒ 이미지를공유, 참여가능

이제 클라이언트는 정보를 제공받을 뿐만아니라 작성하고 수정할 수 있다.

 

 

(4) 웹브라우저의 탄생과 발전

①웹브라우저: 웹을 사용할 수 있는 시작점이다.

웹서버와 통신으로 요청과 응답을 주고 받고 html, css, javascript등의 클라이언트 언어를 해석하여 사용자에게 그래픽 인터페이스(GUI)를 제공하는 클라이언트 프로그램이다.

예시: 인터넷 익스플로어, 구글 - 크롬, 애플 - 사파리, 파이어폭스, 오페라 등등.

 

*html, css, javascript

• html: 브라우저의 틀을 구성

• css: 폰트, 색깔

• js: 동적제어

(5) 웹을 구성하는 3대요소

① 웹의 기본구조: 클라이언트 - 서버 구조

• 클라이언트: 웹을 이용하는 사용자.

클라이언트 프로그램은 웹브라우저가 된다.

 

• 서버(웹서버/웹 어플리케이션 서버): 웹을 제공하는 대상. 

사용하는 서버에 따라 PHP, JSP(JAVA), ASP 등으로 해석할 수 있는 언어가 다르다. 

 

★클라이언트/ 서버의 차이점: 서비스의 제공방향

 

② 통신원리

클라이언트는 서비스의 이용 대상이기 때문에 서비스 이용시 최초로 서비스를 요청한다. 

서버는 클라이언트로 부터 요청을 받으면 그에 알맞은 서비스를 제공한다. 

 

 

 

 

 

 

③ 3대요소 - HTML(Hypertext Markup Language), HTTP, URL

 

 

 

• HTTP: 웹 서버와 웹 클라이언트 간에 통신을 할 수 있게 도와준다.

• URL: 웹 클라이언트가 서버에 요청메세지를 보낼 수 있게 도와준다. 

• HTML: 위 과정을 통해 서버가 웹 클라이언트에게 응답메세지를 보내면 HTML 이 남긴 응답을 받고, 웹 클라이언트 프로그램인 웹 브라우저가 이를 해석해 사용자에게 구조화된 인터페이스를 출력한다. 틀을 잡고, CSS와 JAVA SCRIPT 를 불러와 구성한다.

 

---

2-2. URL

:Uniform Resource Locator(통합자원지시자, 인터넷 리소스)

 

• 웹 클라이언트가 서버에 자원을 요청할 때 사용한다. 

• URL을 이용해 인터넷 상의 모든 리소스를 요청가능하다.

• HTTP, FTP, SMTP관련된 자원 요청 가능하다.

 

 

 

(1) URL 구조

① 스키마 부분: 통신 프로토콜을 명시하는 부분이다.

• 위 예시는 HTTP프로토콜로 자원을 요청하는 경우이다.
• 이 외에도 HTTPS, FTP, FILE등이 있다.

② 호스트 부분: 서버주소인 호스트 부분을 명시하는 부분이다.

• 자원을 가진 컴퓨터의 위치이다.

• 웹 브라우저에서는 이를 참조해 IP 주소를 알아낸다.

• 포트 번호 표시방법:     : 포트번호

• 표기하지 않은 경우, 80포트(기본)이다.

③ 자원이 존재하는 디렉토리

∨ 동적자원이면 이름이 바로 나온다.

∨ 정적자원이면 디렉토리를 표기한다.

* 상위 디렉토리에 자원이 존재할 경우 디렉토리는 표기하지 않는다.

 

④ 요청할 자원의 이름

이 예시는 도메인만 호출하는 경우인데 도메인만 호출하는 경우 웹서버에 설정된 기본 페이지가 호출된다.

웹 서버의 기본 페이지는 대부분 INDEX페이지이다. 

IIS의 경우 Default 페이지가 호출되기도 한다.

 

 

(2) URL 예약문자 (메타문자): 특정 기능을 하는 문자이다.

웹 클라이언트와 서버간에 서로 예약되어 있는 문자

 

①예약문자 종류

문자	인코딩
?	파라미터가 시작 된다는 것을 알려준다.
=	파라미터 값을 대입한다.
&	다음 파라미터 식별자이다.
+	공백을 의미한다.
! * ' ( ) ; : @ $ , / # [ ]	그 외 문자들..

• ? : 자원과 사용자 입력 값을 구분하는 기준이다.

∨ GET 방식의 경우 파라미터(사용자 입력값)가 URL 뒤에 붙는다. ⇒기준이 ? 이다.

 

• = : 대입 기호이다.

∨ 형식: (파라미터 명)=(파라미터값) 

• + : 공백으로 해석된다

∨ 예시: test + is = test is

• # : 뒤에서 끊어버린다. 뒤에 있는 모든 명령어는 아예 하지 않는다.

②예시

 

 

데이터에 URL예약문자가 들어갈 경우(ex, 패스워드) 전송방법은 어떻게 해야할까??

 

→ (3)데이터 인코딩: 예약문자를 단순 데이터로 보내기 위한 방법

웹 브라우저를 사용할 경우 자동으로 URL 인코딩이 된다.

문자	인코딩
&	%26
%	%25
+	%2B
공백	%20
=	%3D
#	%23
'	%27
?	%3F

∨ 화이트해커 입장에서는 프록시를 이용해서 인코딩 된 것을 보고, 웹으로 보낼 때는 다시 인코딩을 해서 보내줘야 한다.