복습 - 웹(WEB)

DW J·2022년 8월 15일

web 웹

review

목록 보기

5/7

1. 웹(WEB)구성

웹은 1989년 영국의 연구원 티모시 버너스리(팀 버너스리)경이 실시간으로 문서를 확인하기 위해 만들어진 기술이다

웹의 데이터 이동 과정

이미지 출처 https://better-together.tistory.com/93

웹은 다음과 같은 특징이 있다

1) 실시간으로 볼 수 있는 최적화된 문서형식 - HTML
2) 문서 뷰어 - 브라우저
3) 특정 문서 식별 - URI / URL
4) 문서 연결/이동 기능 - 하이퍼링크
5) 문서 형식을 전송할 수 있는 네트워크 프로토콜 - HTTP

1) 최적화된 문서 > HTML (HyperText Markup Language)

웹을 이루는 가장 기초적인 구성요소로써 웹 콘텐츠의 의미와 구조를 정의할 때 사용
HyperText란 웹 페이지를 다른 페이지로 연결하는 링크
링크는 웹의 근본적인 속성으로 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 이동 가능
웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표현하기 위해 '마크업'을 사용
요소는 "<" 태그이름 ">" 으로 이루어지고 대/소문자를 구분하지 않음
- 마크업의 다양한 요소
  head, title, body, header, footer, article, section, p, div, span, img, aside, audio, canvas, datalist, details, embed, nav, output, progress, video, ul, ol, li 등등

2) 문서뷰어 > 웹 브라우저

웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어
현재 다양한 브라우저가 존재하는데 그 중 가장 유명한 브라우저로는
크롬, 파이어폭스, 사파리, 오페라, ~~인터넷 익스프로러~~(엣지)가 있다
브라우저는 클라이언트/서버 모델로 클라이언트는 웹 서버에 접속하고 정보를 요청하는 컴퓨터를 운영한다
웹 서버는 해당 정보를 HTTP 규약에 따라 웹 브라우저에 전송하며, 웹 브라우저는 이를 표시한다

3) 특정 문서 식별 > URI / URL

IP주소보다 기억하기 쉽게 만들어주는 네트워크 호스트의 이름을 의미
도메인 또는 도메인 네임이라고 함 ex) velog.io
도메인 레지스트리에서 관리하는 하위 호스트 네임을 이르는 말

4) 문서 연결/이동 기능 > 하이퍼링크

주소와 주소가 비선형적으로 엮인 인터페이스를 의미함
주소와 주소 사이를 중간과정 없이 옮겨다닐 수 있는 특징이 있음
웹 세계에서는 워프 하듯 주소창에 가고자 하는 문서의 주소만 입력해주면 된다
예전에 갔던 주소로 가기 위해서도 중간에 거쳤던 문서를 생략하고 가고자 하는 주소만 입력하면 된다

5) 문서 형식을 전송할 수 있는 네트워크 프로토콜 > HTTP

하이퍼텍스트를 빠르게 교환하기 위한 프로토콜
서버와 클라이언트의 사이에서 어떻게 메세지를 교환할지 정해 놓은 규칙
요청(Request)과 응답(Response)으로 구성되어 있음(일반적으로 80번 포트 사용)
ex) 웹페이지에서 링크가 걸려있는 텍스트를 클릭(요청)하면 링크를 타고 새로운 페이지로 이동(응답)
웹 브라우저에서 인터넷 주소 맨 앞에 들어가는 "http://" 가 정보를 교환하겠다는 표시

5-1 HTTP 메시지 종류 - Request(요청)

GET : 클라이언트가 서버에게 URL에 해당하는 자료의 전송을 요청
HEAD : GET 요청으로 반활될 데이터 중 헤더 부분에 해당하는 데이터만 요청
POST : 클라이언트가 서버에서 처리할 수 있는 자료를 보냄
PATCH : 클라이언트가 서버에게 지정한 URL의 데이터를 붑준적으로 수정할 것을 요청
PUT : 클라이언트가 서버에게 지정한 URL에 지정한 데이터를 저장할 것을 요청
DELETE : 클라이언트가 서버에게 지정한 URL에 지정한 데이터를 제거할 것을 요청
TRACE : 클라이언트가 서버에게 송신한 요청의 내용을 반활해 줄 것을 요청
CONNECT : 클라이언트가 특정 종류의 프록시 서버에게 연결을 요청
OPTIONS : 해당 URL에서 지원하는 요청 메세지의 목록을 요청

위 목록 중 GET과 HEAD요청은 원칙적으로 호출했을 때 서버 측의 데이터에 변화가 있어서는 안됨 - Safe Method
GET, HEAD, PUT, DELETE는 동일한 요청이 한번 전송 되었을 때와 여러번 연속하여 전송되었을 때의 처리 결과가 동일해야함 - Idempotent Method

5-2 HTTP 응답 코드 종류

1XX, 2XX, 3XX, 4XX, 5XX

1XX

100 : Continue

101 : Switching Protocols

102 : Processing - 사용자가 수신요청을 처리하고 있지만,
아직은 제대로 된 응답을 할 수 없는 상태

103 Early Hints - Link 헤더와 함께 사용되며 주로 서버가 응답을 준비하는 동안
사용자가 사전로딩(PreLoading)을 할 수 있도록 하는 응답코드

2XX - 200, 204, 206만 서술

200 OK : 성공적으로 처리했을 때 쓰임. 가장 일반적으로 볼 수 있는 HTTP 상태

204 Created : 요청이 성공적으로 처리되어서 리소스가 만들어졌음을 의미

206 Partial Content : 컨텐츠의 일부 부분만 제공. 클라이언트에서 시작 범위나 다운로드할 범위를 지정한 경우 자동으로 해당 부분만 제공할 때 사용하는 코드

3XX - 301, 302만 서술

301 Moved Premanently : 영구적으로 컨텐츠가 이동했을 때 사용

302 Found : 일시적으로 컨텐츠가 이동했을 때 사용

4XX - 400, 401, 403, 404, 408만 서술

400 Bad Request : 요청 자체가 잘못되었을 때 사용하는 코드

401 Unauthorized : 인증이 필요한 리소스에 인즈 없이 접근한 경우 발생. 이 응답 코드를 사용할 때에는 반드시 브라우저에 어느 인증 방식을 사용할 것인지 보내야함 단순히 권이 없는 경우 이 응답 코드 대신 403을 사용해야함

403 Forbidden : 서버가 요청을 거부할 때 발생. 관리자가 해당 사용자를 차단했거나 서버에 index.html이 없는 경우에도 발생하며 권한이 없을 때 발생(로그인과 무관)

404 Not Found : 찾는 리소스가 없을 때 발생. 가장 흔하게 볼 수 있는 오류 코드

408 Reuqest Timeout : 요청 중 시간이 초과되었을 때 사용하는 코드

5XX - 500, 502, 503, 504만 서술

500 Internet Server Error : 서버에 오류가 발생해 작업을 수행할 수 없을 때 사용. 보통 설정이나 퍼미션 문제 아니면 HTTP요청을 통해 호출한 문서가 실제 HTML문서가 아니라 JSP, PHP, 서블릿 등의 프로그램일 경우 그 프로그램이 동작하다 각종 에러로 비정상 종료를 하는 경우

502 Bad Gateway : 게이트웨이가 연결된 서버로부터 잘못된 응답을 받았을 때 사용

503 Service Temporarily Unavailable : 서비스를 일시적으로 사용할 수 없을 때 사용. 웹서버등이 과부하로 다운되었을 때 발생

504 Gateway Timeout : 게이트웨이가 연결된 서버로부터 응답을 받을 수 없었을 때 사용

5-3 SOP/CORS

SOP : 동일 출처 정책 (표준 운영 정책)
참고 https://www.moef.go.kr/sisa/dictionary/detail?idx=237
CORS - 교차 출저 자원 공유
브라우저에서 보안적인 이유로 인해 cross-origin HTTP요청을 제한함 cross-origin 요청을 하려면 서버의 동의가 필요한데 서버가 동의한다면 브라우저에서는 요청을 허락하고 동의하지 않는다면 브라우저에서 거절 이러한 허락을 구하고 거절하는 메커니즘을 HTTP-header를 이용해서 가능한데, 이를 CORS라고 부름
참고 https://hannut91.github.io/blogs/infra/cors

5-4 HTTPS

HTTPS는 인터넷 상에서 정보를 암호화하는 SSL(Secure Socket Layer)프로토콜을 이용하여 웹브라우저와 서버가 데이터를 주고 받는 통신 규약
HTTP 메세지를 암호화한 것
HTTPS의 S가 Secure Socket, 보안 통신망을 뜻함
HTTPS의 암호화 원리의 핵심은 공개키의 암호화 방식이다

내용 출처
https://jeong-pro.tistory.com/89
이미지 출처
http://cryptocat.tistory.com/3