본문 바로가기
웹 개발(Web Development)/Spring

[Spring] 데이터 전송과 응답 방법

by whisperscope_ai 2024. 3. 17.
반응형

1. MIME(Multipurpose Internet Mail Extensions)란?

MIME는 인터넷에서 전자 메일을 통해 다양한 형태의 데이터(텍스트, HTML, 이미지, 비디오 등)를 전송하기 위해 확장된 인코딩 방식입니다. 원래는 이메일에서 파일을 주고받을 때 사용되었지만, 현재는 HTTP에서도 널리 사용됩니다.

MIME의 주요 종류 및 사용 목적:

  • text/plain: 일반 텍스트 데이터를 나타냅니다. 기본적인 텍스트 전송에 사용됩니다.
  • text/html: HTML 문서를 나타냅니다. 웹 페이지를 전송할 때 사용됩니다.
  • image/jpeg, image/png: JPEG 또는 PNG 형식의 이미지 데이터를 나타냅니다. 이미지 파일 전송에 사용됩니다.
  • application/x-www-form-urlencoded: query string 이라고도 하며 웹 폼 데이터가 서버로 제출될 때 사용되는 인코딩 타입입니다. 폼 내의 데이터는 이름과 값 쌍으로 인코딩 되어 URL에 쿼리 문자열로 첨부되거나, POST 요청의 본문으로 전송됩니다. 데이터는 &로 구분되며, 이름과 값은 =로 연결됩니다. 특수 문자는 URL 인코딩(퍼센트 인코딩)이 적용되어 전송됩니다. 주로 HTML 폼 데이터를 서버에 전송할 때 사용되며, 간단한 텍스트 데이터 전송에 적합합니다.
  • application/json: JSON 형식의 데이터를 나타냅니다. 웹 API를 통해 데이터를 교환할 때 주로 사용됩니다.
  • multipart/form-data: 폼 데이터가 여러 부분으로 나누어 전송될 때 사용됩니다. 파일 업로드 등에 사용됩니다.

MIME의 사용 목적은 클라이언트와 서버 간에 데이터의 형식을 명확히 하여, 올바른 방식으로 데이터를 해석하고 처리할 수 있게 하는 것입니다.

2. Query String, Multipart, Application/JSON

아래는 Spring Framework를 사용하는 프로젝트에서의 RequestMapping을 활용하여 query string, multipart/form-data, 그리고 application/json 요청을 처리하는 방법과 이러한 요청을 HTML 및 jQuery AJAX를 통해 보내는 방법에 대한 예시입니다.

Query String 요청과 응답 예제

HTML Form 예제

<!DOCTYPE html>
<html>
<head>
    <title>Query String Request Example</title>
</head>
<body>
    <form action="http://localhost:8080/search" method="get">
        <input type="text" name="query" />
        <input type="submit" value="Search" />
    </form>
</body>
</html>

Spring Controller 예제

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class SearchController {

    @GetMapping("/search")    
    public String handleSearch(@RequestParam String query) {
        // 여기에서 query를 처리
        return "view";
    }
}

Multipart 요청과 응답 예제 (동기방식)

HTML Form 예제

<!DOCTYPE html>
<html>
<head>
    <title>Multipart Request Example</title>
</head>
<body>
    <form action="http://localhost:8080/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" />
        <input type="submit" value="Upload" />
    </form>
</body>
</html>

Spring Controller 예제

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class FileUploadController {

    // @ResponseBody는 응답을 위한.
    @PostMapping("/upload")
    @ResponseBody 
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {
        // 여기에서 파일을 처리
        return "파일 업로드 성공: " + file.getOriginalFilename();
    }
}

Multipart 요청과 응답 예제 (비동기방식)

jQuery를 사용하여 파일을 업로드하는 것은 웹 개발에서 자주 요구되는 기능 중 하나입니다. 파일 업로드를 위해 FormData 객체를 사용하여 비동기적으로 파일을 서버에 전송할 수 있습니다. 아래는 jQuery를 사용하여 파일 업로드 요청을 하는 예제 코드입니다.

HTML

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" id="fileInput" name="file" />
    <button type="submit">Upload</button>
</form>

JavaScript (jQuery)

$(document).ready(function() {
    $('#uploadForm').on('submit', function(e) {
        e.preventDefault(); // 기본 폼 제출을 방지

        var formData = new FormData();
        var fileInput = $('#fileInput')[0];
        formData.append('file', fileInput.files[0]);

        $.ajax({
            url: '/path/to/upload', // 서버 업로드 URL
            type: 'POST',
            data: formData,
            contentType: false, // 필수: FormData를 사용할 때는 false로 설정
            processData: false, // 필수: FormData를 사용할 때는 false로 설정
            success: function(response) {
                console.log('Upload successful!');
            },
            error: function(xhr, status, error) {
                console.error('Upload failed:', error);
            }
        });
    });
});

이 예제에서는 HTML 폼에 파일 입력(input) 필드가 있고, 사용자가 파일을 선택한 후 "Upload" 버튼을 클릭하면, 폼의 제출(submit) 이벤트가 발생합니다. jQuery를 사용하여 이 이벤트를 캐치하고, 기본 폼 제출 동작을 방지합니다(e.preventDefault()).

FormData 객체를 사용하여 선택된 파일을 포함하는 새로운 폼 데이터를 생성합니다. 이 객체는 AJAX 요청의 data 속성에 할당됩니다.

중요한 것은, AJAX 요청에서 contentType을 false로 설정하고 processData 또한 false로 설정해야 한다는 점입니다. 이렇게 설정해야 jQuery가 데이터를 올바른 형태로 서버에 전송할 수 있습니다. 그렇지 않으면, jQuery가 FormData 객체를 올바르게 처리하지 못하고 데이터를 잘못된 형식으로 서버에 전송할 수 있습니다.

서버 측에서는 멀티파트 파일 업로드를 처리하기 위한 적절한 로직을 구현해야 합니다. Spring 같은 백엔드 프레임워크를 사용한다면, @RequestParam("file") MultipartFile file 같은 방식으로 업로드된 파일을 받을 수 있습니다.

Application/JSON 요청과 응답 예제

jQuery AJAX 예제

<!DOCTYPE html>
<html>
<head>
    <title>JSON Request Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#submit").click(function(){
                $.ajax({
                    url: "http://localhost:8080/api/data",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({ name: "John Doe", email: "john.doe@example.com" }),
                    success: function(response){
                        alert("서버 응답: " + response.message);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="submit">Send JSON Data</button>
</body>
</html>

Spring Controller 예제 (ResponseData)

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class DataController {

    @PostMapping("/api/data")
    public ResponseData handleData(@RequestBody UserData userData) {
        // 여기에서 userData를 처리
        return new ResponseData("success", "Data processed successfully.");
    }

    static class UserData {
        private String name;
        private String email;
        // getters and setters
    }

    static class ResponseData {
        private String status;
        private String message;

        public ResponseData(String status, String message) {
            this.status = status;
            this.message = message;
        }
        // getters
    }
}

Spring Controller 예제 (ResponseBody)

일반적인 @Controller 어노테이션이 적용된 클래스에서 @ResponseBody를 사용하는 방법은, 특정 메서드가 HTTP 응답 본문에 직접 데이터를 작성해야 할 때 유용합니다. @Controller는 주로 뷰 템플릿을 반환하는 데 사용되지만, @ResponseBody 어노테이션을 메서드에 추가함으로써 HTTP 응답 본문에 데이터(예: JSON, XML)를 직접 반환할 수 있습니다.

다음은 @Controller 어노테이션을 사용한 컨트롤러에서 @ResponseBody를 사용하여 클라이언트에게 JSON 형태로 데이터를 반환하는 예제입니다:

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.HashMap;
import java.util.Map;

@Controller
public class MyController {

    @GetMapping("/api/data")
    @ResponseBody
    public Map<String, String> getExampleData() {
        Map<String, String> data = new HashMap<>();
        data.put("message", "Hello, World!");
        data.put("status", "success");
        return data;
    }
}

이 예제에서 @Controller 어노테이션은 클래스 레벨에 적용되어 있고, getExampleData 메서드에 @GetMapping과 @ResponseBody 어노테이션이 적용되어 있습니다. @ResponseBody 어노테이션은 이 메서드의 반환값을 HTTP 응답 본문으로 직접 쓰도록 지시합니다. 따라서, /api/example 엔드포인트로 GET 요청을 보낼 때, data 객체가 JSON 형식으로 클라이언트에 반환됩니다.

@ResponseBody 어노테이션이 적용된 메서드에서 반환되는 객체는 Spring의 HttpMessageConverter에 의해 자동으로 적절한 포맷(이 경우 JSON)으로 변환됩니다. 이 과정은 클래스패스에 적절한 변환 라이브러리(예: Jackson)가 있을 때 자동으로 수행됩니다.

이 방식을 사용하면, 전통적인 웹 애플리케이션 개발과 RESTful API 개발을 하나의 컨트롤러 내에서 조화롭게 처리할 수 있습니다.

 

 

[Spring] @RequestMapping 이란? 다양한 방식의 매개변수

@RequestMapping은 Spring Framework에서 사용되는 주요 어노테이션 중 하나로, 요청(Request)을 특정 메서드나 클래스에 매핑(mapping)하는 역할을 합니다. 즉, 클라이언트의 요청 URL을 어떤 메서드가 처리할

class.soyiyou.com

 

반응형

'웹 개발(Web Development) > Spring' 카테고리의 다른 글

[Spring] Model과 JSP 내장 객체 EL 사용법  (0) 2024.03.14
[Spring] @RequestMapping 이란? 다양한 방식의 매개변수  (0) 2024.03.14
STS(Spring Tool Suite) 자동 주석 템플릿 설정 방법  (0) 2024.03.04
Spring MVC(Spring Legacy Project)  (0) 2024.03.03
Spring Framework vs Spring Boot  (0) 2024.03.03

관련글

티스토리툴바