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

 

✔️ 클라이언트에서 서버로 데이터 전달 방식

1. 쿼리 파라미터를 통한 데이터 전송 (GET)

=> 주로 정렬 필터 (검색어)

 

2. 메세지 바디를  통한 데이터 전송 (POST, PUT, PATCH)

=> 회원가입, 상품 주문, 리소스 등록, 리소스 변경 등등

---

✔️ 클라이언트에서 서버로 데이터 전송 상황

1. 정적 데이터 조회 (GET)

이미지, 정적 텍스트 문서

일반적으로 리소스 경로로 단순하게 조회 가능

 

2. 동적 데이터 조회 (GET)

주로 검색, 게시판 목록에서 정렬 필터(검색어)

GET은 쿼리 파라미터를 사용해서 데이터를 전달한다.

 

3. HTML Form을 통한 데이터 전송 (GET, POST)

회원가입, 상품 주문, 데이터 변경

GET, POST만 지원하므로 컨트롤 URI를 사용한다. ex) POST의 /new, /edit, /delete가 컨트롤 URI이다. 

• Content-Type : application/x-www-form-urlencoded 사용

=> form의 내용을 메세지 바디를 통해서 전송한다. (key = value, 쿼리 파라미터 형식)

=> 전송 데이터를 url encoding 처리한다. 

 

• Content-Type : multipart/form-data

=> 파일 업로드 같은 바이너리 데이터 전송시 사용한다. 

=> 다른 종류의 여러 파일과 폼의 내용을 함께 전송할 수 있다. 

 

 

4. HTTP API를 통한 데이터 전송

회원가입, 상품 주문, 데이터 변경

• 서버 to 서버 (백엔드 시스템 통신)
• 앱 클라이언트
• 웹 클라이언트

HTML에서 Form 전송 대신 javascript를 통한 통신에서 사용한다. 

React나 Vue 같은 웹 클라이언트와 API 통신

 

• Content-Type : application/json 을 사용한다. (표준)

---

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓