[Inflearn] 모든 개발자를 위한 HTTP 웹 기본 지식 정리

📚 강의 출처

---

모든 개발자를 위한 HTTP 웹 기본 지식 강의 | 김영한 - 인프런

강사님께 항상 감사합니다. 🧑🏻‍💻
해당 글은 김영한님의 강의와 개인적 지식을 바탕으로 정리한 내용입니다.
모든 자료의 출처는 김영한 강사님임을 미리 밝힙니다.

섹션 1. 인터넷 네트워크

---

• IP, TCP, UDP, Port(포트), DNS

 

• IP(Internet Protocol)
  • 지정한 IP 주소(IP Address) 데이터 전달
  • 패킷(Packet)이라는 통신 단위로 데이터 전달
  • IP 한계
    • 비연결성 : IP는 데이터 전송 시 사전에 연결을 설정 X
    • 비신뢰성 : IP는 패킷 전송 중 발생할 수 있는 오류를 감지 및 복구 X
    • 프로그램 구분 : IP 자체는 포트 번호를 포함하지 않아 애플리케이션 식별 불가능
  • 스택 4 계층
    • 애플리케이션 : 프로세스 간 통신을 위해 설계 - HTTP, FTP
    • 전송 : 송신자와 수신자를 연결하는 서비스에 대한 정보 - TCP, UDP
    • 인터넷 : 패킷을 목적지로 전송하기 위한 정보 - IP
    • 네트워크 인터페이스 : 물리적 전송 - LAN 장비, LAN 드라이버

프로토콜 계층 예시

 

• TCP(Transmission Control Protocol) - 신뢰도
  • 연결 지향 (3 way handshake) : 데이터 전송 전 송신자와 수신자 간에 연결을 설정
  • 데이터 전달 보증 : 패킷이 목적지 도달 시 수신자는 응답(ACK)을 송신자에게 전달, 일정 시간 내에 ACK를 받지 못하면, 해당 패킷을 재전송
  • 순서 보장 : 패킷에 순서 번호를 부여, 원래 순서대로 재조립 가능

 

• UDP(User Datagram Protocol)
  • 연결 지향 X, 데이터 전달 보증 X, 순서 보장 X
  • 신뢰성은 떨어지지만, 단순하고 빠름
  • IP와 거의 동일. PORT, 체크섬 기능 정도만 추가된 형태

 

• PORT
  • 같은 IP 내에서 프로세스 구별
  • 0 ~ 65535 할당 가능, 0 ~ 1023 사용 권장 X
    • FTP : 20, 21
    • TELNET - 23
    • HTTP - 80
    • HTTPS - 443

 

• DNS(Domain Name System)
  • 인간이 이해하기 쉬운 도메인 이름을 IP 주소로 변환하는 시스템
  • 인터넷의 전화번호부 역할

 

섹션 2. URI와 웹 브라우저 요청 흐름

---

• URI(Uniform Resource Identifier)
  • URI 인터넷 자원의 이름을 식별하는 데 사용되는 문자열
  • URL과 URN을 포함하는 상위 개념

URI

• URL(Uniform Resource Locator)
  • 리소스가 있는 위치 지정
  • ex) http://www.example.com/resource
    • 정확한 서버 주소를 포함, 브라우저는 이 주소를 통해 직접 자원 접근 가능
  • 문법 ex) https://taek-2.tistory.com:443/search/인프런
    • scheme : [https] - 주로 프로토콜 사용 http, https, ftp
    • userinfo : URL에 사용자정보를 포함해 인증 - 거의 사용 X
    • host : [taek-2.tistory.com] - 호스트명, 도메인 또는 IP주소 사용
    • PORT : [443] - 접속 포트, 생략 가능
    • path : [search/인프런] : 리소스 경로
    • query : key = value, `?`로 시작, &으로 추가 가능
    • fragment : html 내부 북마크, 서버 전송 정보 X

 

• URN(Uniform Resource Name)
  • 리소스에 이름을 부여
  • 이름만으로 리소스를 찾는 방법이 보편화 X
  • ex) urn:isbn:8960777331
    • 특정 이름으로 책(예시)을 식별하지만, 책이 실제로 어디 저장되어 있는지 방법 X

요청 패킷

응답 패킷

 

섹션 3. HTTP 기본

---

• HTTP(Hyper Text Transfer Protocol)
  • 월드 와이드 웹(WWW)에서 정보를 주고받기 위해 사용되는 프로토콜
  • 클라이언트 - 서버 구조
  • 비연결성 프로토콜, 요청과 응답은 독립적으로 수행
    • 서버 자원을 매우 효율적으로 사용 가능
  • 무상태성 : 서버는 이전 요청의 상태를 유지 X
    • 응답 서버 관리가 용이, 대규모 웹 애플리케이션에서 흔히 사용
    • 하지만, 상태 유지가 필요한 상황에서는 쿠키, 세션 메커니즘 사용
    • 상태 유지는 최소한만 사용 권장
  • HTTP 헤더
    • 요청과 응답 메시지의 메타데이터를 포함

 

• 비연결성 한계와 극복
  • 한계
    • TCP/IP 연결을 새로 - 3 way handshake 시간 추가
    • 웹 브라우저의 수많은 자원이 함께 다운로드
  • 극복
    • HTTP 지속 연결(Persistent Connections) 문제 해결
    • HTTP/2, HTTP/3 발전할수록 더 많은 최적화

HTTP 초기 - 연결, 종료 낭비

HTTP 지속 연결

• 요청 메시지

요청 메시지 예

• HTTP 메서드 "GET"
• 요청 대상 "/search?q=hello&hl=ko"
• HTTP 버전 "HTTP/1.1"

 

• 응답 메시지

응답 메시지 예

• HTTP 버전 "HTTP/1.1"
• HTTP 상태 코드 "200"
• 이유 문구 "OK"

 

• 크게 성공하는 표준 기술은 단순하지만 확장 가능한 기술

 

섹션 4. HTTP 메서드

---

• URI 설계에 가장 중요한 것 리소스 식별
• 회원 등록, 수정에서 리소스는 회원을 의미

 

• HTTP 메서드 종류
  • GET : 리소스 조회
  • POST : 요청 데이터 처리
  • PUT : 리소스를 대체, 없으면 생성
  • PATCH : 리소스 부분 변경
  • DELETE  : 리소스 삭제
  • 기타 추가 메서드
    • HEAD : GET과 동일하지만 메시지 부분을 제외하고, 상태 줄과 헤더만 반환
    • OPTIONS : 리소스에 대한 통신 가능 옵션을 설명
    • CONNECT : 리소스로 식별되는 서버에 대한 터널을 설정
    • TRACE : 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트 수행

 

• POST
  • 새 리소스 생성(등록)
  • 요청 데이터 처리
  • 다른 메서드로 처리하기 애매한 경우
  • PUT 궁극적인 차이 클라이언트가 리소스 위치 지정 했는지? 안 했는지?

 

• HTTP 메서드의 속성
  • 안전(Safe Methods) : 호출해도 리소스를 변경 X
  • 멱등(Idempotent Methods) : 여러 번 호출해도 결과가 동일
  • 캐시가능(Cacheable Methods) : 자동 복구 메커니즘
    • ex) 서버가 TIMEOUT 발생 시, 클라이언트가 요청을 다시 해도 되는가? 판단 근거

 

섹션 5. HTTP 메서드 활용

---

• 클라이언트에서 서버로 데이터 전송 방법
  • 쿼리 파라미터를 통한 데이터 전송(GET)
  • 메시지 바디를 통한 데이터 전송(POST, PUT, PATCH)

 

• 전송 데이터는 url encoding 처리 과정 진행

 

• HTTP API 데이터 전송
  • 서버 to 서버
  • 앱 클라이언트
  • 웹 클라이언트

 

• 회원 목록 /members -> GET
• 회원 등록 /members -> POST
• 회원 조회 /members/{id} -> GET
• 회원 수정 /members/{id} -> PATCH, PUT, POST
• 회원 삭제 /members/{id} -> DELETE

 

• AJAX : 웹 페이지를 동적으로 업데이트할 수 있게 해주는 기술

 

• 좋은 URI 설계 개념
  • 문서(document)
  • 컬렉션(collection)
  • 스토어(store)
  • 컨트롤러(controller), 컨트롤 URI

 

섹션 6. HTTP 상태코드

---

• 1xx (Informational) : 수신되어 처리 중..
• 2xx (Successful) : 정상 처리
• 3xx (Redirection) : 완료하려면 추가 행동 필요
• 4xx (Client Error) : 클라이언트 오류 - 잘못된 문법등으로 서버가 수행 불가
• 5xx (Server Error) : 서버 오류, 요청을 정상 처리하지 불가
• 새로운 상태 코드 추가 시에도 클라이언트는 상위 상태코드로 해석

 

• 2xx - 성공
  • 200 "OK"- 요청 성공
  • 201 "Created" - 요청 성공 후 응답으로 생성된 리소스 반환
  • 202 "Accepted" - 요청 접수는 되었으나, 완료는 X (배치 처리에 사용)
  • 204 "No Content" - 요청 성공 후 응답으로 보낼 데이터가 없음

 

• 3xx - 리다이렉션
  • 영구 리다이렉션 - 특정 리소스의 URI가 영구적 이동 ex) '/event' -> '/new-event'
    • 301 "Moved Permanently" - 리다이렉트 시 메서드가 GET으로 변환되거나, 본문이 제거될 수 있음
    • 308 "Permanent Redirect" - 리다이렉트 시 메서드와 본문 유지
  • 일시적인 리다이렉션 - 리소스의 URI가 일시적으로 변경
    • 302 "Found" - 리다이렉트 시 요청 메서드가 GET으로 변환되거나, 본문이 제거될 수 있음
    • 307 "Temporary Redirect" - 리다이렉트 시 메서드와 본문 유지
    • 303 "See Other" - 리다이렉트 시 요청 메서드가 GET으로 변경 

• 304 "Not Modified" - 클라이언트에게 로컬 PC에 저장된 캐시 재사용 요구

 

• 4xx - 클라이언트 오류
  • 오류의 원인은 클라이언트
  • 재시도를 해도 똑같이 실패
  • 400 "Bad Request" - 클라이언트가 잘못된 요청으로 서버가 처리 불가능
  • 401 "Unauthorized" - 클라이언트가 해당 리소스에 대한 인증 필요
  • 403 "Forbidden" - 서버가 요청을 이해했지만, 접근할 권한이 없는 경우
  • 404 "Not Found" - 요청 리소스를 찾을 수 없음

 

• 5xx - 서버 오류
  • 오류의 원인은 서버
  • 재시도 시 성공할 수 있음(서버가 복구될 시)
  • 500 "Internal Server Error" - 서버 문제로 오류 발생. 또는 애매한 경우 500 오류
  • 503 "Service Unavailable" - 서비스 이용 불가

 

섹션 7. HTTP 헤더 1 - 일반 헤더

---

• 메시지 본문 = 페이로드(payload)

• 표현 : 요청, 응답에서 전달하는 실제 데이터
  • 표현 헤더는 표현 데이터의 정보가 어떤지 해석 제공
  • Content-Type : 표현 데이터의 형식 설명 - 미디어 타입, 문자 인코딩
  • Content-Encoding : 표현 데이터 인코딩 - 데이터 압축하기 위해 사용
  • Content-Language : 표현 데이터의 자연 언어
  • Content-Length : 바이트 단위

 

• 협상 : 클라이언트가 선호하는 표현 요청
  • Accept : 선호하는 미디어 타입 전달
  • Accept-Charset : 선호하는 문자 인코딩
  • Accept-Encoding : 선호하는 압축 인코딩
  • Accept-Language : 선호하는 자연 언어
  • 선호하는(?) : 클라이언트가 서버한테 "나는 이렇게 데이터를 줘" 라고 요청하는 형태 생각

 

• 전송 방식
  • 단순 전송 : 압축하지 않고, 일반적인 단순 전송
  • 압축 전송 : Encoding으로 압축한 형태에서 전송, 용량이 절반 이상 감소 기대 효과
  • 분할 전송 : [크기 - 내용] [크기 - 내용] 이렇게 반복해서 주는 분할 방식 - Content-Length X
  • 범위 전송 : 범위를 지정해서 받을 수 있는 방식 ex) 절반 받은 파일을 다시 요청할 때 처음부터가 아닌 중간부터

 

• 일반 정보
  • Form : 유저 에이전트의 이메일 정보 (요청)
  • Referer : 이전 웹 페이지 주소 (요청)
  • User-Agent : 유저 에이전트 애플리케이션 정보 (요청)
  • Server : ORIGIN 서버의 소프트웨어 정보 (응답) - ORIGIN 콘텐츠를 제공하는 서버를 의미
  • Date : 메시지가 발생한 날짜와 시간

 

• 특별한 정보
  • Host : 요청한 호스트 정보(도메인) - 필수
  • Location : 페이지 리다이렉션
  • Allow : 허용 가능한 HTTP 메서드
  • Retry-After : 유저 에이전트가 다음 요청을 하기까지 기다리는 시간

 

• 인증
  • Authorization : 인증 정보를 서버에 전달
  • WWW-Authenticate : 접근 시 필요한 인증 방법을 정의

 

• 쿠키
  • Set-Cookie : 서버에서 쿠키를 전달
    • 과도한 정보가 담긴 쿠키는 네트워크 트래픽 유발
    • 최소한의 정보만 사용
    • 민감한 데이터 저장 X ex) 주민번호, 카드 번호
  • Cookie : 서버에서 받은 쿠키 저장, HTTP 요청 시 서버로 전달
    • HTTP는 무상태 프로토콜 이므로, 다시 요청하면 이전 요청을 기억 X
    • 모든 요청에는 쿠키 정보가 자동 포함
  • 생명주기
    • expires : 만료일 이후 삭제
    • max-age : 시간 이후 삭제
    • 세션 쿠키 : 만료 날짜 생략 -> 브라우저 종료 시까지만 유지
    • 영속 쿠키 : 만료 날짜 입력 -> 해당 날짜까지 유지
  • 도메인 : 명시한 문서 기준 도메인 + 서브 도메인 포함해서 범위 지정
  • 경로 : 경로 기준 하위 경로 페이지만 쿠키 접근
  • 보안
    • Secure : http, https 전송, 만약 Secure 적용 시 https 만 전송
    • HttpOnly : 자바스크립트에서 접근 불가
    • SameSite : 요청 도메인과 쿠기에 설정 도메인이 일치하는 경우만 쿠키 전송

 

섹션 8. HTTP 헤더 2 - 캐시와 조건부 요청

---

• 캐시 적용 X
  • 데이터가 변경이 없는데 접속할 때마다 데이터 다운로드 진행
  • 인터넷 네트워크 비효율적
• 캐시 적용 O
  • 캐시 사용으로 접속할 때마다 데이터를 로컬에서 사용
  • 인터넷 네트워크 매우 효율적

 

• 캐시 시간 초과 시 : 서버를 통해 다시 조회해 캐시 갱신
• Last-Modified :  데이터 최종 수정일
  • 만약, 시간 초과 후 새로 캐시 요청을 보낼 때 [데이터 최종 수정일] 동일한 경우 304 Not Modified 응답 (정보 갱신)
  • 단점
    • 1초 미만 단위로 캐시 조정 불가능
    • 똑같은 데이터이지만, 수정해서 날짜가 달라지는 경우 날짜 갱신으로 재요청

 

• ETag(Entity Tag) : 캐시용 데이터에 고유한 버전 이름 
  
  • 캐시 제어 로직을 서버에서 완전히 관리

 

• 캐시 제어 헤더
  • Cache-Control : 캐시 지시어
    • max-age : 캐시 유효 시간, 초 단위
    • no-cache : 캐시는 가능하지만, 항상 서버에 검증하고 사용
    • no-store : 절대 저장 X
  • Pragma : 캐시 제어(no-cache)
  • Expries : 캐시 만료일 지정

 

• 검증 헤더
  • ETag
  • Last-Mofied

• 조건부 요청 헤더
  • If-Match, If-None-Match(ETag)
  • If-Modified-Since, If-Unmodified-Since(Last-Modified)

 

• 프록시 캐시
  • 클라이언트와 서버 사이에 위치, 동일한 데이터 요청 경우 캐시된 데이터를 제공하는 중간 저장소

프록시 캐시

• Cache-Control
  • Public : 모든 캐시(브라우저 캐시, 프록시 캐시)에서 캐시 될 수 있도록 설정
  • Private : 특정 사용자만 위해 캐시, 대부분 브라우저 캐시에만 저장하고 공유 캐시(프록시 캐시) 저장 X
  • s-maxage : 공유 캐시(프록시 캐시)에 대한 최대 유효 기간 설정
  • Age : 콘텐츠 캐시의 나이

 

• 확실한 캐시 무효화
  • Cache-Control : no-cache, no-store, must-revalidate
  • must-revalidate : 캐시 만료 후 최초 조회 시 원 서버에 필수 검증

no-cache vs must-revalidate

no-cache vs must-revalidate