한발 한발 나아가기

캐시

캐시가 없다면 데이터가 변경되지 않더라도 매번 네트워크를 통해서 데이터를 다운로드 받아야 한다.

하지만 네트워크는 매우 느리고 비싸기 때문에 브라우저 로딩 속도에 영향을 준다. 이러한 이유로 캐시를 사용하는 것이 좋다.

헤더 종류

캐시 제어 헤더

• Cache-Control: 캐시 제어
  • 오리진 서버뿐만 아니라 프록시 캐시 서버도 제어할 수 있다.
• Pragma: 캐시 제어(하위 호환)
• Expires: 캐시 유효 기간(하위 호환)

검증 헤더

• 캐시 유효시간이 초과하더라도, 캐시 데이터와 서버 데이터가 동일한지 검증하는 용도
  • 동일한 경우 메세지 바디 없이 304로 응답
• 응답 시 사용
• 종류
  
  • ETag : 캐시용 데이터에 임의의 고유한 버전 이름을 달아둠. ex) ETag: "v1.0"
  • Last-Modified : 마지막으로 수정된 날짜와 시간이 명시된다. ex) 2023년 4월 9일 10:00:00

ETag vs Last Modified

날짜 기반의 Last Modified는 다음의 단점을 가지고 있다.

1. 1초 미만 단위로 캐시 조정이 불가능

2. 날짜 기반의 로직이 사용되며, 서버가 별도의 캐시 로직을 관리하지 않음.

• 수정된 결과가 이전 버전과 동일하더라도, 서로 다른 데이터로 인식된다. 이때 서버는 캐시 로직을 관리하지 않기 때문에 아무것도 할 수 없다.

이와 달리 ETag는 캐시 제어 로직을 서버 측에서 관리할 수 있다.

캐시 무효화

확실하게 캐시를 무효화하기 위해서는 다음과 같이 작성한다.

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache

• Cache-Control: no-cache
  • 데이터는 캐시해도 되지만, 항상 원 서버에 검증하고 사용
  • 원 서버 접근 실패 시 설정에 따라서 캐시 데이터를 반환할 수 있음.(Error or 200 OK)
• Cache-Control: no-store
  • 데이터에 민감한 정보가 있으므로 저장 X
 (메모리에서 사용하고 최대한 빨리 삭제)
• Cache-Control: must-revalidate
  • 캐시 만료후 최초 조회 시 원 서버에 검증해야 함
    • 캐시 유효시간이라면 캐시 사용
  • 원 서버 접근 실패 시 반드시 오류가 발생해야 함(504 Gateway Timeout)
• Pragma: no-cache
  • HTTP 1.0 하위 호환

표현

• 표현은 요청이나 응답에서 전달할 실제 데이터를 의미한다. 
  • 데이터는 html이나 json 등의 형태로 표현될 수 있기 때문에 표현이라는 이름으로 지어졌다.
• 표현은 표현 메타데이터와 표현 데이터로 구성된다.
  • 표현 메타데이터 : 표현 데이터를 해석할 수 있는 정보 제공

HTTP 헤더

• HTTP 전송에 필요한 모든 부가정보를 의미한다.
• field-name : field-value 형태를 가진다.
• 다양한 표준 헤더가 존재하며, 필요시 임의의 헤더 추가가 가능하다.

표현 헤더 - 요청, 응답 둘 다 사용

• Content-Type : 표현 데이터의 형식 
  • ex) text/html: charset=utf-8, application/json 등
• Content-Encoding: 표현 데이터의 압축 방식
  • 데이터를 전달하는 곳에서 압축 후 인코딩 헤더 추가
  • ex) gzip, deflate, identy
• Content-Language: 표현 데이터의 자연 언어
  • ex) ko, en 등
• Content-Length: 표현 데이터의 길이
  • 바이트 단위

협상 - 요청만 사용

• Accept: 클라이언트가 선호하는 미디어 타입 전달
• Accept-Charset: 클라이언트가 선호하는 문자 인코딩
• Accept-Encoding: 클라이언트가 선호하는 압축 인코딩
• Accept-Language: 클라이언트가 선호하는 자연 언어

선호하는 값이 여러 개인 경우, 다음의 규칙에 따라 우선순위가 결정된다.

1. Quality Values(q)가 클수록 높은 우선순위를 가진다.(기본값 1)
2. 구체적인 것이 우선한다.
   • ex) Accept: text/*, text/plain -> text/plain > text/*

전송 방식에 따른 구분

1. 단순 전송 -> Content-Length만 사용하면 된다.
2. 압축 전송 -> 압축 후 Content-Encoding을 추가한다.
3. 분할 전송 -> Transfer-Encoding을 사용한다. 바디에 길이가 명시되므로, Content-Length는 사용하지 않는다.
4. 범위 전송 
   • 요청 시 : Range: bytes=1001-2000과 같은 형태로 요청한다.
   • 응답 시 : Content-Range: bytes 1001-2000 / 2000과 같은 형태로 응답한다.

일반 정보

• From: 유저 에이전트의 이메일 정보
  • 검색 엔진과 같은 곳에서 주로 사용하며, 그 외에는 잘 사용하지 않는다.
• Referer: 이전 웹 페이지 주소
  • 유입 경로 분석을 가능하게 한다.
• User-Agent: 유저 에이전트 애플리케이션 정보
  • 클라이언트의 애플리케이션 정보
  • 어떤 종류의 브라우저에서 장애가 발생했는지 파악 가능
• Server: 요청을 처리하는 오리진 서버의 소프트웨어 정보
  • 프록시가 아닌, 실제 요청을 처리하는 서버를 의미
• Date: 메시지가 생성된 날짜와 시간

특별한 정보

참고하면 좋을 자료

- How do we control web page caching, across all browsers?

HTTP 상태 코드

• 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능
• 클라이언트가 인식할 수 없는 상태 코드를 서버가 반환하면, 상위 상태 코드로 해석해서 처리한다.
  • ex) 299 -> 2xx, 451 -> 4xx
• 종류
  • 1xx(information) : 서버가 요청을 클라이언트에서 성공적으로 수신을 했고, 처리 중인 정보를 보낸다.
  • 2xx(Successful) : 서버가 요청을 정상 처리했음을 알린다.
  • 3xx(Redirection) : 요청을 완료하려면 추가 행동이 필요하다.
  • 4xx(Client Error) : 클라이언트 오류, 잘못된 문법 등으로 서버가 요청을 수행할 수 없다.
  • 5xx(Server Error) : 서버 오류, 서버가 클라이언트의 요청을 처리하지 못했다.

1xx(information)

• 거의 사용하지 않는다.

2xx(Successful)

3xx(Redirection)

• 웹 브라우저는 3xx 응답의 결과에 Location 헤더가 있으면, location 위치로 자동 이동한다.(리다이렉트)

종류

1. 영구 리다이렉션
   • 리소스의 URI가 영구적으로 이동
   • 원래의 URL을 사용하지 않기 때문에 검색 엔진 등에서 변경을 인지할 수 있다.
   • 301, 308
2. 일시 리다이렉션 : 일시적인 변경
   • 리소스의 URI가 일시적으로 변경
   • PRG 시 사용
   • 302, 307, 303
     • 307, 303을 권장하지만, 302가 이미 상용화되었다.
3. 특수 리다이렉션
   • 클라이언트에게 리소스가 수정되지 않았음을 알려준다. 따라서 캐시를 재사용한다.
   • 응답 시 메시지 바디를 포함하면 안된다.(로컬 캐시를 사용하기 때문)
   • 조건부 GET, HEAD 요청 시 사용
   • 304

PRG

• Post / Redirect / Get
• Post 요청 후 새로 고침으로 인한 중복 처리를 방지하기 위해 GET 메서드로 리다이렉트를 한다.
  • 새로고침 해도 결과 화면을 GET으로 조회

4xx(Client Error)

• 오류의 원인이 클라이언트에게 있기 때문에 똑같은 재시도를 하더라도 실패한다.

5xx(Server Error)

클라이언트의 요청 방식

1. 데이터 전달 방식

1) 쿼리 파라미터를 통한 데이터 전송(GET)

2) 메시지 바디를 통한 데이터 전송(POST, PUT, PATCH)

2. 상황에 따른 구분

1) 정적 데이터 조회

• 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회
  • ex) 이미지, 정적 테스트 문서
• GET 사용

2) 동적 데이터 조회

• 쿼리 파라미터를 사용해서 데이터 전달
  • ex) 조회 조건을 줄여주는 필터, 검색 등
• GET 사용
• 주로 필터나 정렬 조건으로 사용

3) HTML Form 데이터 전송

• HTML Form submit 시 데이터 전송
• GET, POST만 지원
• POST Content-Type 종류
  • application/x-www-form-urlencoded
    • form의 내용을 메시지 바디를 통해서 전송(key=value, 쿼리 파라미터 형식)
    • 전송 데이터를 url encoding 처리
  • multipart/form-data
    • 파일 업로드 같은 바이너리 데이터 전송 시 사용
    • 여러 종류의 파일을 함께 전송 가능

4) HTTP API 데이터 전송

• HTTP를 사용해서 서로 정해둔 스펙으로 데이터를 주고받으며 통신하는 것이다.
• 웹 클라이언트 - 서버, 앱 클라이언트 - 서버, 서버 - 서버에서 사용한다.
  • 웹 클라이언트는 자바스크립트를 통해 통신한다.(AJAX)
• GET, POST, PUT, PATCH, DELETE 메서드를 모두 지원한다.
• Content-Type은 주로 application/json을 사용한다.

HTTP API 설계 예시

• HTTP API - 컬렉션
  • POST 기반 등록
  • 서버가 리소스 URI 결정(컬렉션)
• HTTP API - 스토어
  • PUT 기반 등록
  • 클라이언트가 리소스 URI 결정(스토어)
• HTML FORM 사용
  • 순수 HTML + HTML form 사용
  • GET, POST만 사용 가능 -> PUT, PATCH, DELETE 대신 POST + 컨트롤 URI 사용

URI 설계 개념

1. 문서(document)

• 단일 개념(파일 하나, 객체 인스턴스, 데이터베이스 row)
• ex) /members/100, /files/star.jpg

2. 컬렉션(collection)

• 주로 사용
• 서버가 관리하는 리소스 디렉터리
• 서버가 리소스의 URI를 생성하고 관리
• ex) POST /members로 등록 시, 서버가 임의의 위치(ex. /member/100)에 리소스 생성

3. 스토어(store)

• 파일, 게시판 등에 가끔 사용
• 클라이언트가 관리하는 자원 저장소
• 클라이언트가 리소스의 URI를 알고 관리
• ex) PUT /files/100로 등록 시, 서버는 /files/100 위치에 리소스 생성(또는 대체)

4. 컨트롤러(controller), 컨트롤 URI

• 문서, 컬렉션, 스토어로 해결하기 어려운 추가 프로세스 실행
  • 즉, 행위와 자원의 조합만으로는 처리하기 어려운 경우
• URI에 동사를 직접 사용
  • ex) /members/{id}/delete

api를 설계할 때 중요한 것은 리소스와 행위를 분리하는 것이다. 따라서 URI는 리소스만 식별해야 하고, 그에 대한 처리는 메서드로 구분한다.

주요 HTTP 메서드 종류

1. GET

• 리소스 조회
• 서버에 전달하고 싶은 데이터는 쿼리를 통해서 전달.
  • ex) GET /search?q=hello&hl=ko
• 메시지 바디를 통해 전달 가능. 하지만 지원하지 않는 곳이 많아서 권장하지 않음.

2. POST

• 요청 데이터 처리
  • 주로 신규 리소스 등록, 프로세스 처리에 사용.
  • 응답값이 없기도 함.
  • 포괄적으로 정의되어 있기 때문에, 다른 메서드를 사용하기 애매하다 싶으면 사용해도 됨.
  • PATCH, PUT을 지원하지 않는 경우에도 사용 가능.
• GET과 달리, 메시지 바디를 통해 요청 데이터 전달

3. PUT

• 리소스가 있으면 대체, 리소스가 없으면 생성.
  • 요청 시 필드를 누락하면, null로 저장되는 것을 주의.
• 클라이언트가 리소스 위치를 알고 URI를 지정
  • ex) PUT /members/100

4. PATCH

• 리소스 부분 변경
• PUT과 달리, 요청 시 필드를 누락하더라도 해당 필드의 값이 변경되지 않음.

5. DELETE

• 리소스 제거

HTTP 메서드의 속성

1. 안전

• 몇 번을 호출해도 리소스 변경이 없는 것을 의미한다.
• GET, HEAD 등

2. 멱등

• 몇 번을 호출해도 결과가 동일한 것을 의미한다.
  • 안전과 달리 변경이 발생할 수 있다.
• 멱등 메서드
  • GET : 몇 번을 조회하든 변경이 없고 같은 결과가 조회된다.
  • PUT : 리소스를 대체하므로, 같은 요청을 여러번 해도 결과는 같다.
  • DELETE : 리소스를 삭제하므로, 같은 요청을 여러번 해도 삭제된 상태이다.
  • POST : 멱등이 아니다. 리소스를 등록하는 요청의 경우, 요청할 때마다 새로운 리소스 생성.
  • PATCH : 멱등이 아니다. 나이를 1씩 더하는 요청의 경우, 요청할 때마다 지속적으로 값이 증가.

3. 캐시 가능

• 응답 결과를 캐시해서 사용해도 되는지에 대한 여부를 의미한다.
• POST, PATCH도 캐시 가능하지만, 실제로는 GET, HEAD 정도만 사용.
  • GET은 URL만 캐시 키로 고려하면 되지만, POST, PATCH는 본문 내용까지 고려해야 하기 때문에 구현이 쉽지 않음.