데이터는 어떻게 주고 받을까? - 1. 데이터 전달하기

1. 이유와 목적

- 최근 관리자 페이지 엑셀 다운로드 불가 현상을 해결하던 도중, form 데이터 전송 방식에서 동일한 name 값에 대해서 복수의 value 값을 넣는 소스를 수정해야했다. 

- 복수의 value로 넘어오는 값이 단순히 "배열" 이라고 생각해서 매개변수에서 바로 String[]으로 받았으나, 매핑이 되지 않는 500에러가 발생하였다.

[배열의 값은 key 값을 기준으로 넣어지는 것이기 때문에 - 객체의 개념]
=> name 이라는 변수에 배열이 담겨 있는 것이 아니라
=> name 이라는 key 값에 값이 배열인 경우 
=> 따라서, key 를 매핑시킬 수 있는 DTO의 List로 받아와야함 

- 그러면서 데이터가 전송 > 매핑 > 응답 하는 과정을 제대로 이해하지 못하고 있음을 깨달았고, 그 과정에 대한 원리를 제대로 이해할 필요성을 깨닫게 되었다. 

 

 

 

2. HTTP 요청 헤더 읽기 

• 클라이언트에서 보낸 요청은 HttpServletRequest에 담겨 있음 
• @RequestHeader MultiValueMap<String, String> headerMap
  • 모든 Http 헤더를 조회함 
  • http 쿼리 파라미터도 해당 기능을 이용해 주회
• @CookieValue(value = "myCookie", required = false) String cookie
  • 헤더에 담긴 쿠키의 값도 조회할 수가 있음 

 

 

3. Http 요청 메세지를 통해 서버로 데이터를 보내는 방법 

 

1-1) get 방법 : url에 데이터를 추가 

• 메세지 바디 없이 URL 쿼리 파라미터에 데이터를 포함해서 전달 

http://localhost:8080/request-param?username=hello&age=20

 

 

 

1-2) post 방법 : 폼 데이터를 별도로 첨부하여 서버로 전달 

• 메세지 바디에 쿼리파라미터 형식으로 전달 

POST /request-param ...
content-type: application/x-www-form-urlencoded
username=hello&age=20 (메세지 바디부분)

• 데이터를 눈에 보이지 않게 보낼 때 사용됨 
• FormData
  • 폼을 쉽게 보내도록 도와주는 객체 
  • fetch등의 메서드를 사용할 때 body로 FormData 객체를 받을 수 있음 
  • 이렇게 전달된 객체는 Http 메세지로 인코딩 되어서, 서버 관점에선 일반 폼 전송 방식과 차이가 없음 

<form id="formElem">
  <input type="text" name="name" value="Bora">
  <input type="text" name="surname" value="Lee">
  <input type="submit">
</form>

let response = await fetch('/article/formdata/post/user', {
  method: 'POST',
  body: new FormData(formElem) >> FormData 객체어 form을 담음
});

let result = await response.json();

 

 

 

2) HTTP message body 에 데이터 직접 담기 

• HTTP API에서 주로 사용함 
• 데이터 형식은 주로 JSON 

[대표적인 방법인 ajax 방식]

• 2-1) 쿼리 스트링 
  • 전달하는 data가 객체일 때는 jQuery가 data를 key, value로 나누어서 string (쿼리 스트링) 으로 변경함 
  • 이렇게 되면 서버에서 form 데이터 형식 처럼 값을 받을 수가 있음 

function goList(){
var params = {
    'pageNo' : 1
}

$.ajax({
	...
	data : params,
	...
	success : function(args){
		...
	}
})

 

 

• 2-2) 객체 
  • JSON.stringfy()를 사용하면 객체로 전달할 params를 json 형태로 변경됨 
  • 메세지 바디에 JSON 형태의 데이터가 직접 전달됨 

 

 

4. 요청 파라미터의 이해 : 같은 key에 다수의 value 값이 존재하는 경우 

• form 에 동일 name 값으로 여러개의 value가 존재하는 경우 쿼리 스트링에 같은 key 값으로 여러개의 값이 들어가는 개념

username=hello&age=20&age=30&age=40  (메세지 바디부분)

• 요청 파라미터는 key : value 의 값으로 이해하면 됨 
  • 해당 key가 서버에 requestParam / modelAttribute를 통해 DTO에 있는 일치하는 필드의 setter로 세팅됨   

• 의문 : 매개변수에서 바로 @RequestParam을 사용해 String[]로 전달 받을 수 있을까? 
• 아니면 DTO를 담은 List로 받아야 할까 
• String[] age 로 받을 수 없음 : age 라는 변수에 배열이 담긴 개념이 아니라, age key 값을 가진 여러개의 값으로 전달되기 때문 
  • 물론 getParmeterValues 메서드를 사용하게 되면 해당 값들이 배열로 변환되어 저장할 수 있으나, 매개변수 자체에서 String[]으로 받을 수 없음 (age는 배열이 아니기 때문)
• List<DTO> reulstList 로 받을 수 있음: 객체의 필드에 값을 담는 개념 = DTO.age(key) 1 번할당, DTO.age(key)에 2번 할당이 묶인 객체 
  • 즉, 여러개의 값을 각각 할당하여 그 값들을 묶은 List를 만드는 셈이 됨 

 

 

 

 

 

*get/post 차이 

https://www.w3schools.com/tags/ref_httpmethods.asp?ref=nextree.co.kr

W3Schools.com

 

 

* Client request -> java object 

https://www.notion.so/Client-Http-Request-Java-Object-9043b9c7df664b3ba7b0dd691d94d581?pvs=4

Client Http Request → Java Object | Notion

 

* form 에 동일한 key - 여러 value

https://www.notion.so/form-key-value-5b761db508b84831a7ac6565ad23112a?pvs=4

form의 key에 다수의 value 값이 있을때, 어떻게 전달되고 받을까? | Notion

 

https://jjangadadcodingdiary.tistory.com/entry/Java-Servlet%EC%97%90%EC%84%9C-requestgetParameterValues-%EB%A9%94%EC%84%9C%EB%93%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

Java Servlet에서 request.getParameterValues() 메서드 이해하기

 

* 김영한 - 스프링 MVC 기본원리 1 - 기본기능 참고