[WEB] 웹 기초

이 글은 https://learn.dreamhack.io/6#1를 참고하여 개인적으로 공부한 내용을 정리한 글입니다.

---

1. 웹이란?

웹 : 인터넷상의 서비스 중 HTTP를 이용하여 정보를 공유하는 통신 서비스

웹 서버(Web Server) : 서비스를 제공하는 대상

웹 클라이언트(Web Client) : 서비스를 받는 사용자

 

2. 웹 기초 지식 

사용자가 웹사이트에 접속했을 때 일어나는 일

1) Web Browser (웹 브라우저) : 웹에 접속하기 위해 사용하는 소프트웨어 (Chrome, Edge, Safari, Firefox 등)

웹 브라우저는 사용자가 요청한 주소를 대신 접속해 서버에서 응답한 데이터를 해석한 후 화면에 출력해준다. 

 

2) Web Resource : 웹 상에 존재하는 모든 콘텐츠. 

: 예를 들어 http://youngeun.io./index.html 주소를 입력했다고 해보자 . 그럼 우리는 youngeun.io에 존재하는 /index.html 리소스에 대해 요청을 수행하는 것이다!

: 웹 리소스를 가리키는 주소 -> URL

: 사용자가 웹 브라우저를 통해 보게되는 페이지를 구성하는 대표적은 웹리소스 (HTML, CSS, JS, PDF, PNG 등)

 

3) URI (URL) : URI는 Uniform Resource Identifier의 약자로 리소스를 식별하기 위한 식별자

: URL(= 리소스의 위치 식별)은 URI의 하위 개념

 : 최근에는 URI와 URL을 혼용하여 사용하는 추세이기 때문에 이 문서에서는 상위 개념인 URI로 통합하여 설명하였다.

: URI의 구성요소 (Scheme, Authority, Path, Query, Fragment)

• Scheme : 웹 서버에 접속할 때 어떤 프로토콜을 이용할 것인가
• Host :  Authority의 일부로써 접속할 웹 서버의 서버 주소(호스트)에 대한 정보를 가지고 있음
• Port : Authority의 일부로써 접속할 웹 서버의 포트에 대한 정보를 가지고 있음
• Path : 접속할 웹 서버의 경로에 대한 정보를 가지고 있으며 / 문자로 구분함
• Query :  웹 서버에 전달하는 파라미터(추가적인 정보)이며 URI에서 ? 문자 뒤에 붙음
• Fragment : 메인 리소스 내에 존재하는 서브 리소스에 접근할 때 이를 식별하기 위한 정보를 담고 있음, URI에서 # 문자 뒤에 붙음 

4) Encoding : 문자의 정보, 형태를 표준화, 보안 등의 목적으로 다른 형태나 형식으로 변환 <-> Decoding : 변환된 형태를 원래 형태로 

웹에서 사용하는 인코딩 : URL, HTML Entity

• URL Encoding(percent encoding) : URL 구조내에서 예약어로 사용되는 문자들을 전송할 때 사용

문자	URL 인코딩
?	%3F
#	%23
&	%26
=	%3D

: 아스키 테이블값 앞에 % 붙이면 됨

따라서 GET 메소드로 a=?b, c=&d의 데이터를 보내려면 http://example.com/?a=%3Fb&c=%26d의 형태로 전송되어야 서버에서도 정상적으로 데이터를 해석할 수 있음!!

 

• HTML entity Encoding : HTML 문서 내에서 사용하는 문자열들이 HTML에서 사용하는 태그로 인식되지 않도록

문자	URL 인코딩
&	%#x26;
<	%#x3C;
>	%#x3E;

: 아스키 테이블 값앞에 &#x를 붙이면 됨, 일부 주요한 문자들은 지정되어 있음

 

5) HTTP (HyperText Transfer Protocol) : 웹을 이용하기 위한 프로토콜

: TCP혹은 TLS를 사용해 통신하고 기본포트로 80(HTTP), 443(HTTPS) 사용

* 프로토콜 : 컴퓨터 내부 혹은 컴퓨터 사이에서 어떻게 데이터를 교환할지 정의하는 규칙 체계

: HTTPS (HyperText Transfer Protocol Secure) : HTTP + 보안

 

5-1) HTTP Request : 클라이언트가 서버에 요청

구성요소 : Method, Path(사용자가 서버에 요청하는 웹 리소스의 경로), Version(HTTP 버전), Header, Body

method

header

- OPTIONS 요청하는 리소스가 허용하는 메소드 목록을 반환합니다. 예를 들어 /login페이지가 OPTIONS, GET, POST 메소드만 허용하는 경우 OPTIONS, GET, POST가 반환됩니다. - HEAD GET 메소드와 동일하지만, Response의 Body 부분은 받지 않고, Header만 받습니다. (e.g. 서버의 상태 확인 등) - GET 리소스를 요청합니다. (e.g. 게시물/프로필 보기, 이미지 등) - POST 특정 리소스 생성 및 데이터 추가를 위해 값을 제출할 때 사용합니다. (e.g. 게시물/프로필 생성 등) - PUT 특정 리소스의 내용을 보낸 값으로 설정합니다. (e.g. 생성/업데이트 등) - PATCH 특정 리소스의 내용 중 보낸 값의 key만 변경합니다. (e.g. 게시글 업데이트 등) - DELETE 특정 리소스를 삭제합니다. (e.g. 게시물 삭제 등) - TRACE 요청받은 값을 Response의 Body로 다시 클라이언트에게 되돌려줍니다.

- Host 데이터를 보내는 서버의 주소를 의미합니다. - Cookie 사용자를 식별하기 위해 사용하는 정보입니다. - User-Agent 사용자가 사용하는 프로그램의 정보를 나타냅니다. - Referer 페이지 이동 시 이전 URI의 정보를 나타냅니다. - Content-Type 사용자가 전달하는 데이터의 처리 방식과 형식을 나타냅니다. 사용자와 서버 간의 데이터 처리 방식이 일치되어야 정상적으로 데이터 통신이 이루어집니다.

5-2) HTTP Response : 클라이언트의 요청에 대한 서버의 응답

구성요소 : Version, status code, Header, Body

status code

header

200번 영역 사용자의 요청에 대한 서버의 처리가 성공하였음을 나타냅니다. 200 OK 201 Created 300번 영역 사용자가 요청한 리소스가 다른 경로로 변경된 경우를 나타내는 영역입니다. 웹 브라우저에서 300번 영역의 응답 상태 코드가 반환되면, Response Header에 포함되어 있는 Location 헤더의 값으로 리다이렉션 합니다. 301 Moved Permanently 302 Found 400번 영역 사용자가 서버에 요청하는 구조 또는 데이터가 잘못되었음을 나타내는 영역입니다. 400 Bad Request 사용자가 전달한 데이터 또는 구조의 잘못된 문법으로 인하여 서버가 요청을 이해할 수 없음을 의미합니다. 403 Forbidden 사용자가 해당 웹 리소스에 접근할 권리를 가지고 있지 않음을 나타냅니다. 404 Not Found 사용자가 요청한 웹 리소스의 경로에 대해 응답할 데이터가 없음을 나타냅니다. 405 Method Not Allowed 사용자가 요청한 Method가 서버에서는 허용하지 않는 Method임을 나타냅니다. 500번 영역 서버의 에러와 관련된 영역입니다. 500 Internal Server Error 서버의 에러가 발생하였음을 나타냅니다. 503 Service Unavailable 서버가 사용자의 요청을 처리할 준비가 되지 않았음을 나타냅니다.

Content-Type 서버의 응답 데이터를 웹 브라우저에서 처리할 방식과 형식을 나타냅니다. Content-Length 서버가 사용자에게 응답해주는 데이터의 길이를 나타냅니다. Server 서버가 사용하는 소프트웨어의 정보를 나타냅니다. Allow 허용되는 Method 목록을 사용자에게 알려줄 때 사용합니다. Location 300번 영역의 응답 코드 사용 시 변경된 웹 리소스의 주소를 나타냅니다. Set-Cookie 사용자에게 쿠키를 발급할 때 사용합니다. 해당 헤더를 받은 웹 브라우저는 해당 쿠키를 저장합니다.

 

7) Cookie : 웹 브라우저에 저장하는 데이터

* connectionless : 하나의 요청에 하나의 응답을 한 후 네트워크 연결을 끝맺음

*  stateless : 네트워크가 연결을 끝맺을 때 상태를 유지하지 않는 것, HTTP 요청마다 새로운 커넥션을 열기 때문에 사용자 인증을 계속 해야하는 단점이 있음 -> 상태 유지를 위한 쿠키 등장

: 웹 브라우저는 HTTP Response의 Set-Cookie Header나 Javascript의 document.cookie를 통해 데이터를 쿠키에 저장한다. 

데이터를 키밸류 형태로 쿠키에 저장 / HTTP 요청을 보낼 때 웹 브라우저가 자동으로 헤더에 쿠키를 추가해 전송

쿠키는 인증상태를 포함할 수 도 있음. 예를 들어 key가 id인 value에 guest를 넣어 전송하면 브라우저는 cookie: id=guest;를 서버에 보내고, 서버는 해당 정보를 통해 인증된 사용자의 정보를 응답한다. 

 

8) Session : 서버에 저장하는 데이터

: 쿠키에 인증 상태를 포함한 데이터를 저장하면 사용자가 임의 사용자로 인증된 것 처럼 요청을 조작할 수도 있음 -> 서버에 데이터를 저장하는 세션 등장

: 세션을 활용하면 데이터를 서버에 저장하고 해당 데이터에 접근할 수 있는 유추할 수 없는 랜덤한 문자열 키(Session ID)를 만들어 응답

: 브라우저는 해당 키를 쿠키에 저장하고 이후에 HTTP 요청을 보내면 서버에서 키에 해당하는 데이터를 가져와 인증 상태를 확인한다.

9) Domain Name : 인터넷(웹) 네트워크상에서 컴퓨터를 식별하는 이름 (e.g. www.naver.com은 네이버의 서버 컴퓨터를 식별하는 이름입니다.)

 

10) Server : 서버는 인터넷상에서 사용자에게 서비스를 제공하는 컴퓨터, 그 중 웹 서버는 사용자(웹브라우저)와 HTTP를 이용하여 통신하는 서버 (nginx, Apache, Tomcat, IIS)

 

11) Application : 서버에서 설정한 특정 기능들을 수행하는 소프트웨어 (PHP, NodeJS, Python, Java)

 

12) DataBase (DB) : 데이터를 저장하기 위해 사용하는 데이터 저장소