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.comHTML 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=20HTTP 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
웹 개발자 고기호입니다.