HTTP 메서드 활용

데이터 전달 방식

---

HTTP 메서드를 사용하여 클라이언트와 서버 간 데이터를 주고받는 방식은 크게 두 가지로 나누어진다.

쿼리 파라미터 사용

---

• GET 메서드를 사용하여 주로 검색어의 정렬 및 필터를 처리할 때 활용한다.

// Example: 검색어를 쿼리 파라미터로 전달하여 서버에 GET 요청
const searchQuery = "JavaScript";
const language = "en";

fetch(`https://example.com/search?q=${encodeURIComponent(searchQuery)}&lang=${encodeURIComponent(language)}`)
  .then(response => response.json())
  .then(data => {
    console.log("Search Results:", data);
  })
  .catch(error => {
    console.error("Error fetching data:", error);
  });

메시지 바디 사용

---

• POST, PUT, PATCH 메서드를 사용하여 데이터를 서버로 전송할 때 사용된다.
• 주로 회원 가입, 상품 주문, 리소스 등록, 리소스 변경 등의 작업에 사용된다.

// 회원 가입 정보를 메시지 바디로 전달하여 서버에 POST 요청
const userData = {
  username: "newuser",
  password: "securepassword",
  email: "newuser@example.com"
};

fetch("https://example.com/register", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(userData)
})
  .then(response => response.json())
  .then(data => {
    console.log("Registration Successful:", data);
  })
  .catch(error => {
    console.error("Error registering user:", error);
  });

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

---

정적 데이터 조회

---

• 이미지, 정적 텍스트 문서 등을 조회한다.
• GET 메서드를 사용하며, 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순 조회한다.

GET /static/star.jpg HTTP/1.1
Host: localhost:8080

동적 데이터 조회

---

• 검색 결과, 게시판 목록 정렬 및 필터에 사용된다.
• GET 메서드를 사용하며, 쿼리 파라미터를 활용하여 동적으로 생성된 데이터를 조회한다.

GET /search?q=hello&hl=ko HTTP/1.1
Host: www.google.com

HTML Form을 통한 데이터 전송

---

• 회원 가입, 상품 주문, 데이터 변경등에 사용된다.
• 전송 방식
  - POST : Content-Type: application/x-www-form-urlencoded 을 사용하여 메시지 바디에 데이터를 담아 전송한다
  • GET : 메시지 바디 없이 쿼리 파라미터를 사용하여 데이터를 전송한다.
  • 파일 전송 : multipart/form-data 를 사용하여 파일과 데이터를 함께 전송한다.

POST /save HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded

username=kim&age=20

HTTP API를 통한 데이터 전송

---

• 서버 간 통신, 웹 클라이언트(AJAX)에서 회원 가입, 상품 주문, 데이터 변경등에 사용된다.
• 전송 방식
  - POST, PUT, PATCH : 메시지 바디를 통해 데이터를 전송한다.
  • GET : 쿼리 파라미터를 통해 메시지를 전달한다.
• 주요 헤더 : Content-Type: application/json (JSON 형식으로 데이터를 전달)

POST /members HTTP/1.1
Content-Type: application/json

{
  "username": "young",
  "age": 20
}

URL 설계 참고 개념

---

문서(Document)

• 단일 개념을 나타내는 리소스
• 파일, 객체, 인스턴스 등
• 예시 : /members/100, /files/star.jpg

컬렉션(Collection)

• 서버가 관리하는 리소스 디렉토리
• 서버가 리소스의 URI를 생성하고 관리
• 예시 : /members

스토어(Store)

• 클라이언트가 관리하는 자원 저장소
• 클라이언트가 리소스의 URI를 알고 관리
• 예시 : /files

컨트롤러(Controller), 컨트롤 URI

• 문서, 컬렉션, 스토어로 해결하기 어려운 추가 프로세스를 실행할 때 사용
• 동사로 된 리소스 경로 사용
• 예시 : /members/{id}/delete

정리

• 문서의 뭉치가 서버가 관리하는 경우 컬렉션, 클라이언트가 관리하는 경우 스토어, 이 세가지 개념으로 해결하기 어려운 경우 컨트롤러, 컨트롤 URI를 사용한다.

HTTP API 설계 예시

---

HTTP API 컬렉션

• 회원 관리 시스템
• POST를 통해 데이터를 등록하며, 서버가 리소스 URI를 결정한다.
• 클라이언트는 등록될 리소스의 URI를 알지 못한다.
• API 설계 예시
  - 회원 목록 조회: GET /members
  - 회원 등록: POST /members
  - 회원 조회: GET /members/{id}
  - 회원 수정: PATCH, PUT, POST /members/{id}
  - 회원 삭제: DELETE /members/{id}

HTTP API 스토어

• 파일 관리 시스템
• PUT을 통해 데이터를 등록하며, 클라이언트가 리소스 URI를 알고 관리한다.
• 클라이언트가 직접 리소스의 URI를 지정한다.
• API 설계 예시
  - 파일 목록 조회: GET /files
  - 파일 조회: GET /files/{filename}
  - 파일 등록: PUT /files/{filename}
  - 파일 삭제: DELETE /files/{filename}
  - 파일 대량 등록: POST /files

HTML FORM 사용

• 순수 HTML과 HTML Form을 사용하여 웹 페이지에서 데이터를 전송한다.
• HTML Form은 GET과POST만 지원하므로, 복잡한 작업을 위해선 컨트롤 URI를 사용할 수도 있다.
  API 설계 예시
  - 회원 목록 조회: GET /members
  - 회원 등록 폼: GET /members/new
  - 회원 등록: POST /members/new, POST /members
  - 회원 조회: GET /members/{id}
  - 회원 수정 폼: GET /members/{id}/edit
  - 회원 수정: POST /members/{id}/edit, POST /members/{id}
  - 회원 삭제: POST /members/{id}/delete

경험 돌아보기

웹 개발에서 대부분의 API 요청의 경우 컬렉션을 사용하고, 스토어의 경우 AWS S3에 파일을 업로드하는데 사용이 됐던거 같기도 하다. 부트캠프를 했을 때 초반에 담당 멘토님께 HTML Form과 AJAX 중 어떤것을 더 많이 사용하냐 여쭤봤는데, HTML Form은 거의 사용되지 않는다고 하셨다. 나 또한 대부분의 웹개발은 자바스크립트를 사용하므로 UI와 연결이 강하게 돼있는 HTML Form에서 직접 전송하기 보다는 AJAX를 통해서 요청을 하는 편이 더 낫고, 편하다고 생각한다. 하지만 만약 자바스크립트를 사용하지 않는다면 HTML Form을 사용해야하므로 컨트롤러, 컨트롤 URI를 사용할 수도 있을 것 같다.

Reference

---

https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC?attributionToken=ChQxMDMxMDMxMDE1NjYzNjU4Nzc5ORANGiNyZWNvbW1lbmRlX3JlY29tbWVuZGVfMTcwMjUyNjQzNDA2NiIXcmVjb21tZW5kZWQtZm9yLXlvdS1jdnIoAA&gad_source=1&gclid=CjwKCAjw59q2BhBOEiwAKc0ijcbbKKiumxpeq8F2EWKzvVXFcwQ4hCiTSu9TM2c37N3-Se6dotQkHBoCTwAQAvD_BwE