웹 3대 요소

DASOM KIM·2022년 1월 12일
0
post-thumbnail

이 글을 시작하기 앞서 다양한 블로그 및 홈페이지에서 이미지 포함 긁어서 정리한 글 입니다.

웹(Web : World Wide Web) 이란?

World Wide Web의 줄임말 이며, WWW또는 W3라고도 부릅니다.

🌐 인터넷에 연결된 사용자들이 정보를 공유할 수 있는 공간을 의미합니다.

웹 3대 요소

[이미지 출처(https://blog.kakaocdn.net/dn/bxWtUq/btqtVIEbhCF/4FPwfJ5rm0MR0Ba7mlc9D0/img.png)

웹을 구성하는 3대 요소로 HTML, HTTP, URI이 있습니다. HTTP는 웹 서버와 웹 클라이언트 간에 통신을 할 수 있도록 지원해주며 URI은 웹 클라이언트가 웹 서버로 리소스(자원) 요청 후 HTML이 담긴 응답을 맡으며 웹 클라이언트 프로그램인 웹 브라우저가 이를 해석하여 사용자에게 구조화된 인터페이스를 출력하여 보여줍니다.

🌞 HTML (Hypertext Markup Language)

HyperText란 연결이 가능한 텍스트란 뜻으로 HTML은 연결 가능한 텍스트 방식인 링크를 통해 웹 상의 모든 리소스를 표기할 수 있는 언어입니다.  HTML을 통해 웹 상의 모든 리소스들은 연결이 가능하고 연결을 통해 무한한 정보를 웹을 통해 제공할 수 있다는 뜻이기도 합니다.

  • 웹문서를 만들기 위하여 사용하는 기본적인 웹 언어이다.
  • 웹의 구조(제목, 문단, 표, 이미지 등)를 담당
  • HTML, CSS, JavaScript 정적 컨텐츠

🌞 HTTP (Hyper Text Transfer Protocol)

  • 웹 상에서 정보를 주고 받을 수 있는 프로토콜(통신규약 또는 규칙)입니다.
  • 웹 브라우저(클라이언트)와 서버 간에 HTML문서, 리소스, 데이터 (등등) 을 주고 받기 위한 방식으로 HTTP프로토콜을 사용하고 있습니다.
  • Port Number : 80

🔸 클라이언트 서버 구조

클라이언트는 웹 브라우저로 통해 서버에게 정보를 요청(Requset)하여 응답(Reponse)을 받아 해당 결과를 사용합니다. 웹 서버와 웹 브라우저가 대표적으로 서버-클라이언트 관계입니다.

클라이언트가 서버로 요청할때 보내는 것을 HTTP 요청 메시지 (HTTP Request Message)

서버가 클라이언트로 응답을 보내는 것을 HTTP 응답 메시지 (HTTP Response Message)

  • 클라이언트? 서버가 제공하는 인터넷 서비스(웹 브라우저) 를 이용하는 사용자 또는 사용자가 사용하는 기기를 의미합니다.
  • 서버? 인터넷 서비스를 제공하는 프로그램이나 컴퓨터를 의미합니다. 서버의 종류 중 대표적으로 웹 서버(Web Server - WS) 와 웹 어플리케이션 서버(Web Application Server - WAS) 가 있습니다.

웹 서버 (Web Server) : 정적인 컨텐츠 처리

  1. 클라이언트가 웹 브라우저에서 페이지 요청을 하면 웹 서버에서 해당 요청(HTTP프로토콜) 을 받아 정적인 컨텐츠를 제공하는 서버입니다. 정적 컨텐츠란 HTML문서, CSS, JavaScript, 이미지 등 즉시 응답이 가능한 컨텐츠 이며, 항상 동일한 페이지를 반환합니다.
  2. 클라이언트가 요청하면 언제든지 웹 서비스를 제공해 줘야 하므로, 웹 서버는 항상 실행되어 있어야 합니다.
  3. 대표적인 웹 서버 : Apache(아파치), IIS(인터넷 정보), 엔터프라이즈 서버
  • 정적 페이지 (Static pages)? Html, Css, JavaScript, Image 파일과 같이 컴퓨터에 저장되어 있는 파일들을 의미합니다. 웹 서버에서 요청에 알맞은 파일을 반환하며, 항상 동일한 페이지를 반환합니다.


웹 어플리케이션 서버 (Web Application Server) : 동적인 컨텐츠 처리

  1. HTTP프로토콜을 통해 컴퓨터나 장치에 애플리케이션을 수행해주는 미들웨어(소프트웨어 엔진) 입니다. 데이터베이스 조회 또는 다양한 비즈니스 로직 같은 서비스를 수행하는 동적인 컨텐츠를 제공하는 서버입니다. 동적컨텐츠란 들어온 요청에 맞게 동적으로 만들어진 컨텐츠을 의미합니다.
  2. 웹 서버와 웹 컨테이너가 합쳐진 형태로서, 다양한 역할을 수행할 수 있습니다. 사용자의 다양한 요구에 맞춰 웹 서비스를 제공 할 수 있습니다.
  3. 대표적인 웹 애플리케이션 서버 : Tomcat, Jeus, JBoss
  • 동적 페이지 (Dynamic pages) ? 들어온 요청에 맞게 동적으로 만들어진 컨텐츠를 의미한다. 데이터베이스, 서버 내 로직 등을 활용해 만들어진 컨텐츠를 반환한다.
  • 웹 컨테이너? 웹 서버가 보낸, JSP나 PHP 등의 파일을 수행한 결과를 다시 웹 서버로 보내주는 역할을 한다.

Web Server & WAS 분리 이유

  • 효율성
  • 기능 분리로 서버 부하 방지

WAS는 주로 동적 컨텐츠를 제공하는 서버이기에 WAS가 정적 컨테츠 까지 요청까지 처리하면, 부하가 커지고 동적 컨텐츠 처리가 지연 되면서 수행 속도가 느려지고, 이로 인해 페이지 노출 시간이 늘어나는 문제가 발생하여 효율성이 떨어집니다. 이 때문에 웹 서버와 WAS를 함께 사용합니다. 웹 서버는 정적컨텐츠 처리, WAS는 동적 컨텐츠 처리

🔸 웹 구조 및 동작

  1. 클라이언트가 웹 브라우저를 통해 주소(URL) 요청
  2. DNS서버로 도메인 이름을 보내면, DNS는 해당 주소를 IP주소로 변환
  3. 웹 브라우저는 웹 서버(WS)에 IP주소로 접속 요청 : HTML과 같은 정적 컨텐츠 요청
  4. 해당 요청을 웹 어플리케이션 서버(WAS)에 전달 후 필요시 DB요청
  5. DB에서 응답 후, 다시 웹 어플리케이션 서버(WAS)를 거쳐 생성된 동적 컨텐츠를 웹 서버(WS)를 통해 웹 브라우저로 응답
  6. 웹 브라우저에서 클라이언트가 요청 한 화면을 볼 수 있다.
  • IP주소 ? 인터넷으로 통신하는 각 device(컴퓨터, 통신장비)에 부여된 고유한 값이다.
  • Domain(도메인) ? 문자로 된 고유 주소이다.
  • DNS (Domain Name System) ? 도메인이나 호스트이름을 숫자로 된 IP 주소로 변환하는 프로토콜

🌞 URI(Uniform Resource Identifier) : 통합 자원 식별자

SCHEME : 통신 프로토콜

예) file:// http:// https://

HOSTS : 웹 페이지,이미지,동영상 등의 파일이 위치한 웹 서버, 도메인 또는 IP

예) 127.0.0.1 www.naver.com

PORT : 웹 서버에 접속하기 위한 통로

예) :80, :443, :3000

URL-PATH : 웹 서버의 루트 디렉토리부터 웹 페이지, 이미지, 동영상 등 위치한 경로와 파일명의 위치까지의 경로

QUERY : 웹 서버에 전달하는 추가적인 질문

  • URI는 통합 자원 식별자의 줄임말입니다. 웹에 존재하는 리소스(자원)에 접근하기 위해 유일한 주소를 가진 식별자를 의미합니다. (다양한 리소스들이 어디에 위치하고 있는지, 유일성을 보장 받는 주소 식별 체계) 리소스(자원)의 종류는 이미지, 오디오파일, 동영상파일, 텍스트 등 웹 상에 존재하는 다양한 종류의 리소스를 통칭해서 말합니다.
  • 사용자들은 웹 브라우저에 웹 사이트 주소 도메인 또는 도메인과 정확한 웹 페이지 입력을 통해 특정 웹 사이트에 서비스를 요청합니다. 사용자가 직접 URI정보를 지정할수 있게 제공되는 방식이 웹 브라우저의 주소 입력란이며, 이 주소 입력란에 입력된 정보를 URL(Uniform Resource Locator)이라고 합니다. 웹 상에서 존재하는 어떠한 리소스에 접근하기 위한 유일한 주소를 말합니다. 웹페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타냅니다.
  • URI의 하위 속성에 URL과 URN이 있다.



### 참고 자료

인터넷과 웹의 개념

HTML CSS JavaScript

웹서버(Web Server) 와 웹 어플리케이션 서버 (WAS)

[Web] Web Server와 WAS의 차이와 웹 서비스 구조 - Heee's Development Blog

Web Server와 WAS(Web Application Server)의 차이( feat. 미들웨어)

[서버]웹 서버와 웹 어플리케이션의 차이

[Server_Note] 1.웹 애플리케이션 구조(1)

profile
개(발자 어)린이 입니다.

0개의 댓글