[#72 ~ 73]WWW & URL

#72강 월드 와이드 웹은 무료다

월드 와이드 웹(W3)은 막대한 양의 문서에 범세계적으로 접근할 수 있는 시스템을 만드는 것을 목표로 하는 광역 하이퍼 미디어 정보 검색 시스템이다. 

World Wide Web(월드 와이드 웹)

• 월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. 

간단하게 웹(web)으로 부르는 경우가 많은데 해당 용어와 인터넷과 동의어로 쓰이는 경우가 많으나 엄격히 말해 서로 다른 개념이다. 

인터넷은 전 세계의 수많은 컴퓨터가 서로 쉽게 정보를 교환할 수 있도록 하는 통신 인프라 또는 하위 계층이다. 

• 인터넷에서 HTTP 프로토콜, 하이퍼텍스트, HTML형식 등을 사용하여 그림과 문자를 교환하는 전송방식을 말하기도 한다. 
• 1989년 3월 컴퓨터 과학자 팀버너스리(Tim Berners-Lee, 영국 옥스퍼드 대학 교수)가 만들었다.
• 웹은 세계의 여러 대학과 연구기관에서 일하는 물리학자들 상호간의 신속한 정보교환과 공동연구를 위한 프로그램으로 고안되었다.

월드 와이드 웹은 어디에나 존재하며 효율적이고 기본적으로 무료인 하부 네크워크(인터넷)가 존재한다는 전제 하에 다음 4가지 조건이 중요하다.

 

1. URL(Uniform Resource Locator, 균일 자원 지시자) - 정보의 출처에 대한 이름을 지정한다. 통칭 web address(웹 주소)

 

2. HTTP(Hypertext Transfer Protocol, 하이퍼텍스트 전송 프로토콜 // 통신규약같은 것) - 상위 레벨 프로토콜 

HTTP 클라이언트가 특정 URL에 대한 요청을 보내면 서버는 요청된 정보를 반환합니다. 즉 해당 통신규약을 이용해서 컴퓨터가 다른 컴퓨터와 메세지를 주고 받을 수 있는 것입니다. 

*여기서 상위 레벨 프로토콜이란 OSI 계층 모델에서 계층 번호 4  ~ 7에 해당하는 계층을 말합니다. HTTP는 OSI Layer 7인 응용계층(Application)으로 네트워크 이용자의 상위 레벨 영역에 해당합니다.

자세한 내용은 아래 링크 참고

 https://www.minzkn.com/moniwiki/wiki.php/OSI_7LayerModel

MINZKN

 

 

 

3. HTML (Hypertext Markup Language, 하이퍼텍스트 마크업 언어)이다. HTML은 서버가 반환하는 정보 서식이나 표시 방식을 설명하기 위한 언어다. 

*HTML은 프로그래밍 언어는 아니며 우리가 보는 웹페이지가 어떻게 구조화되어 있는 지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 웹을 이루는 가장 기초적인 구성요소이며 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. 
*하이퍼 텍스트란 웹페이지를 다른 페이지로 연결하는 링크를 말한다. 링크는 웹의 근본적인 속성이다.

HTML을 뼈대/구조 CSS를 모양/표현 JS를 동작/기능 이라고 생각하면 됩니다. 

 

4. 마지막으로 브라우저(Browser)가 있다. 브라우저는 컴퓨터에서 실행되는 프로그램으로 URL과 HTTP를 사용하여 서버에 요청을 보내고 서버에서 보낸 HTML을 가져와 화면에 표시하는 역할을 한다. 

e.g.) 크롬, 파이어폭스, 사파리, 엣지  등 

 

아래는 한국 웹 브라우저 2022년 시장 점유율 트렌드 현황이다. 

크롬 52.77% > 사파리 13.48% > 삼성 인터넷 13.18% > 웨일9.43% > 엣지 7.32% > IE 1.24(%)*IE 종료함

2022년 6월 15일 인터넷익스플로러 서비스 종료

   최초의 브라우저인 모자이크(Mosaic, 1993년 2월)는 일리노이 대학의 학생들이 만들었으며 1년만에 최초의 상용 브라우저인 넷스케이프 내비게이터(Netscape Navigator)가 나왔다. 그 이후, 마이크로 소프트가 경쟁 제품인 인터넷 익스플로러(IE)를 신속히 출시했고 IE가 큰 격차를 벌리며 가장 널리 사용되는 브라우저가 됐다. 

   1998년 미국 법무부가 마이크로 소프트에 독점 행보에 대한 소송을 제기(넷스케이프를 인터넷 사업에서 몰아내기 위해 지배적인 지위를 이용했다는 명분)했고 해당 소송에서 마이크로 소프트가 패소하면서 사업관행을 변경할 수 밖에 없었다. 2015년에 MS는 윈도우 10용으로 IE를 대체할 엣지(Edge)라는 새로운 브라우저를 출시했고 IE는 역사속으로 사라졌다(2022 06 15 IE서비스 종료). 2012년 5월부터 IE를 제치고 현재 전 세계에서 가장 많이 쓰이는 웹브라우저는 크롬이다. 

 

   웹의 기술적 진화는 비영리 조직인 월드 와이드 웹 컨소시엄 즉, WC3(w3.org)가 관리하거나 방향을 제시한다.(개방형 표준을 개발하는 국제 커뮤니티)  

• 해당 조직의 설립자이자 현재 책임자인 버너스리는 모든 사람이 인터넷을 무료로 이용할 수 있길 원하는 자신의 철학을 이어가고 있다.

---

#73 URL의 의미 

   URL(Uniform Resource Locator 또는 통칭 web address, 문화어: 파일식별자)은 네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다. 즉, 컴퓨터 네트워크와 검색 메커니즘에서의 위치를 지정하는, 웹 리소스에 대한 참조이다. 쉽게 말해서, 웹 페이지를 찾기위한 주소를 말한다. 흔히 웹 사이트 주소로 알고 있지만, URL은 웹 사이트 주소뿐만 아니라 컴퓨터 네트워크상의 자원을 모두 나타낼 수 있다. 그 주소에 접속하려면 해당 URL에 맞는 프로토콜을 알아야 하고, 그와 동일한 프로토콜로 접속해야 한다.

• FTP(파일 전송 프로토콜)는 FTP 클라이언트를 이용해야하고 HTTP인 경우 웹 브라우저를 이용해야 한다. 

파일 전송 프로토콜(File Transfer Protocol, TCP)은 TCP/IP 프로토콜을 가지고 서버와 클라이언트 사이의 파일 전송을 하기위한 프로토콜이다. 

 

   크롬으로 웹 페이지를 보고있다고 가정하면 어떤 페이지의 일부 텍스트가 파란색이고 밑줄이 그어져 있다. 해당 텍스트를 클릭하면 현재 페이지가 파란색 텍스트에서 연결되는 새 페이지로 바뀐다. 이처럼 페이지를 연결하는 것을 하이퍼텍스트(텍스트를 초월한)라고 한다.

ULR 자체는 정보를 인코딩한다 

• URL의 첫번째 부분인 http는 사용할 특정 프로토콜을 알려주는 몇 가지 선택지 중 하나이다. HTTP가 가장 흔히 사용되지만 다른 종류도 볼 수 있다! 
• 웹에서 온 것이 아닌 로컬 컴퓨터에 있는 정보를 나타내는 file, 그리고 https가 있다. 

출처: https://trustit.tistory.com/159 [FreshCrush, Developer:티스토리]

URL 구조 이해하기

• 프로토콜: 컴퓨터끼리 네트워크 통신을 할 때 통신 규격(규약) , 웹에서는 HTTP 프로토콜을 이용한다. 요즘은 여기에 보안을 더한 것이 HTTPS 프로토콜을 많이 이용한다. 

HTTP프로토콜을 사용하면 브라우저 클라이언트의 요청과 함께 몇줄의 추가정보를 보낼 수 있으며, 서버의 응답에는 일반적으로 데이터의 양과 종류에 대한 정보를 담은 여분의 행이 포함된다. 

• 호스트 주소: 도메인 네임 or IP주소가 들어가는 곳 호스트 주소는 결국 컴퓨터의 주소를 표시하는 영역이다.
  • 도메인 네임 뒤에는 슬래시(/)와 문자열이 올 수 있다. 해당 문자열은 서버에 그대로 전달되며, 서버는 문자열을 원하는 대로 처리한다. 가장 단순한 경우는 아무것도 없는 경우(슬래시도 없음)인데 이 때는 서버가 index.html 같은 기본 페이지를 반환한다. 
  • 도메인 네임 뒤에 오는 텍스트는 한정된 문자 집합으로 작성된다. 영문자, 숫자만 허용 나머지 문자와 공백은 허용되지 않으므로 제외 문자들은 인코딩되어야 한다. -> 플러스 기호 +는 공백을 인코딩한 것이고, 다른 문자들은 퍼센트 기호 %와 두 개의 십육진 숫자로 인코딩된다.  e.g.)  5%2710%22%2D6%273%22 는 5'10"-5'3"을 의미한다.
  • URL 인코딩 이유? URL은 ASCII 문자 집합을 사용하여 인터넷을 통해서만 전송할 수 있기 때문임
• 포트번호: 컴퓨터에서 실행되고 있는 수많은 프로세스들의 주소이다. 우리가 사용하는 URL을 잘 보면 포트번호가 보이지않는데 이는 기본적으로 포트번호를 입력하지 않았을 경우 프로토콜이 기본적으로 가지고 있는 기본 포트번호가 적용되기 때문입니다. HTTP의 경우 80번, HTTPS의 경우는 443번 포트번호가 기본이다.
• 경로: 서버 프로그램 내에 짜인 로직으로 가는 영역이다. e.g) api설계에서 /product/{id} 이런 것들
• 쿼리: URL에서 추가적인 데이터를 표현할 때 사용된다. query는 path뒤에 ?(물음표)를 기점으로 key=value 형태로 데이터를 표현한다. 

 

 

일반적으로 파일 이름 맨 앞부분 다음에 오는 물음표는 서버가 (?)물음표 앞 부분에 해당하는 이름의 프로그램을 실행하고 나머지 텍스트를 해당 프로그램에 전달해야 함을 뜻한다. 이는 웹 페이지의 폼(form)에 입력된 정보가 처리되는 방법 중 하나다. e.g.) https://www.bing.com/search?q=funny+cat+pictures

 

HTML 폼(form) 이해 

- 폼은 입력된 데이터를 한 번에 서버로 전송한다. 전송한 데이터는 웹 서버가 처리하고 결과에 따른 또 다른 웹 페이지를 보여준다. 

 

form 태그 동작방법 

1. 폼이 있는 웹 페이지 방문
2. 폼 내용 입력(input값)
3. 폼 안에 있는 모든 데이터를 웹 서버로 보내기
4. 웹 프로그램은 폼 데이터 처리
5. 처리 결과에 따른 새로운 html 페이지를 웹 서버에 보내기 
6. 웹 서버는 받은 html 페이지를 브라우저에 보내기
7. 브라우저는 받은 html 페이지를 보여줌

 

✅GET 방식은 폼 데이터를 URL 끝에 붙여서 눈에 보이게 하지만 POST 방식은 내부적으로 보이지 않게 보낸다. 

위가 GET 아래가 POST 방식

form 태그 관련 자세한 내용은 아래 링크를 참고

https://www.nextree.co.kr/p8428/

HTML : 폼(form) 이해

https://trustit.tistory.com/159

URL 인코딩이란?