JS

[JS, HTML] form 전송과 , RESTful 방식의 차이

easy-6 2025. 3. 23. 23:39

REST 형식에 대해 공부하다 무슨 차이가 있는지 궁금하여 찾아보다 정리하기 위해 글을 작성하게 되었다. 

 

1. 기본 form 전송 

// HTML 화면 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>전통적인 회원가입</title>
</head>
<body>
  <!-- 폼 제출 시 서버에 POST 요청을 보내고 새 페이지로 이동 -->
  <form action="/user/registration" method="post">
    <table>
      <tr>
        <th rowspan="2"> 아이디 : </th>
        <td><input type="text" id="id" name="id"></td>
        <!-- 
            아이디 중복 검사는 별도의 페이지나 서버 사이드 로직으로 처리 
            이때 서버 사이드 로직 > SSR (응답을 생성하는 로직)
            즉, 서버의 service같은 비즈니스 로직 처리 클래스에서 구현한 로직 
         -->
        <td><button type="button" onclick="alert('SSR로 처리해야함')">중복 검사</button></td>
      </tr>
      <tr>
        <th><span id="IdMsg"></span></th>
      </tr>
      <tr>
        <th rowspan="2">비밀번호 : </th>
        <td><input type="password" id="password" name="password"></td>
      </tr>
      <tr>
        <th><span id="pwMsg"></span></th>
      </tr>
      <tr>
        <th>이름 : </th>
        <td><input type="text" id="user_name" name="user_name"></td>
      </tr>
      <tr>
        <th>주소 : </th>
        <td><input type="text" id="user_address" name="user_address"></td>
      </tr>
      <tr>
        <th>닉네임 : </th>
        <td><input type="text" id="user_nick" name="user_nick"></td>
      </tr>
      <tr>
        <th>나이 : </th>
        <td><input type="text" id="user_age" name="user_age"></td>
      </tr>
    </table>
    <div>
      <button type="submit">회원 가입</button>
    </div>
  </form>
</body>
</html>


// Controller 
@PostMapping("/user/registration")
public String registerUser(@RequestParam("id") String id, 
                           @RequestParam("password") String password) { // 요청 데이터를 @RequestParam으로 바인딩
                           
    // 유저 정보 저장 후 회원가입 완료 페이지로 이동
    userService.register(id, password);
    return "redirect:/user/welcome"; // 회원가입 완료 후 새로운 페이지 반환
}

위의 코드는 폼을 통해 전송하는 방식이다. 

=> 폼을 제출하면, 새로고침 후 서버가  HTML을 렌더링하여 응답함 

 

☞ controller의 @RequestParam을 사용하는 이유

스프링에서는 각 파라미터를 개별적으로 바인딩하기 위해 @RequestParam을 사용하기 때문 

 

◆  @RequestParam : HTML 폼 제출과 같이 개별 파라미터(key-value)를 추출할 때 사용

 

✅ 특징:  form 제출 시에 페이지 이동이 발생하고 , 서버에서 HTML 만들어서 클라이언트에게 응답한다.  

 

2. RESTful 방식 (AJAX 사용) 

// JSP 화면 
<form onsubmit="return JoinCheck();">
  <input type="text" id="id">
  <input type="password" id="password">
  <button type="submit">회원가입</button>
</form>

<script>
function JoinCheck(){
	var userData = {
    	id : $("#id").val(),
        password : $("#password").val()
    };
    
    $.ajax({
    	url : "/api/users",
	    type : "POST",
	    contentType : "application/JSON"
	    data : JSON.stringify(userData),
	    success : function(response){
	    	alert("회원가입에 성공했습니다.");
    	},
    	error: function(){
    		alert("회원가입에 실패했습니다.");
    	}
    });
    
    return false; // 기본 form 제출을 방지하기 위해 return false 선언
}
</script>


//Controller

@RestController
@RequestMapping("/api/users")
public class UserController{
	
    @postMapping  // postMapping 선언 
    public ResponseEntity<String> registerUser(@RequestBody UserVO uservo){ 
    	// ResponseEntity를 통해서 응답 데이터를 JSON으로 전환 
    	userService.register(user);
        
          if(userService.register(user)) {
        		return ResponseEntity.ok("회원가입 성공");
    		} else {
        		return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("회원가입 실패");
    		}
    }

/*
-- @RequestBody : HTTP 요청 본문(요청 body)에 포함된 JSON, XML 등의 데이터를 자동으로 지정한 자바
객체로 변환함

-- (@RequestBody UserVO uservo) >> JSON 데이터가 UserVO 객체로 자동 변환 되어 컨트롤러의 매개변수로 전달됨
설명 : contentType : "application/JSON"을 통한 JSON 요청 데이터를 자바 객체 UserVO에 매핑하여 
보냄 

-- ResponseEntity : HTTP 응답(response)를 구성하는데 사용 
이때 , 응답 본문, 상태 코드, 헤더 등을 함께 설정할 수 있어서, 클라이언트에게 
보다 상세한 응답 정보를 전달 할 수 있다. 

예시 Response.oK("회원가입 성공"); // 상태 200 
ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("회원가입 실패"); // 상태 500

*/



}

 

위의 코드는 폼이 아닌 JavaScript를 활용해서 JSON 데이터를 생성 후 AJAX 요청으로 보낸다.

=> JavaScript에서 JSON 데이터를 만들어 AJAX 요청을 보냄 (페이지 이동 없음).

 

☞ controller의 @RequestBody 을 사용하는 이유

=> @RequestBody : JSON 등 전체 요청 바디를 객체로 매핑할 때 사용 

(@RequestBody UserVO uservo)

위의 코드를 통해서 알 수 있듯이 @RequestBody를 통해서 UserVO 객체에 매핑하는 것을 볼 수있다.

 

✅ 특징:  클라이언트가 JSON 데이터를 contentType : "application/JSON"로 전송

비동기화로 인해 페이지 이동 없이 서버의 응답을 받아낼 수 있음 

서버는 HTML이 아닌 JSON 데이터를 응답 데이터로 반환한다. 

 

요약 

🔹 일반적인 방식(form을 사용한 방식)  vs. REST 방식 비교

form을 사용한 방식(서버 렌더링)                                                        RESTful 방식 (클라이언트 중심)

 

데이터
전송 방식		 form 태그를 사용해 application/x-www-form-urlencoded 형태로 전송 JavaScript로 JSON 데이터를 만들어 application/json 형태로 전송
서버 처리 방식 서버에서 request.getParameter() 등으로 데이터를 받아 처리 후 페이지 이동 (JSP, Thymeleaf 등 사용) 서버는 JSON 요청을 받고 JSON 응답을 반환 (Spring REST API, Node.js API 등)
페이지
이동 여부		 submit 후 서버에서 페이지를 렌더링하여 새로운 HTML 응답을 반환 클라이언트에서 AJAX 요청을 보내고, 필요한 데이터만 받아와 화면을 업데이트 (페이지 이동 없음)
유효성
검사		 기본적으로 서버에서 request.getParameter()를 이용해 검증 클라이언트에서 JavaScript로 1차 검사 후, REST API 호출하여 추가 검증
장점 구현이 간단하고 브라우저 기본 기능 활용 가능 비동기 처리로 빠른 응답, 유연한 데이터 처리 가능 (SPA 개발 용이)

 

 

💡 결론: 언제 RESTful 방식을 써야 하나요?

✔️ RESTful 방식이 유리한 경우:  CSR방식

  • 싱글 페이지 애플리케이션 (SPA) 개발 (Vue.js, React, Angular 등과 함께 사용)
  • AJAX를 활용한 비동기 요청이 필요한 경우 (중복 체크, 실시간 데이터 로딩 등)
  • 모바일 앱과 연동 (iOS, Android 등에서 JSON을 주고받기 편리)

 

❌ 전통적인 방식(form을 사용한 방식)이 나을 수 있는 경우: SSR 방식

  • 간단한 폼 제출 (ex: 로그인, 문의하기 등)
  • 서버에서 페이지를 렌더링해야 하는 경우 (ex: Thymeleaf, JSP 기반 프로젝트)

즉, RESTful 방식은 서버에서 HTML을 렌더링하지 않고 클라이언트가 데이터를 처리하도록 하는 방식

 

** 서버 렌더링이란?

서버 렌더링(Server-Side Rendering, SSR)은 클라이언트가 요청을 보낼 때, 서버가 HTML 페이지 전체를 생성하여 클라이언트에게 전달하는 방식을 의미함.

 

☞ 폼 전송 방식이 서버 렌더링인 이유  

  • HTML 생성:
    사용자가 폼을 제출하면, 서버는 요청 파라미터를 받아 템플릿 엔진(JSP)을 이용해 HTML 페이지를 생성.
  • 페이지 전체 전송:
    서버에서 완성된 HTML을 브라우저로 반환하고, 브라우저는 그 HTML을 해석하여 페이지를 렌더링하여,  클라이언트에서는 별도의 데이터 처리 없이 이미 생성된 HTML을 보여주게 됨.
  • 페이지 새로고침:
    폼 제출 시 전체 페이지가 새로 로드되며, 서버에서 렌더링한 결과물이 새 페이지로 표시됨.

이와 달리, RESTful 방식에서는 클라이언트가 JavaScript를 통해 JSON 데이터를 주고받으며, 페이지 일부만 동적으로 업데이트하는 클라이언트 렌더링(Client-Side Rendering)이 주로 사용.

따라서, 폼을 통한 방식은 요청을 보낼 때 서버가 HTML을 직접 생성해 응답하기 때문에 서버 렌더링(Server-Side-Rendering)이라고 함 .

 

 

 

 

 

☞  ResponseEntity

https://easy-6.tistory.com/16

 

[Spring] ResponseEntity

ResponseEntity는 Spring Framework에서 클라이언트에게 HTTP 응답을 구성하여 반환할 때 사용하는 객체입니다. 일반적으로 응답 데이터, HTTP 상태 코드, 그리고 헤더 정보를 함께 전달할 수 있습니다. * 

easy-6.tistory.com

 

 

☞  @RestController, @RequestBody, @ResponseBody 내용 
https://easy-6.tistory.com/17

 

[Spring] @RestController , @RequestBody, @ResponseBody

@RequestBody의 의미@RequestBody는 클라이언트에서 요청 본문(Body)에 포함된 JSON 또는 XML 데이터를 서버 측 객체로 변환하는 데 사용됩니다.요약하자면, 클라이언트가 서버에게 요청할 때 보내는 데이

easy-6.tistory.com

 

'JS' 카테고리의 다른 글

[JS] JSX, 엘리먼트  (0) 2025.03.15
[자바스크립트] 백틱 및 포트폴리오 내용  (0) 2025.02.17

'JS'의 다른글

  • 현재글[JS, HTML] form 전송과 , RESTful 방식의 차이

관련글

티스토리툴바