[한화시스템 BEYOND SW캠프 7기] #28. Spring Basic | Post 요청

아로롱·2024년 7월 11일

Java Spring html

🖥️ Post 요청에 대한 Case 정리

📤 백엔드 데이터 전송 방식 살펴보기

Post 요청에 대한 case들 살펴보기 : 사용자 입장에서 서버에 데이터를 보내달라고 요청하는 상황들!

post 요청 (사용자 입장에서 서버에 데이터를 주는 상황)

Post 요청 방법 두 가지
1) html 로 form 태그를 사용하여 post 요청

1-1) url 인코딩(text 만 전송할 때)
1-2) multipart/form-data

2) js 를 사용하는 요청 방식

2-1) json
2-2)formData 객체 사용(multipart)

✔️ get 요청 : 사용자 ← 서버 : 화면을 준다.
✔️ post 요청 : 사용자 → 서버 : 데이터를 받는다.

@ 어노테이션 사용 구분

@PostMapping 부분을 작성할 때,
⭐️객체를 넣거나 Model 을 사용하는 경우는 @RequestParam 방식 사용.
⭐️JSON 으로 전송된 데이터를 받을 때는 @RequestBody 어노테이션 사용.
⭐️formData를 통해 JSON, file(멀티 미디어-이미지, 영상 등) 을 처리할 때 @RequestPart 어노테이션을 사용.

1) public String Post(@RequestParam(value = "Name")String inputName
2) public String Post(@RequestBody Hello hello)
3) public String Post(@RequestPart("hello") Hello hello)

모든 Case 의 HTML 파일의 경우, 가독성을 위해 일부만 옮겨옴.

Case1. url 인코딩 방식(text 만 전송)

✔️ post 요청(사용자 입장에서 서버에 데이터를 주는 상황)
→ 형식 : key1=value1&key2=value2
✔️ orm 태그가 있는 화면을 먼저 줘야한다.
✔️ 우선 get 요청 먼저 ! → 회원가입 할 정보 주세요 ~
✔️ 사용자에게 name, email, password 를 요청할 수 있는 화면을 주는 메서드 정의.
✔️ 메서드명 : formView, 화면명 : form-view

HTML 우선 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>📝 회원 가입</title>
</head>
<body>
<div>
    <form action="/hello/form-post1" method="post"
          enctype="application/x-www-form-urlencoded">
        <label for="name">이름 : </label>
        <input type="text" id="name" name="name"
                rows="1" cols="30"
                placeholder="이름을 작성해주세요."/>
    </form>
</div>
</body>
</html>

<form action="/hello/form-post1" method="post"
enctype="application/x-www-form-urlencoded">
이 부분은 Post 요청 작성 후 추가해주었다.

Java 파일 작성

@GetMapping("/form-view")
public String formView(){
	return "formView";
  }
  
@PostMapping("/form-post1")
@ResponseBody
public String formPost1(@RequestParam(value="name")String inputName){
	System.out.println("이름은 " + inputName);
    return "ok";
}

@RequestParam(value="name") 에 비밀번호, 이메일 등 데이터가 많아진다면 ?
⇒ 데이터 바인딩 방식 활용.

@PostMapping("/form-post2")
    @ResponseBody
    public String formPost2(Hello hello){ //데이터 바인딩 방식. @ModelAttribute Hello hello 이지만 생략 가능.
        System.out.println(hello); // toString 내장되어있어서 가능함.
        return "ok";
    }

/form-view 에서 작성 후 제출하면 /form-post 로 넘어간다 !

Case2. multipart/form-data (text와 파일) 전송 방식

✔️ url명 : form-file-post, 메서드명 : formFilePost, 화면명 : form-file-view
✔️ form태그 : name, email, password, file

HTML 우선 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>📝 회원 가입</title>
</head>
<body>
<div>
    <form action="/hello/form-file-post" method="post"
          enctype="multipart/form-data">
        <label for="name">이름 : </label>
        <input type="text" id="name" name="name"
                rows="1" cols="30"
                placeholder="이름을 작성해주세요."/>
    </form>
</div>
</body>
</html>

Java 코드 작성

@GetMapping("/form-file-post")
    public String formFilePost(){
        return "form-file-view";
    }

    @PostMapping("/form-file-post") // 위는 get 여기는 post 라서 같은 url 사용 가능.
    @ResponseBody
    public String formFileHandle(Hello hello,
    								@RequestParam(value = "image")
                                    MultipartFile image){
        System.out.println("hello");
        System.out.println(image.getOriginalFilename());
        return "ok";
    }

업로드한 이미지를 확인하는 방법은 아직 시도해보지 않았으므로,
업로드한 이미지의 파일명을 통해 제대로 작동하는지 확인해보았다. (getOriginalFile 활용)

Case3. JavaScript를 활용한 form 데이터 전송 방식

✔️ url 명 : axios-form-view
✔️ name, email, password 를 전송

HTML 우선 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>📝 회원 가입</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    document
      .getElementById("postForm")
      .addEventListener("submit", async function (event) {
        event.preventDefault();
        // input 에서 id 값이 있어야 선언해서 할당 됨.
        const name = document.getElementById("name").value;
        const email = document.getElementById("email").value;
        const password = document.getElementById("password").value;
        
        //⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
        const formData = new FormData();
        formData.append("name", name);
        formData.append("email", email);
        formData.append("password", password);
        //⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
        
        try {
          const response = await axios.post("http://localhost:8080/hello/axios-form-view", formData);
          console.log(response.data);
        } catch (e) {
          console.log(e);
        }
      });
</script>
</body>
</html>

Java 코드 작성

@GetMapping("/axios-form-view")
public String axiosFormView(){
	return "axios-form-view"; // html 파일명
}

@PostMapping("/axios-form-view")
@ResponseBody
public String axiosFormPost(Hello hello){
	System.out.println(hello);
    return "ok";
}

사용자 입력 값이 hello 객체에 데이터로 잘 삽입되어 hello 를 출력했을 때
입력한 값이 잘 나타난다!

Case4. JavaScript를 활용한 form 데이터와 file 전송 방식

✔️ url 명 : axios-form-view
✔️ name, email, password + image 이미지 파일을 전송

HTML 우선 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>📝 회원 가입</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    document
      .getElementById("postForm")
      .addEventListener("submit", async function (event) {
        event.preventDefault();
        // input 에서 id 값이 있어야 선언해서 할당 됨.
        const name = document.getElementById("name").value;
        const email = document.getElementById("email").value;
        const password = document.getElementById("password").value;
        
        //⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
        const inputImage = document.getElementById("image"); // file은 배열형태로 get 되기 때문에 .value 지워줌 !
        const image = inputImage.files[0]; // 배열 형태로 get 이니까 .files[0]
        const formData = new FormData();
        formData.append("name", name);
        formData.append("email", email);
        formData.append("password", password);
        formData.append("image", image);
        //⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
        
        try {
          const response = await axios.post("http://localhost:8080/hello/axios-form-file-view", formData, {headers : {'Content-Type' : 'multipart/form-data'}});
          console.log(response.data);
        } catch (e) {
          console.log(e);
        }
      });
</script>
</body>
</html>

Java 코드 작성


@GetMapping("axios-form-file-view")
public String axiosFormFileView(){
	return "axios-form-file-view";
}

@PostMapping("axios-form-file-view")
@ResponseBody
public String axiosFormFilePost(Hello hello, @RequestParam(value = "image")MultipartFile image){
	System.out.println(hello);
    System.out.println(image.getOriginalFilename())
    
    return "ok";
}

입력한 값이 Hello 객체로 나타나고, 첨부한 사진 파일도 잘 들어갔다 !

Case5. JavaScript를 활용한 json 파일 전송 방식

✔️ url 패턴 : axios-json-view , 화면명, get 요청 메서드 : axios-json-view
✔️ post 요청 메서드 : axiosJsonPost

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>📝 회원 가입</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    document
      .getElementById("postForm")
      .addEventListener("submit", async function (event) {
        event.preventDefault();
        // input 에서 id 값이 있어야 선언해서 할당 됨.
        const name = document.getElementById("name").value;
        const email = document.getElementById("email").value;
        const password = document.getElementById("password").value;
		
        //⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
        try {
          const response = await axios.post("http://localhost:8080/hello/axios-json-view",
          {name:name, email:email, password:password});
          console.log(response.data);
        } catch (e) {
          console.log(e);
        }
      });
</script>
</body>
</html>

@GetMapping("axios-json-view")
public String axiosJsonView(){
	return "axios-json-view";
}

@PostMapping("axios-json-view")
@ResponseBody
public Hello axiosJsonPost(@RequestBody Hello hello){
	return hello;
}

return 이기 때문에 콘솔창에서 출력값을 확인해주었다.

Case6. JavaScript를 활용한 json data + file 전송 방식

✔️ url 패턴 : "axios-json-file-view"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>📝 회원 가입</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    document
      .getElementById("postForm")
      .addEventListener("submit", async function (event) {
        event.preventDefault();
        // input 에서 id 값이 있어야 선언해서 할당 됨.
        const name = document.getElementById("name").value;
        const email = document.getElementById("email").value;
        const password = document.getElementById("password").value;

        const hello = {name: name, email: email, password: password};
        const helloJson = JSON.stringify(hello);

        const inputImage = document.getElementById("image");
        const image = inputImage.files[0];

		//⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
        const formData = new FormData();
<!--        formData.append("hello", helloJson);-->
<!--        // blob 함수는 데이터형을 지정/변환할 때 사용.-->
        formData.append("hello", new Blob([helloJson], {type: "application/json"}));
        formData.append("image", image);
		//⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
        
        try {
          const response = await axios.post("http://localhost:8080/hello/axios-json-file-view", formData, {headers : {'Content-Type' : 'multipart/form-data'}});
          console.log(response.data);
        } catch (e) {
          console.log(e);
        }
      });
</script>
</body>
</html>

@GetMapping("/axios-json-file-view")
public String axiosJsonFileView(){
	return "axios-json-file-view";
}

@PostMapping("axios-json-file-view")
public String axiosJsonFilePost(@RequestPart("hello")Hello hello,
								@RequestPart("image")MultipartFile file)								throws JsonProcessingException{
	
    System.out.println(file.getOriginalFilename());
    return "ok";
}

Case7. JavaScript를 활용한 json data + 여러 개의 file 전송 방식

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>📝 회원 가입</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    document
      .getElementById("postForm")
      .addEventListener("submit", async function (event) {
        event.preventDefault();
        // input 에서 id 값이 있어야 선언해서 할당 됨.
        const name = document.getElementById("name").value;
        const email = document.getElementById("email").value;
        const password = document.getElementById("password").value;

        const hello = {name: name, email: email, password: password};
        const helloJson = JSON.stringify(hello);

        const inputImage = document.getElementById("image");
        const images = inputImage.files; // image 를 multi 로 설정했으니까 s 붙여서 모두 수정.

        const formData = new FormData();
<!--        formData.append("hello", helloJson);-->
<!--        // blob 함수는 데이터형을 지정/변환할 때 사용.-->
        formData.append("hello", new Blob([helloJson], {type: "application/json"}));
        
        //⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
        // 여러 개니까 for문 돌려주기.
        for(let i = 0; i < images.length; i++){
            formData.append("images", images[i]);
        }
        <!--formData.append("image", image);   -->
        //⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
        
        try {
          const response = await axios.post("http://localhost:8080/hello/axios-json-multi-file-view", formData, {headers : {'Content-Type' : 'multipart/form-data'}});
          console.log(response.data);
        } catch (e) {
          console.log(e);
        }
      });
</script>
</body>
</html>

@GetMapping("/axios-json-multi-file-view")
public String axiosJsonMultiFileView(){
	return "axios-json-multi-file-view";
}

@PostMapping("axios-json-multi-file-view")
@ResponseBody
Public String axiosJsonMultifilePost(@RequestPart("hello") Hello hello,
									 @RequestPart("images") List<MultipartFile> images){
	for(MultipartFile file:images){
    	System.out.println(file.getOriginalFilename();
    }
	return "ok";
}

파일이 여러 개이므로 리스트에 담아주고, for each 문을 통해 꺼내주면서
파일명을 확인해 제대로 첨부되었는지 확인하였다 !
파일 선택할 때도 3장이 한 번에 선택 되었다 !

📋 살펴본 Post Case의 경우들

⭐️ axios json 을 전송 (application/json) ⇒ 서버 : RequestBody
⭐️ axios json + 파일 전송 (Multipart-formdata) ⇒ 서버 : RequestPart
⭐️ axios json + 멀티 파일 ⇒ 서버 : RequestPart, List<파일>
⭐️ axios json (중첩) ⇒ 서버 : RequestPart + 객체 안에 객체
⭐️ axios json (중첩) + 파일 : FormData ⇒ 서버: RequestPart