[ TIL ] 12.13(화) 22일차

01. HTTP의 이해

• 1. HTTP란?
  • 데이터를 주고 받는 양식을 정의한 "통신 규약"중 하나가 HTTP입니다! (통신 규약: Protocol)
  • 매우 범용적인 양식을 가지고 있어 전 세계에서 제일 널리 쓰이는 통신 규약입니다. (거의 만능!)
  • 여기서 말하는 통신 규약이란, 컴퓨터끼리 데이터를 주고 받을때 정해둔 약속을 의미합니다.
    • 비유를 해볼까요?
      • 제가 여러분에게 한국어로 말을 걸면 여러분이 제 말을 한국어로 이해하듯이, 갑자기 제가 독일어나 불어로 말한다면 알아듣지 못하겠죠?
      • 혹은 제가 같은 한국말로 말하더라도 여러분이 잘 알고 있던 표준어가 아닌, 우리가 모르는 아주 아주 작은 어느 지방에서만 사용하는 이해하기 난해한 사투리를 사용한다면요?
    • 이렇듯이 여러분은 앞으로 수업을 진행하면서 HTTP라는 통신 규약을 이용하여 서버나 클라이언트(브라우저)끼리 의사 소통을 할 수 있게 됩니다!
  • 현대에 존재하는 대부분의 웹 서버가 HTTP를 기반으로 데이터를 주고 받습니다. 또한 모든 브라우저는 HTTP 프로토콜을 기본으로 지원하기 때문에 여러분은 매일 HTTP를 이용하는 셈이 됩니다 😉
  🔥 여기서 오해하면 안되는 포인트! 우리가 "말"을 통해 의사 표현을 할 수 있듯이 모든 컴퓨터는 “네트워크”를 통해 의사 표현을 할 수 있습니다. 현실 세계에서 “**말”**은 의사 표현의 수단이며, “언어”(ex. 한국어)는 의사 표현의 방법입니다. 그리고 디지털 세상에서는 “**네트워크”**가 의사 표현의 수단이고, “통신 규약(ex. HTTP)”이 의사 표현의 방법입니다
• 의사 표현의 수단: (현실 세상) 말 ↔ (디지털 세상) 네트워크 의사 표현의 방법: (현실 세상) 언어 ↔ (디지털 세상) 통신 규약
  1. 어떻게 HTTP로 데이터를 주고 받을까?
  • HTTP에서는 언제나 Request, Response라는 개념이 존재합니다.
  • 서버와 브라우저의 관계로 가볍게 말해보면 아래와 같이 동작합니다.
    1. 브라우저는 서버에게 자신이 원하는 페이지(URL 등의 정보)를 요구(Request)합니다.
    2. 서버는 브라우저가 원하는 페이지가 있는지 확인하고, 있다면 해당 페이지에 대한 데이터를 반환(Response)해줍니다. 없다면 없는 페이지에 대한 데이터를 반환합니다. (일반적인 웹 서버 기준)
    3. 브라우저는 서버에게 전달 받은 데이터를 기반으로 브라우저에 그려줍니다.
  • 그리고 위와 같은 사례에서 "데이터"는 어떠한 데이터든 주고 받는게 가능합니
  1. 브라우저에서 HTTP가 동작하는것을 직접 확인해보자.
  • 1. 개발자 도구와 네트워크 탭 열어보기
    2. 원하는 웹 페이지 어디든 들어가봅니다.
    3. 여러분이 사용하는 브라우저에서 F12를 누르면 아래와 같은 창이 뜹니다. 이것을 DevTool 혹은 개발자 도구라고 부릅니다.하단에 뜨는 창. 색은 다를 수 있지만 모양은 비슷할거예요.
    4. 네트워크 탭을 누릅니다.
    5. 이 상태에서 새로고침을 합니다.
    6. 뭔가 아래에 쭉 나오시나요? 이것이 여러분의 브라우저가 지금 페이지를 보여주기 위해 서버에서 받아온 데이터 목록이라고 이해하면 됩니다.
    여기까지 잘 따라 오셨다면 이제 개발자 도구를 씌울 수 있는 개발자가 된거예요! 앞으로 개발자 도구(F12)를 띄워 네트워크 탭을 열어보자고 하면 이렇게 하시면 됩니다. 😎
    1. 네트워크(Network) 탭 맨 위의 페이지 데이터 클릭
  • 🔥 만약 맨 위 페이지 데이터가 나오지 않는다면 새로고침!
    
    1. Headers 탭 살펴보기
    • General
    • 브라우저에서 서버로 보낸 Request 데이터라고 보면 쉽습니다.
    • Request Headers
    • 이것도 브라우저에서 서버로 보낸 Request 데이터라고 보면 쉽습니다!
    • Response Headers
    • 서버가 웹 페이지 데이터와 함께 보낸 추가 데이터입니다.
    1. Response 탭 살펴보기
    • 이제 Headers 탭에서 Response 탭으로 바꿔봅니다.
    • 아래와 똑같지 않더라도 괜찮습니다. 어떤 알 수 없는 글자들이 막 써있는것이 보이면 됩니다!
    • 이것은 서버에서 여러분의 브라우저로 반환해준 웹 페이지를 그려주기 위한 데이터입니다.
  1. 추가 데이터? 데이터? 뭐가 다른걸까?
• 위에서 개발자 도구로 직접 보면서 나온 애매한 단어들이 있었죠?
  • HTTP에는 크게 다음과 같은 구성 요소가 존재합니다.
    • Method 설명
      • GET: 이름 그대로 어떤 리소스를 "얻을 때" 사용됩니다. 그리고 브라우저는 기본적으로 여러분이 웹 서핑을 한다고 가정하므로 모든 요청은 "GET" 메서드를 사용해서 서버에 요청을 보냅니다. (예외 상황도 있지만 거의 마주하지 않는 상황이기 때문에 여러분의 머리를 보호하기 위해 생략합니다 😇... 그래도 궁금하다면? 클릭)
      • POST: 웹 서버에 데이터를 "게시"할 때 사용하는게 일반적입니다. (ex. 회원가입, 게시글 작성, 댓글 작성)
    • Header 설명 (추가 데이터. 메타 데이터)
      • 브라우저가 어떤 페이지를 원하는지
      • 요청 받은 페이지를 찾았는지
      • 성공적으로 찾았는지
      이러한 사례 외에도 아주 다양한 의사 표현을 위한 데이터를 모두 Header 필드에 넣고 주고 받습니다. 위에서 설명 된 메서드도 사실은 헤더에 포함되어 서버로 보내집니다 😁
    • Payload 설명 (데이터. 실질적인 데이터)
      • 서버가 응답을 보낼 때에는 항상 Payload를 보낼 수 있습니다.
      • 클라이언트(브라우저)가 요청을 할 때에도 Payload를 보낼 수 있습니다. 그리고 "GET method를 제외하곤 모두 Payload를 보낼 수 있다" 는게 HTTP에서의 약속입니다.
      • 추가적으로 DELETE method에서 Payload를 보낼수있지만, 보통 많은 경우에 Payload를 보내지않고있습니다.
  • 네트워크 탭에서 한번 확인해보세요! 😉
• Headers 탭에서는 추가 데이터라고 많이 말했었고, Response 탭에서는 그냥 데이터라고 말했습니다. 이것에 대해서 조금 더 자세히 알아보도록 하겠습니다!

02. 웹 서버의 이해

• 1. 웹 서버란?
  • 웹서버는 인터넷을 통해 HTTP를 이용하여 웹상에서 클라이언트의 요청을 응답해주는 통신을 하는 컴퓨터 또는 프로그램이라고 생각하시면 됩니다.
  • 오늘날 우리가 자주 사용하는 이메일이나 웹사이트 등 대부분의 인터넷 사용은 웹서버를 통해 우리가 사용할 수 있게 되었습니다.
   💡 글로벌 Web Server의 점유율은 어떻게 될까요?
• 2022년 글로벌 Web Server 점유율
• 2022년 기준 글로벌에서 대표적으로 사용되는 Web Server는 Apache가 대표적으로 사용되고 있습니다.
  1. 웹 서버의 기본 동작 원리
  • 브라우저를 통해 HTTP request로 웹사이트를 웹서버에 요청합니다. 이후 웹서버는 요청을 승인하고 HTTP response를 통해 웹사이트 데이터를 브라우저에 전송합니다. 마지막으로 브라우저는 서버에서 받아온 데이터를 이용해 웹사이트를 브라우저에 그려내는 일을 합니다.
  • 기본적으로 브라우저가 웹서버에 요청을 할때는 항상 GET method로 요청하게 됩니다.
•  

•