HTTP 웹 기본 지식 - [HTTP 메서드] #4

김영한 - 모든 개발자를 위한 HTTP 웹 기본 지식을 듣고 정리한 내용입니다.

 

https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC/dashboard

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

📝목차

HTTP 메서드

• HTTP API를 만들어보자
• HTTP 메서드 - GET, POST
• HTTP 메서드 - PUT, PATCH, DELETE
• HTTP 메서드의 속성

HTTP 메서드 활용

• 클라이언트에서 서버로 데이터 전송
• HTTP API 설계 예시

---

📌HTTP API를 만들어보자

💡요구사항 - 회원 정보 관리 API를 만들어라

• 회원 목록 조회
• 회원 조회
• 회원 등록
• 회원 수정
• 회원 삭제

💡API URI 설계 - URI(Uniform Resource Identifier)

• 회원 목록 조회 /read-member-list
• 회원 조회 /read-member-by-id
• 회원 등록 /create-member
• 회원 수정 /update-member
• 회원 삭제 /delete-member

💡API URI 고민 - URI

• 리소스의 의미
  • 회원이라는 개념 자체가 리소스이다.
  • ex) 스타 미네랄을 캐라 -> 미네랄이 리소스
• 리소스 식별 방법
  • 회원이라는 리소스만 식별하면 된다. -> 회원 리소스를 URI에 매핑

💡API URI 설계 - URI

• 회원 목록 조회
• 회원 조회
• 회원 등록
• 회원 수정
• 회원 삭제

💡API URI 설계 - 리소스 식별, URI 계층 구조 활용

• 회원 목록 조회 /members
• 회원 조회 /mebers/{id}
• 회원 등록 /members/{id}
• 회원 수정 /mebers/{id}
• 회원 삭제 /members/{id}

💡리소스와 행위 분리 - 리소스 식별

• URI는 리소스 식별
• 리소스와 해당 리소스를 대상으로 하는 행위 분리
  • 리소스: 회원
  • 행위: 조회, 등록, 삭제, 변경
• 리소스는 명사, 행위는 동사

📌HTTP 메서드 - GET, POST

💡HTTP 메서드 종류

• GET: 리소스 조회
• POST: 요청 데이터 처리, 주로 등록
• PUT: 리소스를 대체, 해당 리소스가 없으면 생성
• PATCH: 리소스 부분 변경
• DELETE: 리소스 삭제

💡HTTP 메서드 종류 - 기타 메서드

• HEAD: GET과 동일하나 메시지 부분을 제외하고, 상태 헤더만 반환
• OPTIONS: 대상 리소스에 대한 통신 가능 옵션(메서드)을 설명
• CONNECT: 대상 자원으로 식별되는 서버에 대한 터널을 설정
• TRACE: 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행

💡GET

• 리소스 조회
• 서버에 전달하고 싶은 데이터는 query를 통해서 전달

💡POST

• 요청 데이터 처리
• 메시지 바디를 통해 서버로 요청 데이터 전달
• 서버는 요청 데이터를 처리
• 전달된 데이터로 신규 리소스 등록, 프로세스 처리에 사용

💡POST - 요청 데이터를 어떻게 처리한다는 뜻일까

• 스펙: POST 메서드는 대상 리소스가 리소스의 고유 한 의미 체계에 따라 요청에 포함 된 표현을 처리하도록 요청
• POST가 사용되는 기능
  • HTML 양식에 입력 된 필드와 같은 데이터 블록을 데이터 처리 프로세스에 제공
  • 게시판, 뉴스 그룹, 메일링 리스트, 블로그
  • 서버가 아직 식별하지 않는 새 리소스 생성
  • 기존 자원에 데이터 추가
• 정리: 리소스 URI에 POST 요청이 오면 요청 데이터를 어떻게 처리할지 리소스마다 따로 정해야함

💡POST - 정리

1. 새 리소스 생성(등록)
   1. 서버가 아직 식별하지 않는 새 리소스 생성
2. 요청 데이터 처리
   1. 단순히 데이터를 생성하거나, 변경하는 것을 넘어서 프로세스를 처리해야 하는 경우
   2. ex) 결제완료 -> 배달시작 -> 배달완료
3. 다른 메서드로 처리하기 애매한 경우
   1. EX) JSON으로 조회 데이터를 넘겨야 하는데, GET 메서드를 사용하기 어려운 경우
   2. 애매하면 POST

📌HTTP 메서드 - PUT, PATCH, DELETE

💡PUT

• 리소스를 대체
  • 리소스가 있으면 대체
  • 리소스가 없으면 생성
  • 덮어쓰기와 같음
• 클라이언트가 리소스를 식별
  • 클라이언트가 리소스 위치를 알고 URI 지정
  • POST와 차이점

💡PATCH

💡DELETE 

📌HTTP 메서드의 속성

• 안전(Safe Methods)
• 멱등(Idempotent Methods)
• 캐시가능(Casheable Methods)

💡안전 - Safe

• 호출해도 리소스 변경X

💡멱등 - Idempotent

• 몇번 호출하든 결과가 같다
• 멱등 메서드
  • GET: 한 번 조회하든, 두번 조회하든 결과가 같다
  • PUT: 결과를 대체, 같은 요청을 여러번해도 최종 결과는 같다.
  • DELETE: 결과를 삭제
  • POST: 멱등이 아니다 두번 호출하면 같은 결제가 중복해서 발생할 수 있다.
• 활용
  • 자동 복구 메커니즘

💡캐시가능 - Casheable

• GET, HEAD, POST, PATCH 캐시가능
• 실제로 GET, HEAD 정도만 캐리로 사용
• POST, PATCH는 구현이 쉽지 않음

---

📌클라이언트에서 서버로 데이터 전송

💡데이터 전달 방식

• 쿼리 파라미터를 통한 데이터 전송
  • GET
  • 주로 정렬 필터(검색어)
• 메시지 바디를 통한 데이터 전송
  • POST, PUT, PATCH
  • 회원 가입, 상품 주문, 리소스 등록, 리소스 변경

💡4가지 상황

• 정적 데이터 조회
  • 이미지, 정적 테스트 문서
• 동적 데이터 조회
  • 주로 검색, 게시판 목록에서 정렬 필터(검색어)
• HTML Form을 통한 데이터 전송
  • 회원 가입, 상품 주문, 데이터 변경
• HTTP API를 통한 데이터 전송
  • 회원 가입, 상품 주문, 데이터 변경
  • 서버 to 서버, 앱 클라이언트, 웹 클라이언트(Ajax)

💡정적 데이터 조회 - 쿼리 피라미터 미사용

💡정적 데이터 조회 - 정리

• 이미지, 정적 텍스트 문서
• 조회는 GET 사용
• 정적 데이터는 일반적으로 쿼리 피라미터 없이 리소스 경로로 단순하게 조회 가능

💡동적 데이터 조회 - 쿼리 피라미터 사용

💡동적 데이터 조회 - 정리

• 주로 검색, 게시판 목록에서 졍렬 필터(검색어)
• 조회 조건을 줄여주는 필터
• 조회는 GET 사용
• GET은 쿼리 피라미터 사용해서 데이터 전달

💡HTML Form 데이터 전송 - POST 전송 - 저장

💡HTML Form 데이터 전송 - GET 전송 - 조회

💡HTML Form 데이터 전송

💡HTML Form 데이터 전송 - 정리

• HTML Form submit시 POST 전송
  • ex) 회원 가입, 상품 주문, 데이터 변경
• Content-Type: application/x-www-form-urlencoded 사용
  • form의 내용을 메시지 바디를 통해 전송(key=value, 쿼리 피라미터 형식)
  • 전송 데이터를 url encoding 처리
    • ex) abc김 -> abc%EA%B9%80
• HTML Form은 GET 전송도 가능
• Content-Type: multipart/form-data
  • 파일 업로드 같은 바이너리 데이터 전송시 사용
  • 다른 종류의 여러 파일과 폼의 내용 함께 전송 가능
• HTML Form 전송은 GET, POST만 지원

💡HTTP API 데이터 전송

💡HTTP API 데이터 전송 - 정리

• 서버 to 서버
  • 백엔드 시스템 통신
• 앱 클라이언트
  • 아이포, 안드로이드
• 웹 클라이언트
  • HTML에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용
  • ex) React, VueJs 같은 웹 클라이언트와 API 통신
• POST, PUT, PATCH: 메시지 바디를 통해 데이터 전송
• GET: 조회, 쿼리 피라미터로 데이터 전달
• Content-Type: apllication/json을 주로 사용
  • TEXT, XML, JSON

📌HTTP API 설계 예시

• HTTP API- 컬렉션
  • POST 기반 등록
  • ex) 회원관리 API 제공
• HTTP API - 스토어
  • PUT 기반 등록
  • ex) 정적 컨텐츠 관리, 원격 파일 관리
• HTML FORM 사용
  • 웹 페이지 회원 관리
  • GET, POST만 지원

💡회원 관리 시스템 - API 설계 - POST 기반 등록

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

💡회원 관리 시스템 - POST - 신규 자원 등록 특징

• 클라이언트는 등록될 리소스의 URI를 모른다.
  • 회원 등록 /members -> POST
  • POST / members
• 서버가 새로 등록된 리소스 URI를 생성해준다.
  • HTTP/1.1 201 Create                                                                                                                                                Location: /members/100
• 컬렉션(Collection)
  • 서버가 관리하는 리소스 디렉토리
  • 서버가 리소스의 URI를 생성하고 관리
  • 여기서 컬렉션은 /members

💡파일 관리 시스템 - API 설계 - PUT 기반 등록

• 파일 목록 /files - > GET
• 파일 조회 /files/{filename} -> GET
• 파일 등록 /files/{filename} -> PUT
• 파일 삭제 /files/{filename} -> DELETE
• 파일 대량 등록 /files -> POST

💡파일 관리 시스템 - PUT - 신규 자원 등록 특징

• 클라이언트가 리소스 URI를 알고 있어야함
  • 파일등록 /files/{filename} -> PUT
  • PUT /files/star.jpg
• 클라이언트가 직접 리소스의 URI를 지정한다.
• 스토어(Store)
  • 클라이언트가 관리하는 리소스 저장소
  • 클라이언트가 리소스의 URI를 알고 관리
  • 여기서 스토어는 /files

💡HTML FORM 사용

• HTML FORM은 GET, POST만 지원
• AJAX 같은 기술을 사용해서 해결 가능 -> 회원 API 참고
• GET, POST만 지원해 제약있음

 

• 회원 목록 /members -> GET
• 회원 등록 폼 /members/new -> GET
• 회원 등록 /members/new, /members -> POST
• 회원 조회 /members/{id} -> GET
• 회원 수정 폼 /members/{id}/edit -> GET
• 회원 수정 /members/{id}/edit, /members/{id} -> POST
• 회원 삭제 /members/{id}/delete -> POST

 

• HTML FORM은 GET, POST만 지원
• 컨트롤 URI
  • GET, POST만 지원하므로 제약 있음
  • 동사로 된 리소스 경로 사용
  • POST의 /new, /edit, /delete가 컨트롤 URI
  • HTTP 메서드로 해결하기 애매한 경우 사용

---