학과에서 진행 중인 프로젝트 지원을 위해 DreamHack의 WEB 강의 내용과 Inflearn 반드시 알고 넘어가야 할 웹 기술 기초편을 요약하고자 한다 !
🎨 간단한 키워드 정리는 마우스를 가져다 대면 확인할 수 있도록 했으니 참고 plz! (대부분 Bold처리 되어있습니다)
1. 웹(WEB)이란 무엇인가? 🕸
🌙 웹의 어원
World Wide Web
: 거미줄처럼 인터넷 상에서 각각의 사용자(컴퓨터)가 연결되어 정보를 공유한다는 의미에서 유래됐다.
🌙 기본적인 용어
web
: 인터넷 상의 서비스 중 http를 이용하여 정보를 공유하는 통신 서비스
web server
: 서비스를 제공하는 대상
web client
: 서비스를 받는 사용자
2. 사용자와 웹 서버 간 데이터 공유 과정 원리📡
🌙 웹 브라우저 (Web Browser)
- 웹을 사용하기 위한 소프트웨어
http
를 통해 인터넷 상에서 통신을 하며, 서버로부터 전달받은 다양한 웹 리소스들을 가공해 사용자가 웹을 사용할 수 있도록 도와준다.
- 대표적인 웹 브라우저 : Chrome, Safari ...
즉, 사용자 (주소창에 주소 입력) ⇄ 웹 브라우저 (주소를 대신 접속해 서버에서 응답한 데이터를 해석 후 화면에 출력)
🌙 웹 리소스 (Web Resource)
- 웹 상에 존재하는 모든 콘텐츠
http://velog.io/zaezae.html
주소를 입력하면 velog.io
에 존재하는 /zaezae.html
리소스에 대해 요청을 수행하는 것
URL
: 웹 리소스를 가리키는 주소
- 대표적인 웹 리소스 :
HTML
, CSS
, JS
, 그 외
...
🌙 URI
- Uniform Resource Identifier : 리소소를 식별하기 위한 식별자
- 엥 그럼 아까 URL이랑은 무슨 차이일까?
- URI가 URL의 상위 개념이다.
- 요즘은 두 개념을 혼용해서 사용하는 추세!
🚩 URI의 구성요소
http://zaezae.com:8042/over/there?search=1#fagment
- Scheme
- 웹 서버에 접속할 때 어떤 프로토콜을 이용할지에 대한 정보
- 보통 http/
https
를 사용
- Authority (Userinfo, Host, Port)
- Host (zaezae.com) : 웹 브라우저가 어디에 연결할지 정하는 호스트 주소 (IP Address나 도메인이 사용될 수 있다.)
- Port (:8042) : 접속할 웹 서버의 포트에 대한 정보
- Path (/over/there) : 접속할 웹 서버의 경로에 대한 정보이며, "/"로 구분 된다.
- Query (?search=1) : 웹 서버에 전달하는 추가적인 정보이며, "?"
뒤에 사용된다.
- Fragment (#fragment) : 서브 리소스에 접근할 때 식별하기 위한 정보를 담고 있으며, "#" 뒤에 사용된다.
🌙 Encoding
- 문자 또는 기호 등의 정보를 표준화, 보안 등의 목적으로 다른 형태로 변환하는 처리 방식을 말한다.
- 이의 반대 과정을 Decoding이라고 한다.
- 대표적인 Encoding : URL, HTML, Entity
🚩 URL 인코딩 방식
🚩 HTML entity 인코딩
- 문서 내에서 사용하는 문자열들이 HTML 태그로 인식하지 않도록 하기 위해 사용
- 보통 ASCII 테이블에서 해당 문자열의 Hex 값 앞에 %#x를 붙이면 된다.
🌙 HTTP
- 웹에서 이루어지는 통신을 정의한
Protocol
이다.
TCP
혹은 TLS
를 사용해 통신한다.
- 기본 포트 : 80(HTTP), 443(HTTPS)
🚩 HTTP의 구조
1. Request : 사용자의 서버에 대한 요청
2. Response : 사용자의 요청에 대한 서버의 응답
🚩 HTTP Request
사용자의 서버에 대한 요청을 의미하며, 다음은 HTTP Request의 구성 요소이다.
- 첫 번째 줄
- Method : 서버에 요청 시 수행하고자 하는 동작
GET
, POST
, PUT, PATCH, DELETE...
- Path : 사용자가 서버에 요청하는 웹 리소스의 경로
- Version : HTTP의 버전
- 두 번째 줄
- Header : 서버에 추가 정보를 전달하는 데이터 부분
이름: 값
형태로 이루어짐
- 각각의 줄은
CRLF
로 줄바꿈이 이뤄진다.
- Host : 데이터를 보내는 서버의 주소
- Cookie : 웹 브라우저에 저장하는 데이터
- User-Agent : 사용자가 사용하는 프로그램의 정보
- Referer : 페이지 이동시 이전 URI 정보
- Content-Type : 사용자가 전달하는 데이터 처리 방식과 형태
- 마지막 줄
- Body : 사용자가 입력한 데이터가 서버에 전달할 때 데이터를 담는 부분
예시 (method : GET)
GET /index.html HTTP/1.1
Host: dreamhack.io
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36
🚩 HTTP Response
사용자의 요청에 대한 서버의 응답을 의미하며, 다음은 HTTP Response의 구성 요소이다.
- 첫 번째 줄
- HTTP Method, Path, Version
- Status code : 사용자의 요청에 대한 서버의 처리 결과
- 200번대 : 서버 처리 성공
- 300번대 : 다른 경로로 변경됨
- 400번대 : 서버에 요청하는 구조 또는 데이터가 잘못됨
- 500번대 : 서버의 에러
- 두 번째 줄
- Header (역시 CRLF로 줄바꿈)
- Content-Type : 서버의 응답 데이터를 처리할 방식과 형식
- Content-Length : 서버가 사용자에게 응답해주는 데이터의 길이
- Server : 서버가 사용하는 소프트웨어의 정보
- Allow : 허용되는 Method 목록을 사용자에게 알려줌
- Location : 300번 영역 응답 코드 사용시 변경된 웹 리소스 주소를 나타냄
- Set-Cookie : 사용자에게
쿠키
를 발급할 때 사용
- 마지막 줄
예시 (200번대)
HTTP/1.1 200 OK
Server: Apache/2.4.29 (Ubuntu)
Content-Length: 61
Connection: Keep-Alive
Content-Type: text/html
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
🌙 Cookie
웹 브라우저에 저장하는 데이터
- HTTP의 stateless 속성은 네트워크가 연결이 끝맺을 때 상태를 유지하지 않기 때문에 사용자 인증을 계속해서 요청시마다 해야 한다는 단점이 있다.
- 이를 보완하기 위해 Cookie🍪가 탄생했다!
🚩 쿠키 저장 방식
- HTTP Response의 Set-Cookie
HTTP/1.1 200 OK
Server: Apache/2.4.29 (Ubuntu)
Set-Cookie: name=test;
Set-Cookie: age=30; Expires=Fri, 30 Sep 2022 14:54:50 GMT;
...
- JS의 doucument.cookie
document.cookie = "name=test;"
document.cookie = "age=30; Expires=Fri, 30 Sep 2022 14:54:50 GMT;"
key=value;
형식으로 저장 (인증 상태 저장)
Cookie: id=zaezae;
가 서버로 전송되어 브라우저에 저장된다.
🌙 Session
사용자가 임의 사용자로 인증된 것처럼 요청을 조작할 수 있기 때문에 서버에 데이터를 저장하기 위한 Session을 사용한다.
- 세션 활용시
- 데이터를 서버에 저장
- 해당 데이터에 접근할 수 있는 유추 불가능한 랜덤한 문자열 키를 만들어 응답 (Session ID)
- 브라우저는 해당 키를 저장
- 쿠키랑 세션의 차이!
- 쿠키 : 데이터를 사용자가 저장
- 세션 : 데이터를 서버가 저장
3. HTTP와 HTTPS의 간단한 차이 👀
- HTTP는 모든 데이터를 암호화 되지 않은 평문으로 전송한다.
- 따라서 노출되기 쉽고 웹에서 민감한 정보를 다룰 때 문제가 생길 수 있다.
- HTTPS는
TLS
와 SSL
을 사용해 암호화한다.
- 즉, 공개키 암호화를 사용해서 클라이언트와 서버간의 키 교환이 이뤄지기 때문에 비교적 안전하다.
4. Name(Domain, Host) 🔖
- HOST는 웹 브라우저가 어디에 연결할지 정한다. 이때 Domain name과 IP Address 가 Host에 사용된다.
- IP Address : 네트워크 상에서 통신이 이루어질 때 장치를 식별하기 위해 사용되는 주소로 불규칙한 숫자로 이루어져있다.
- Domain name : IP Address를 보다 쉽고, 의미를 부여하여 사용하기 위해 이용한다.
http://zaezae.com/
주소 접속시 DNS
에서 zaezae.com
의 IP와 통신한다.