클라이언트에서 서버로 데이터 전송: 데이터 전달 방식은 크게 2가지
-쿼리 파라미터를 통한 데이터 전송(GET, 검색어)
-메시지 바디를 통한 데이터 전송
-POST, PUT, PATCH
-회원 가입, 상품 주문, 리소스 등록, 리소스 변경
4가지 상황
1.정적 데이터 조회(이미지, 정적 텍스트 문서): GET 쿼리 없이 조회가능
2.동적 데이터 조회(주로 검색): GET 쿼리 파라미터기반 정렬 필터해서 결과를 동적으로 생성
3.HTML Form을 통한 데이터 전송(회원가입, 데이터 변경등)
-폼 테크 -> HTTP 메시지 생성(웹 브라우저)
<form action="/save" method="post"> <input type="text" name="usernave" /> <input type="text" name="age" /> <button type="submit">전송</button> </form> |
POST /save HTTP/1.1 Host: localhost:8080 Content-Type: application/x-www-form-urlencoded username=kim&age=20 |
-enctype="multipart/form-data" (웹 브라우저가 폼내용과 사진 또는 파일을 바이너리로 바꿔서 HTTP 메시지 생성)
4.HTTP API를 통한 데이터 전송
-회원 가입, 데이터 변경등
-서버 to 서버(백엔드 시스템 통신)
-앱 클라이언트(아이폰,안드로이드)
-웹 클라이언트(자바스크립트를 통한 통신:Ajax) e.g. React, VueJs
-POST, PUT, PATCH
-GET: 조회, 쿼리 파라미터로 데이터 전달
-json이 사실상 표준
POST /members HTTP/1.1 Content-Type: application/json { "username": "young", "age": 20 } |
HTTP API 설계 예시
-HTTP API-컬렉션
-POST 기반 등록(회원 관리 API 제공)
HTTP API-스토어
-PUT 기반 등록(정적 컨텐츠 관리, 원격 파일 관리)
HTML FORM 사용
-웹 페이지 회원 관리(GET,POST만 지원)
회원 관리 시스템(컬렉션)
API 설계 - POST 기반 등록
-회원 목록 -> GET
-회원 등록 -> POST
-회원 조회 -> GET
-회원 수정 -> PATCH, PUT, POST
-회원 삭제 -> DELETE
POST방식은 서버에서 리소스 URI 생성해줌(/members/100)
컬렉션(Collection)
-서버가 관리하는 리소스 디렉토리
-서버가 리소스의 URI를 생성하고 관리(컬렉션 = /members)
파일 관리 시스템(스토어)
API 설계 - PUT 기반 등록
-파일 목록 -> GET
-파일 조회 -> GET
-파일 등록 -> PUT
-파일 삭제 -> DELETE
-파일 대량 등록(임의로 정함) -> POST
PUT방식은 클라이언트가 리소스 URI를 알고 있어야함(관리)
스토어(Store)
-클라이언트가 관리하는 리소스 저장소(스토어 = /files)
HTML FORM 사용
-GET,POST만 지원 -> 따라서 제약이 있음 -> 컨트롤 URI(/new, /edit, /delete, 기타 동사)추가를 통해 해결
-회원 목록 /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(어쩔수 없이 Control URI를 씀)
정리
-문서(document): 단일 개념(파일 하나, 객체 인스턴스, 데이터베이스 row) e.g. /members/100
-컬렉션(Collection): 서버가 관리하는 리소스 디렉터리 e.g. /members
-스토어(Store): 클라이언트가 관리하는 자원 저장소 e.g. /files
-컨트롤러(Controller), 컨트롤 URI : 문서, 컬렉션, 스토어만으론 해결하기 어려운 추가프로세스(동사) 실행
e.g. /members/{id}/delete
'웹 프로그래밍 > HTTP' 카테고리의 다른 글
HTTP 헤더(1) (0) | 2023.02.26 |
---|---|
HTTP 상태코드 (0) | 2023.02.24 |
HTTP 메서드 (0) | 2023.02.22 |
HTTP (0) | 2023.02.22 |
URI와 웹 브라우저 (0) | 2023.02.21 |