WEB :: 웹 기초 다지기 !

zae·2022년 5월 8일
0

WEB

목록 보기
2/4
post-thumbnail

학과에서 진행 중인 프로젝트 지원을 위해 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 인코딩 방식

  • ? : %3F 사용
  • # : %23 사용
  • & : %26 사용
  • = : %3D 사용
  • 보통 ASCII 테이블에서 해당 문자열의 Hex 값 앞에 %를 붙이면 된다.
  • 예시 : a=?b, c==&d의 데이터를 보낼 때 ⇒ http://zaezae.com/?a=%3Fb&c=%26d

🚩 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 : 사용자가 서버에 요청하는 웹 리소스의 경로
      • /index.html
    • Version : HTTP의 버전
      • HTTP/1.1
  • 두 번째 줄
    • 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 : 사용자에게 쿠키를 발급할 때 사용
  • 마지막 줄
    • Body

예시 (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>

웹 브라우저에 저장하는 데이터

  • 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는 모든 데이터를 암호화 되지 않은 평문으로 전송한다.
    • 따라서 노출되기 쉽고 웹에서 민감한 정보를 다룰 때 문제가 생길 수 있다.
  • HTTPSTLSSSL을 사용해 암호화한다.
    • 즉, 공개키 암호화를 사용해서 클라이언트와 서버간의 키 교환이 이뤄지기 때문에 비교적 안전하다.

4. Name(Domain, Host) 🔖

  • HOST는 웹 브라우저가 어디에 연결할지 정한다. 이때 Domain nameIP Address 가 Host에 사용된다.
    • IP Address : 네트워크 상에서 통신이 이루어질 때 장치를 식별하기 위해 사용되는 주소로 불규칙한 숫자로 이루어져있다.
    • Domain name : IP Address를 보다 쉽고, 의미를 부여하여 사용하기 위해 이용한다.
      • http://zaezae.com/ 주소 접속시 DNS에서 zaezae.comIP와 통신한다.

profile
코린이 성장 과정! 깊이 있게 파고들 공부를 탐색하고 있습니다 :)

0개의 댓글