MVC 패턴과 RESTul API 의 차이점? 두 방법에 대해 알아보자! with SpringBoot

내가 헷갈렸던 두 가지 개념!

정확하게 공부하고 정리하기 위한 글이다 :)

 

 

나는 1) SpringBoot 프로젝트로 프론트엔드, 백엔드를 모두 구현해본 적이 있고,

2) 프론트엔드는 React로, 백엔드는 SpringBoot로 구현한 적이 있다. 

 

여기서 각각 MVC pattern과 RESTful API 방식을 사용했다.

 

 

두 방식에 대해 자세히 알아보자!

 

 

MVC 패턴 (Model-View-Controller)

 

 

MVC는 애플리케이션을 구조화하는 방식이다.

• Model: 데이터와 비즈니스 로직을 담당
  => SpringBoot의 서비스, Entity, Repository 파일들. DTO도 Model의 일부.
• View: 사용자에게 보여지는 인터페이스
  => resources/templates 안의 HTML 파일들. Thymeleaf 등의 템플릿엔진을 사용한 파일들.
• Controller: 사용자 입력을 처리하고 Model과 View를 연결
  => @Controller 혹은 @RestController 어노테이션이 붙은 클래스들

• 스프링부트로 프론트엔드와 백엔드를 함께 구현할 경우, 주로 MVC(Model-View-Controller) 패턴을 사용한다.
• 이 경우 컨트롤러가 직접 뷰(HTML 템플릿)를 반환하므로, 클라이언트-서버 간 RESTful API 통신이 명시적으로 드러나지 않는다.

=> 즉, MVC는 주로 서버 측에서 HTML을 생성하여 클라이언트에 전송한다. 사용자가 링크를 클릭하거나 폼을 제출할 때마다 새로운 페이지가 로드된다.

 

---

 

RESTful API

 

RESTful API는 클라이언트와 서버 간의 통신 방식이다.

• 서버는 데이터만 제공 (주로 JSON 형식)
• 클라이언트는 이 데이터를 받아 화면을 구성
• 주로 단일 페이지 애플리케이션(SPA)에서 사용
  (참고로 단일 페이지 애플리케이션은 주로 React, Vue, Angular 와 같은 프론트엔드 프레임워크를 통해 구현됨)

RESTful API를 사용하면 페이지 전체를 다시 로드하지 않고도 데이터를 갱신할 수 있다!

 

 

 

프론트엔드와 백엔드를 분리할 때 일반적으로 RESTful API를 사용한다.

RESTful API에 대해 좀 더 자세하게 알아보자.

프론트엔드와 백엔드 분리

프론트엔드와 백엔드를 분리하는 아키텍처에서는 두 부분이 독립적으로 개발되고 운영된다.

이때 두 부분 간의 통신 방식으로 RESTful API가 널리 사용된다!

RESTful API의 역할

RESTful API는 프론트엔드와 백엔드 사이의 통신을 위한 인터페이스 역할을 한다.

그리고 이를 통해 아래의 3가지 이점을 얻을 수 있다!

1. 표준화된 통신: HTTP 프로토콜을 기반으로 하여 웹의 기존 인프라를 활용한다.
2. 플랫폼 독립성: 다양한 클라이언트(웹, 모바일 앱 등)에서 동일한 백엔드 API를 사용할 수 있다.
3. 확장성: 프론트엔드와 백엔드가 독립적으로 확장될 수 있다.

RESTful API 구현 방식

1. 리소스 중심: 모든 데이터나 기능을 리소스로 표현한다.
2. HTTP 메서드 활용: GET, POST, PUT, DELETE 등의 HTTP 메서드를 사용하여 리소스에 대한 작업을 정의한다.
3. URI를 통한 리소스 식별: 각 리소스는 고유한 URI를 통해 식별된다.
4. 상태 없음(Stateless): 각 요청은 독립적으로 처리되며, 서버는 클라이언트의 상태를 저장하지 않는다.

프론트엔드와 백엔드의 통신 예시

1. 프론트엔드(React, Vue 등)에서 HTTP 요청을 보내면,
2. 백엔드(Spring Boot 등)에서 해당 요청을 처리하고 응답을 반환!
3. 프론트엔드는 받은 데이터를 화면에 표시하게 됨.

RESTful API를 사용하면 프론트엔드와 백엔드 간의 명확한 인터페이스가 정의되어,
개발과 유지보수가 용이해지며, 다양한 클라이언트에서 동일한 백엔드 서비스를 활용할 수 있게 된다!

 

 

---

참고로, @Controller 와 @RestController 의 차이점?!아래의 접은글을 확인해주세요!

@Controller

1. 용도: 전통적인 Spring MVC 컨트롤러에 사용됨.
2. 반환 값: 주로 뷰 이름을 반환. 이는 ViewResolver를 통해 실제 뷰(HTML 페이지 등)로 변환됨.
3. 데이터 반환: 데이터를 반환하려면 @ResponseBody 어노테이션을 추가로 사용해야 한다!
4. 사용 예:

@Controller
public class UserController {
    @GetMapping("/user")
    public String getUser(Model model) {
        model.addAttribute("user", new User());
        return "user-view";  // 뷰 이름 반환
    }
}

 

@RestController

1. 용도: RESTful 웹 서비스를 위한 컨트롤러에 사용.
2. 반환 값: 객체나 데이터를 직접 반환. 이는 자동으로 JSON이나 XML 형식으로 변환됨.
3. 데이터 반환: @ResponseBody가 포함되어 있어 별도로 추가할 필요가 없다!
   @RestController = @Controller + @ResponseBody 라고 생각하면 됨.
4. 사용 예:

@RestController
public class UserRestController {
    @GetMapping("/api/user")
    public User getUser() {
        return new User();  // 객체 직접 반환
    }
}

 

주요 차이점

1. 반환 형식: @Controller는 뷰를, @RestController는 데이터를 반환한다.
2. @ResponseBody: @RestController는 이미 포함하고 있어 별도 지정이 필요 없다!
3. 사용 목적: @Controller는 주로 웹 페이지를 반환할 때, @RestController는 API 엔드포인트를 만들 때 사용된다.

 

 

마지막으로 MVC와 RESTful API의 차이점에 대해 표로 정리하고 끝내겠습니다!

	MVC	RESTful API
데이터 전송	서버가 완성된 HTML 페이지를 전송	서버가 데이터만 전송 (주로 JSON)
페이지 로드	사용자 동작마다 새 페이지 로드	페이지 전체 로드 없이 데이터만 갱신 가능
서버의 역할	서버가 데이터 처리와 화면 생성을 모두 담당	서버는 데이터 처리만 담당, 화면 생성은 클라이언트가 담당
클라이언트-서버 결합도	클라이언트와 서버가 밀접하게 결합	클라이언트와 서버가 느슨하게 결합, 독립적 개발 가능

 

MVC는 전통적인 웹 애플리케이션에서 많이 사용되며,

RESTful API는 현대적인 웹 애플리케이션, 특히 모바일 앱과의 통신에서 널리 사용된다고 한다!

 

 

정리 끝!