HTTP 메서드 활용

클라이언트 → 서버

클라이언트 → 서버 : 데이터 전달 방식

• 쿼리 파라미터
  • URI 끝에 쿼리 파라미터를 넣어 데이터를 전송하는 방식
  • ?파라미터 키 = 벨류
  • GET, 정렬필터(검색어, 게시판 정렬조건 등)를 사용할때
• 메시지 바디
  • HTTP 메시지 바디를 사용해서 전송
    • 이때 POST, PUT, PATCH를 주로 사용
  • 회원가입, 상품 주문, 리소스등록, 리소스 변경 등에 주로 사용

클라이언트 → 서버 : 상황 ( 4가지)

클라이언트 → 서버 : 정적 데이터 조회

• 서버는 이미지 조회 시 단순 이미지 리소스만 만들어서 클라이언트한테 보낸다
• 이때는 (정적 데이터를 조회할 때) 쿼리 파라미터를 쓰지 않으며 추가적인 데이터가 보통 필요 없다.

📖 정리
정적 데이터란 이미지, 정적 텍스트 문서 이며 리소스 경로 만으로 단순하게 조회가 가능하다.
조회는 GET을 사용하다.

클라이언트 → 서버 : 동적 데이터 조회

클라이언트 → 서버 : 동적 데이터 조회

• 쿼리에 들어가는 값이 검색어(추가조건)이며 필터 역할을 한다.

search라는 리소스에 hello 파라미터를 넣어 hello로만 검색되게 필터를 적용해준다.

위 설명을 통해 아래와 같이 요청 메시지가 나온다.

📖 정리
동적 데이터의 파라미터는 주로 검색, 목록 등에서 정렬 필터로 사용되며 이는 검색어와 같은 의미를 가진다.
여기서 조회는 GET 메서드를 사용하며 쿼리 파리미터를 통해 주로 사용하며, 메시지 바디를 통해 데이터를 전송할 수 있다. (지원되지 않는 곳이 많으므로 실무에서는 사용을 권장하지 않는다.)

클라이언트 → 서버 : HTML Form 데이터 전송

• POST - 데이터 처리를 요청, 주로 등록에 사용

왼쪽은 HTML로 작성된 form이다. 실행 시켜서 텍스트 박스에 값을 입력후 전송 버튼을 누르면 웹 브라우져가 자동으로 오른쪽과 같은 메시지를 만들어준다.

이름을 kim 이라 입력하고 나이를 20이라고 입력하면 웹 브라우저는 위와 같은 키=벨류 스타일로 만들어 메시지 바디에 넣는다.

HTML FORM에 입력된 데이터를 전송할때 데이터 값을 인코딩한 후 들어가게 되는데 이때 인코딩 되는 형식이다. 대부분 위와 같은 형식이며 파싱이 가능하다.

🤔 왜 인코딩을 하나요?
폼에 한글이 value에 들어가면 인코딩 되어 넘어가야되기 때문!
ex) abc김 → abc%EA%B9%80 (UTF-8인코딩 방식)

• GET - 데이터 조회할때 사용
  

GET은 메시지 바디를 사용하지 않으므로 키 = 벨류 값을 쿼리 파라미터에 넣어버린다.

그리고 현재 /save 리소스 이므로 GET 메소드는 적절하지 않다.

• multipart/form-data - Content-Type
  

이미지, 동영상, 날짜, 문장 등 여러 종류의 파일과 폼의 내요을 함께 전송할 수 있는 타입이다.

→ 주로 바이너리 데이터를 전송할 때 사용

📖 정리
HTML Form 테그 사용 시 전송은 GET, POST만 사용 가능하다.
대신 POST 메소드를 이용하여 데이터를 전송해라(GET 사용은 가능하지만 저장 목적으로는 사용하지 말것)

클라이언트 → 서버 : HTTP API 데이터 전송

안드로이드 APP에서 클라이언트에서 서버로 데이터를 바로 전송할때 HTTP API로 데이터를 전송한다.

이걸 직접 만들어서 넘기면 된다.

📖 정리
HTTP API를 통해 데이터를 전송하는 경우는
1. 서버끼리의 통신 → HTML 없이 통신할때 HTTP API 형식을 사용한다.
2. 앱 클라이언트(안드로이트, 사과)
3. Web 클라이언트 → Form 전송 대신 JS를 통한 통신에 사용된다(AJAX통신이라고도 부른다)
4. POST, PUT, PATCH 이용하여 메시지 바디 데이터 전송→ HTTP API에서 메서드 다 사용 가능
5. GET도 사용가능
6. Content-Type: apllication/json 주로 사용한다.(사실상 표준)

🤔왜 JSON을 많이 사용하나요?
JSON은 데이터 전달에서 대다수가 사용한다.
1. 심플하고 이해하기 쉽기 떄문
2. 데이터 크기가 XML에 비해 상대적으로 작다

HTTP API 설계 예시

HTML Form에서 GET POST만 사용한다는 것인 이상적인 이야기이지만 제약사항이 많다.

POST, PUT을 어떨때 사용해야 하는지 알아보자

API설계 - 회원 관리 시스템 (POST 기반)

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

✏️복습
PUT - 삭제 후 덮기 (네이버 블로그처럼 게시글 수정할 때 사용 가능!)
PATCH - 부분 수정
POST - 애매하면 이거 사용

POST- 리소스 등록 시 특징

POST를 사용할떈 클라이언트는 리소스의 위치를 모른다.

POST의 요청을 받은 서버는 URI를 결정하고 로케이션에 해당 경로를 만들어 응답 메시지를 전송한다.

이렇게 서버가 URI를 생성하는 형식을 컬렉션이라 한다.

API설계 - 파일 관리 시스템 (PUT기반)

• 파일 목록 → GET (/files) : 전체
• 파일 조회 → GET (/files/{filename}) : 하나
• 파일 등록 → PUT (/files/{filename})
• 파일 삭제 → DELETE (/files/{filename})
• 파일 대량 등록 → POST (/files)

PUT- 리소스 등록 시 특징

PUT을 이용하여 자원을 등록할때는 클라이언트가 리소스 위치를 알아야 한다. 혹은 클라이언트가 직접 리소스의 URI를 지정한다. 이러한 스타일을 스토어 라고 하고 클라이언트가 관리하는 리소스 저장소라고한다.

🤔 그럼 둘 중 어느것을 사용하나요?
POST, PUT 중에 대부분 POST를 많이 사용한다! = 컬렉션을 많이 사용한다!

API설계 - HTML FORM

GET, POST만 지원하지만 AJAX같은 기술을 사용해서 해결이 가능하다.

→ API 통신(AJAX 이용하는)에서는 GET, POST DELETE 등 다 사용 가능하기 떄문

하지만 순수 HTML에서는 GET, POST만 지원하므로 제약이 있다.

• 회원 목록 → GET (/members)
• 회원 등록 폼 → GET (/members/new)
• 회원 등록 → POST (/members/new, /members) → 벨리데이션 현상 발생 고려 GET이랑 리소스 맞출것 ( 사람마다 선호 방식 다름)
  
• 회원 조회 → GET(/members/{id})
• 회원 수정 폼 → GET(/members/{id}/edit)
• 회원 수정 → POST(/members/{id}/edit, /members/{id})
• 회원 삭제 → POST (/members/{id}/delete) DELETE를 사용할 수 있따면 DELETE 메서드를 사용하면 되지만 HTML Form은 제약이 있으므로 …/delete post라는 컨트롤 URI를 사용해야 한다.
  

🤔POST를 이용한 회원 등록에서 GET이랑 리소스를 맞추고 안 맞추고의 차이가 뭔가요?
폼에 입력한 데이터를 서버로 전송할때 서버에서 문제가 발생하면 서버가 다시 폼에 데이터를 던져줘야 한다. 이떄 리소스를 맞춰두면 경로가 안바뀌고 깔끔하게 해결된다.
만약 회원 등록 폼 리소스랑 맞지 않으면 다시 폼으로 못돌아 오게 된다. → 근데 사람마다 선호하는게 다름

컨트롤 URI

HTML Form에서는 GET, POST만 사용이 가능하다 그렇게 때문에 설계시 제약이 생기며 이를 해결하기 위해 컨트롤 URI를 사용한다.

컨트롤 URI는 동사로 된 리소스 경로를 사용해야 한다.

단! 최대한 리소스 개념을 가지고 URI를 설계해보고 그 상황에서 안될때 URI 컨트롤을 대체제로 사용하자!

📖 정리
1. HTTP API - 컬렉션 (POST)
→ 서버가 대신 URI를 결정해준다.
2. HTTP API - 스토어
→ 클라이언트가 리소스 URI를 결정한다.
3. HTML FROM
→ POST, GET만 사용해야 하며 해결하기 애해만 경우 컨트롤 URI를 사용해서 해결한다.