HTTP 메서드 활용

yiwoojung·2023년 9월 1일
0

클라이언트에서 서버로 데이터 전송시 데이터 전달 방식

  1. 쿼리 파라미터

    1. get
    2. 주로 정렬 필터(검색어)
  2. 메시지 바디

    1. post, put, patch
    2. 회원 가입, 상품 주문, 리소스 등록, 리소스 변경

예시

1. 정적 데이터 조회

  1. get
  2. 쿼리 파라미터 미사용
  3. 이미지, 정적 텍스트 문서
  4. 추가 데이터 필요 없음

2. 동적 데이터 조회

  1. get
  2. 쿼리 파라미터 사용
    1. 쿼리 파라미터를 기반으로 정렬/필터해서 결과를 동적으로 생성
  3. 검색, 필터(검색어)

3. html form을 통한 데이터 전송

  1. html form 태그로 회원가입을 만든다 ⇒ 회원가입을 하면 브라우저가 http 메시지를 생성해준다 ⇒ 서버로 전송
    1. method: post ⇒ form data를 메시지 body에 넣어주고 get 이라면 url 쿼리파라미터에 자동으로 넣어준다
    2. Content-Type: application/x-www-form-urlencoded ****방식 사용
    3. form의 내용을 메시지 바디를 통해서 전송 (key=value, 쿼리 파라미터 형식)
    4. 전송 데이터를 인코딩 처리
  2. 메서드는 get(조회), post(등록)만 가능
  3. 파일 업로드도 가능
    1. form 태그의 enctype : multipart/form-data*Content-Type: multipart/form-data; boundary =---xxx*
    2. 파일 업로드 같은 바이너리 데이터를 전송 시에 사용
    3. 여러 종류의 파일과 폼 내용을 함께 전송

4. http api를 통한 데이터 전송

(html form을 사용하지 않는 거의 모든 상황)

애플리케이션을 이용해서 클라이언트에서 서버로 넘긴다면 메세지를 만들어서 넘기면 된다.

  1. 서버 to 서버
    1. 백엔드 시스템 통신
  2. 앱 클라이언트
    1. 아이폰, 안드로이드
  3. 웹 클라이언트
    1. js (AJAX 통신)
    2. React, Vue.js
  4. post, put, patch 일 때는 ⇒ 메시지 바디를 통해 데이터 전송
  5. get ⇒ 쿼리 파라미터로 데이터 전달
  6. Content-Type: application/json을 주로 사용

HTTP API 설계 예시

(1) post 기반 등록 ⇒ 컬렉션

  • ex) 회원관리 api

API 설계

회원 관리 시스템을 만들어보자

(리소스를 식별해야한다! 리소스가 아닌 다른 것을 식별하면 안된다)

  • 회원 목록 /members ⇒ get
  • 회원 등록 /members ⇒ post
  • 회원 조회 /members/{id} ⇒ get
  • 회원 수정 /members/{id} ⇒ patch, put, post
  • 회원 삭제 /members/{id} ⇒ delete

POST - 신규 자원 등록 특징

post로 데이터 등록할 때는 서버에서 리소스 uri를 결정하고 만들어준다.

⇒ 클라이언트가 서버한테 요청하는 것이다

클라이언트에서 회원 데이터를 던지면 서버에서 회원 식별자를 만드는 것이다.

서버가 응답할 때 lcoation 또는 body에 넣어서 보낸다.

결정을 서버가 한다.

  • 클라이언트는 등록될 리소스의 uri를 모른다.
  • 새로운 리소스의 id를 서버가 만들어 준다.
  • 컬렉션(Collection)
    • 서버가 관리하는 리소스 디렉토리

    • 서버가 리소스의 uri를 생성하고 관리

    • 여기서 컬렉션은 /members


(2) PUT 기반 등록 ⇒ 스토어

  • ex) 정적 컨텐츠 관리, 원격 파일 관리

API 설계

파일 관리 시스템을 만들어보자

  • 파일 목록 /files⇒ get
  • 파일 조회 /files/{filename} ⇒ get
  • 파일 등록 /files/{filename} ⇒ put
  • 파일 삭제 /files/{filename} ⇒ delete
  • 파일 대량 등록 /files ⇒ post

PUT - 신규 자원 등록 특징

클라이언트가 리소스 uri(파일이름)를 다 알고 있어야 한다.

⇒ 클라이언트가 직접 관리 하는 것임

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


HTTP FORM 사용

  • get, post 만 지원

  • ex) 웹 페이지 회원 관리

  • ajax 같은 기술을 사용해서 해결 가능

  • 순수 html + html form 을 사용하는 경우

  • 컨트롤 URI (=컨트롤러)

    • 동사로 된 리소스 경로 사용
    • post의 /new, /delete, /edit
    • http 메서드로 해결하기 애매한 경우 사용
      • 실무에서 많이 사용
      • HTTP API 포함
  • 회원 목록 /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 ⇒ delete



참고하면 좋은 URI 설계 개념

REST API URI Naming Conventions and Best Practices

문서 (document)

  • 단일 개념 (파일 하나, 객체 인스턴스 …)
  • /members/100, /files/star.jpg

컬렉션 (collection)

  • 서버가 관리하는 리소스 디렉터리
  • 서버가 리소스의 URI를 생성하고 관리
  • 회원관리 /members

스토어(store)

  • 클라이언트가 관리하는 자원 저장소
  • 클라이언트가 URI를 생성하고 관리
  • 파일, 게시판 등.. /files

📌 컨트롤러(controller), 컨트롤 URI

  • 문서, 컬랙션, 스토어로 해결하기 어려운 추가 프로세스 실행
  • 동사를 직접 사용


리소스를 설계한다.
컬렉션과 문서 그리고 get, post, put, delete로 최대한 해결을 하고 
그래도 해결이 안되는 상황에는 컨트롤러를 사용하면 된다!


Reference.

profile
프론트엔드 개발자

0개의 댓글