웹 구조와 HTTP

※ 본 내용은 공부 목적으로 작성된 내용입니다 ※ 잘못된 부분이 있으면 언제든지 댓글로 알려주세요!

📄 HTML 이란 무엇인가?

HTML(Hypertext Markup Language)는 프로그래밍 언어가 아니라 마크업 정보를 표현하는 웹 페이지 언어입니다 웹 페이지는 HTML 문서라고 부르고, HTML은 태그로 구성되어 있습니다 각각의 태그가 웹 페이지 디자인이나 기능을 결정하는 데 사용합니다

HTML 태그는 태그 이름 앞에 꺾쇠괄호(<>)로 감싸서 표현합니다

이 태그는 시작 태그와 종료 태그로 구성되는데 시작 태그는 꺾쇠괄호 (<이름>) 안에 태그 이름을 붙이지만 종료 태그는

태그 이름 앞에 슬래시(</이름>)으로 표현합니다

HTML 문서는 기본적으로 head 부분과 body 영역으로 구성됩니다

✅ HTML 버전

위 사진에서 <!DOCTYPE html>이라는 문서 타입이 설정되어 있는데 이 문서 타입은 HTML 문서를 작성할 때 가장 먼저 작성해야 합니다 이러한 문서 설정은 문서 유형에 따라 마크업 문서의 요소와 속성 등을 처리하게 됩니다

버전	년도	DOCTYPE 및 설명
HTML 1.0	1991	팀 버나스리가 발표한 최초의 HTML
HTML 2.0	1995	국제 표준으로 제정된 최초의 HTML
HTML 3.0	1997	W3C에 의해 제정된 최초의 HTML
HTML 4.01	1999	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 1.0	2000	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5	2014	<!DOCTYPE html>

W3C(World Wide Web Consortium) : 월드 와이드 웹(www)을 위한 표준을 제정하고 관리하는 중립적인 기관입니다

🖧 HTTP, HTTPS 프로토콜 차이점

우리가 URL을 통해 웹 페이지에 방문할 때 URL 앞에 HTTP와 HTTPS를 붙이는 걸 알 수 있습니다 여기서 HTTP는 Hyper Text Transfer Protocol 약자로 클라이언트와 서버 간 통신을 위한 프로토콜입니다

사용자가 웹 사이트에 접속할 때 접속한 웹 서버에 HTTP 요청을 전송하고 웹 서버는 HTTP로 응답합니다 간단히 설명하자면 HTTP 프로토콜은 네트워크 통신을 작동하게 하는 방법입니다 하지만 HTTPS(HyperText Transfer Protocol Secure)는 HTTP 보다 보안적인 면에서 확장된 버전입니다 이러한 HTTPS는 클라이언트가 웹 서버에 데이터를 전송하기 전에 암호화된 연결을 사용하게 됩니다

HTTP는 암호화되지 않은 데이터를 전송하기 때문에 웹 사이트에서 전송된 정보를 다른 사용자가 몰래 가로챌 수 있습니다 이때 HTTPS를 사용하면 웹 서버에 모든 데이터를 암호화된 형태로 전송하기 때문에 중간에 정보를 가로채는 행위를 방지할 수 있습니다

	HTTP	HTTPS
의미	Hyper Text Transfer Protocol	Hyper Text Transfer Protocol Secure
기본 프로토콜	HTTP/1과 HTTP/2는 TCP/IP를 사용합니다. HTTP/3은 QUIC 프로토콜을 사용합니다.	HTTP 요청 및 응답을 추가로 암호화하기 위해 SSL/TLS와 함께 HTTP/2 사용
포트	80	443
용도	이전 텍스트 기반 웹 사이트	모든 최신 웹 사이트
보안	추가 보안 기능 없음	퍼블릭 키 암호화에 SSL 인증서 사용
이점	인터넷을 통한 통신 지원	웹 사이트에 대한 권위, 신뢰성 및 검색 엔진 순위 개선

💻 클라이언트 사이드와 서버 사이드

클라이언트 사이드(Client-side)란 사용자 컴퓨터에서 처리하는 것을 의미합니다

사용자가 입력한 정보를 HTML로 변환하여 네이버나 다른 웹사이트 서버에 데이터를 전송하는데 이 전송된 데이터를 해석해서 정보를 나타내줍니다
대표적으로 자바스크립트(Javascript)를 사용하여 만들어진 웹 페이지가 있습니다

서버 사이드(Server side)는 서버 측에서 처리하는 것을 의미합니다

클라이언트에게 받은 정보를 처리하고 그 결과를 웹 브라우저에 송신과 응답하는 역할을 합니다
클라이언트로부터 요청받은 정보를 PHP, Ruby, Java, Node.js 등의 서버 사이드 프로그래밍 언어를 사용하여 브라우저에게 송신합니다

즉 클라이언트 사이드는 사용자의 브라우저나 클라이언트 기기에서 작동되고 서버 사이드는 웹 서버나 서버 컴퓨터에서 작동됨

클라이언트 사이드 : HTML, CSS 및 JavaScript로 작성된 웹 페이지에서 발견됨 ( 프론트 엔드 )

서버 사이드 : 백엔드 개발 언어로 작성된 웹 애플리케이션 서버에서 발견됨

🔨 클라이언트와 서버 사이드에 데이터 처리 부분 🔨

클라이언트 사이드(Client side)의 처리

장점 : 서버 관리자 입장에서 서버의 처리 부담을 줄여 서버 비용을 줄일 수 있다
단점 : 개발자 모드(F12)를 이용하여 클라이언트 입장에서 데이터를 위조하기 쉽다

서버 사이드(Server side)의 처리

장점 : 클라이언트 입장에서 데이터 위조를 줄일 수 있다
단점 : 서버 관리자 입장에서 서버에 대한 처리 부담이 커서 서버 비용이 늘어날 수 있다

웹 서버 구조

위에서 간단하게 HTML 구조에 대해 설명했는데 이번에는 HTML으로 구현된 웹 서버의 동작 구조를 살펴보겠습니다 웹 서버의 동작 구조는 간단하게 클라이언트가 웹 페이지에 데이터를 전송하면 전송된 데이터에 맞는 정보를 웹 서버가 클라이언트에게 응답해 주는 구조입니다 이 구조는 얼핏 보면 간단해 보이지만 내부에서는 세밀한 과정이 필요합니다

먼저 우리가 네이버 홈페이지에 접속한다고 가정해 볼 때 (우리 = 사용자, 네이버 홈페이지 = 웹 클라이언트를 뜻함)

여기서 웹 클라이언트는 사용자가 웹에 접근하는 프로그램을 말합니다 우리가 보는 웹은 대부분 브라우저에서 실행되기 때문에 보통 Chrome이나 Internet Explorer 등의 웹 브라우저를 웹 클라이언트라고 합니다

즉 사용자 브라우저 주소창에서 https://www.naver.com 주소를 입력하고 엔터키를 누르면 클라이언트는 사용자가 입력한 주소의 정보를 찾아 HTTP 메시지 형태로 서버에 요청하게 됩니다

요청받은 웹 서버는 HTTP 메시지를 확인하여 해당 주소에 대한 정보를 클라이언트에게 전송합니다

이때 웹 서버는 WAS(Web Application Server)라는 요소와 함께 일을 하는데 WAS는 예를 들어 우리뿐만 아니라 여러 명의 다른 사람들이 네이버 홈페이지에 접속한다고 가정해 보면 요청하는 사람이 여러 명인데 그걸 처리하는 웹 서버는 혼자서 데이터를 해석하고 응답해야 합니다 이 과정에서 과부하가 일어났을 때 WAS는 웹 서버가 하는 일을 분담해서 도와주는 역할을 합니다

웹 서버는 클라이언트에게 받은 데이터를 WAS에게 해당 데이터의 로직이나 데이터베이스의 연동을 맡기게 됩니다 그러면 WAS는 이 요청을 받고 로직과 DB에서 데이터 정보를 가져오게 됩니다 이처럼 WAS는 웹서버를 도와주는 역할과 더불어 DB에서 데이터 정보를 가져오는 미들웨어 라고 합니다

마지막으로 DB는 데이터의 정보를 보관하는 저장소입니다 WAS에서 데이터를 요청받으면 해당 데이터의 정보를 보내줍니다 사용자가 네이버 로그인 정보를 요청할 때 웹 서버는 WAS에게 부탁해서 사용자에 로그인 데이터를 DB에게 요청하게 됩니다 그러면 DB는 사용자 정보를 WAS에게 넘겨주게 됩니다

(DB는 사용자에 로그인 정보와 같이 데이터를 보관하는 저장소입니다)

간단한 정리 : 사용자가 웹 클라이언트를 통해 로그인 정보 요청 > 웹 서버가 WAS에게 사용자 로그인 정보 부탁 > WAS > DB(사용자 로그인 정보를 찾는다) > 이 과정 역순

📕 용어 정리

HTTP(HyperText Transfer Protocol): 클라이언트와 서버 간 통신을 위한 프로토콜 입니다
프로토콜(Protocol) : 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계

[ 참고 자료 ]

[ 참고 사이트 ]

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

HTTP와 HTTPS 비교 - 전송 프로토콜 간의 차이점 - AWS

1996~1997년에 출시된 최초의 HTTP 버전이 HTTP/1.1입니다. HTTP/2와 HTTP/3은 프로토콜 자체를 업그레이드한 버전입니다. 데이터 전송 시스템을 수정하면서 효율성을 개선했습니다. 예를 들어, HTTP/2는 텍

aws.amazon.com

서버 사이드와 클라이언트 사이드

✏️ 서버 사이드(Server-Side)와 클라이언트 사이드(Client-Side) 서버 사이드(Server-Side)란 네트워크의 한 방식인 클라이언트-서버 구조에서 서버에서의 처리를 말한다 웹에서의 서버 사이드를 간단히

dev-ku.tistory.com

[Web] 그림으로 알아보는 웹 - 1편 웹의 동작 원리

보고, 듣고, 개발한 내용을 기록한 공간입니다.

swimjiy.github.io

저작자표시 (새창열림)

웹 구조와 HTTP

QUOTE THE DAY

📄 HTML 이란 무엇인가?

✅ HTML 버전

🖧 HTTP, HTTPS 프로토콜 차이점

💻 클라이언트 사이드와 서버 사이드

🔨 클라이언트와 서버 사이드에 데이터 처리 부분 🔨

웹 서버 구조

최근 댓글

최근 글

인기 글

티스토리툴바