HTTP 통신을 이해해보자 -5

박가현·2023년 6월 5일
1

HTTP

목록 보기
5/8
post-thumbnail

HTTP 메서드 활용

클라이언트에서 서버로 데이터를 전송하는 경우에는 쿼리파라미터를 통한 데이터 전송과 메시지 바디를 통한 데이터 전송으로 나눌 수 있다


정적 데이터 조회

정적 데이터 조회같은 경우에는 클라이언트에서 서버로 추가적인 데이터를 전달하지 않기에 메시지 바디에 데이터를 전달하거나 쿼리 파라미터를 사용하지 않는다

get을 사용하고 쿼리파라미터 없이 단순히 리소스 경로로만 조회가 가능하다


동적 데이터 조회

동적 데이터를 조회할 때는 get 메서드를 사용하고 쿼리 파라미터를 사용해서 데이터를 전달한다 (get은 메시지 바디 사용하는 것을 권장하지 않는다)

ex) search라는 경로에 쿼리파라미터로 검색어 데이터를 전달해야한다.

그렇다면

아래와 같은 형식으로 요청 메시지가 전달된다 ( hl =ko)는 언어가 한국어인것을 말한다

서버에서 이 쿼리파라미터를 전달받으면 key value 형태로 가져오고 hello라는 데이터를 가직 결과를 찾아서 응답 메세지를 보낸다

이러한 동적 데이터 조회는

  • 주로 검색과 게시판 목록에서 사용된다
  • 조건을 줄여주는 필터 , 조회 결과를 정렬하는 정렬 조건에 주로 사용된다


HTML Form 데이터 전송

<form action="/save" method="post">
<input type="text" name="username"/>
<input type="text" name="age"/>
<button type ="submit"> 전송 </button>
</form>

아래와 같이 form 태그를 이용하여 코드를 작성한 후 전송 버튼을 클릭하면

/save 경로로 post 메서드로 http 요청 메시지를 보낸다

현재 name이 username인 input과 name이 age인 input이 두개 있으므로 input으로 입력 받은 값은을 key value 형태로 메시지 바디에 담아 서버에게 전송한다

위와 같은 형식으로 서버에게 요청 http 메시지가 전송된다

이때 content-type은 데이터 형식으로 자원을 명시하기 위해 사용한다

application/x-www-form-urlencoded은 html form으로 요청 메시지를 보낼때 기본 값이고 데이터를 URL인코딩 후 웹 서버로 보내는 방식을 의미한다

만약 이때 method=”get”으로 변경한다면 username=kim&age=20이 쿼리파라미터 형식으로 전송이 된다 get은 조회에서만 사용하고 리소스 변경이 발생하는 곳에 사용하면 안된

💡 form 데이터를 통해 file을 전송해야할때는 어떻게 해야할까?

그럴때는 content-type : multipart/form-data를 통해서 전송을 해야한다

<form action="/save" method="post" enctype="multipart/form-data"/>

multi로 여러 content type의 데이터를 보내고 파일 업로드 같은 바이너리 데이터를 전송할 때 사용한다

참고로 HTML Form 전송은 GET, POST만 지원을 한다

content-type: application/json을 주로 사용한다(사실상 표준)


POST 기반 등록과 PUT 기반 등록

신규 자원을 등록할 때 우리는 post 메서드를 사용한다 하지만 put 메서드로도 신규 자원을 등록할 수 있다

  1. POST - 신규 자원 등록

예를 들어 우리가 신규 회원을 등록하는 uri를 /memeber → post라고 가정하자 우리는 단순히 해당 uri로 post 메서드를 사용해 데이터만 전송하면 된다 이 요청 데이터를 서버가 받으면 이 신규 리소스를 식별할 수 있는 id를 서버에서 만들고 서버가 새로 등록된 리소스 uri를 생성해준다 ( ex /memebers/ 100) 그래서 응답 메시지에 보통 신규 리소스 uri가 포함되어있다

이런 상황을 보면 서버가 리소스 URI를 생성하고 관리한다 서버가 관리하는 리소스 디렉토리가 존재하는 것이다 클라이언트는 등록될 리소스의 uri를 모른다

이런 형식을 ✅컬렉션 (Collection) 이라고 한다

  1. PUT - 신규 자원 등록

PUT을 사용하여 신규 자원을 등록하는 경우는 file을 등록하는 경우가 가장 예시에 적합하다

예를 들어 /files/{filename} → put을 통해 파일을 등록한다고 가정해보자 (put 은 대체지만 어차피 데이터가 없으면 새로 생성하기에 문제는 없다) 이때 uri를 보면 알 수 있듯이 등록될 리소스 uri를 알고 있어야 한다 즉 filename을 알아야 한다 ex) PUT /files/star.jpg

즉 위 예시랑 다르게 클라이언트가 직접 리소스의 uri를 지정하고 관리한다 클라이언트가 리소스 저장소를 관리해야한다

이런 형식을 ✅스토어 (store)라고 한다

❓ ‘하지만 star.jpg를 filename으로 데이터를 전송하였는데 만약 다른 유저가 만든 star.jpg라는 filename이 존재한다면 DB에 있던 이미지가 덮어씌워지지 않을까? ‘ 라는 의문이 들었다

→ 맞다 이처럼 중복 자료로 덮어씌울 위험이 존재한다 하지만 위에서 언급했듯이 서버가 관리하는게 아닌 클라이언트가 관리하는 것이기에 이런 문제 또한 클라이언트가 알아서 해결해야 할 문제이

profile
프론트엔드 공부일지

0개의 댓글