웹 개발 방식

📌 스프링에서 웹 개발 기초는 크게 세 가지 방식으로 나뉩니다: 정적 콘텐츠 제공 방식, MVC와 템플릿 엔진 방식, 그리고 API 방식입니다. 각 방식이 웹 애플리케이션에서 데이터를 제공하는 데 사용되는 방법이 다릅니다.

 

 

정적 콘텐츠 제공 방식

📌 정적 콘텐츠는 서버에서 변하지 않는 고정된 데이터를 제공하는 방식입니다.

  • HTML, CSS, JavaScript 파일 등과 같은 리소스를 정적 파일로서 서버가 직접 제공하므로, 사용자 요청 시 서버에서 바로 해당 파일을 전달해 줍니다.
  • 이런 방식은 스프링에서는 주로 /static, /public 폴더에 파일을 넣어 제공할 수 있습니다. 정적 콘텐츠는 빠르게 응답할 수 있지만
  • 동적인 데이터 제공이나 로직 처리가 불가능하다는 한계가 있습니다. 주로 단순한 웹사이트나 빠르게 로드해야 하는 리소스에 사용됩니다.
  • 데이터를 추가적인 가공 없이 서버가 클라이언트에게 생 데이터를 제공하는 방식
  • 단순히 HTML 파일을  src/main/resources/static 폴더에 생성하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Static Content</title>
</head>
<body>
    <h1>Hello, this is static content!</h1>
</body>
</html>

 

 

MVC와 템플릿 엔진 방식

📌 MVC(Model-View-Controller) 패턴은 스프링 웹 개발에서 가장 흔히 사용하는 방식입니다. 사용자 요청을 Controller가 받고, Model을 통해 데이터를 처리하여 View로 전달하는 구조입니다.

= 서버에서 클라이언트 요청을 처리한 뒤 **HTML 뷰(View)**를 생성하여 반환합니다.

 

클라이언트가 요청을 보냄 → 서버에서 컨트롤러(Controller)가 처리 → 템플릿 엔진을 통해 동적으로 HTML View 생성 → 브라우저에 반환.

  • View는 서버에서 HTML 템플릿 엔진(e.g., Thymeleaf, JSP)을 사용해 데이터를 화면에 렌더링한 후 사용자에게 보냅니다.
  • 템플릿 엔진을 사용하면 서버에서 동적으로 생성된 HTML 페이지를 제공할 수 있어 데이터가 자주 바뀌는 웹 애플리케이션에 적합합니다.
  • 스프링 MVC는 서버에서 데이터와 화면을 함께 처리하므로, 작은 웹 애플리케이션에서 빠르게 결과를 얻기 좋습니다.

📌 템플릿 엔진(template engine) 은 View 부분에서 화면을 구성할 때 사용하는 도구입니다. 서버에서 HTML 페이지를 동적으로 생성할 수 있도록 해주는 역할을 합니다. 예를 들어, Thymeleaf, JSP, Freemarker 같은 템플릿 엔진을 사용하면 서버에서 Model 데이터를 받아 HTML을 생성해 사용자에게 반환할 수 있습니다.

 

< Controller 예제: src/main/java/com/example/demo/controller/MvcController.java >

import org.springframework.stereotype.Controller;  // Spring MVC에서 Controller로 사용할 클래스를 선언
import org.springframework.ui.Model;  // 뷰에 데이터를 전달하는 데 사용되는 Model 클래스를 임포트
import org.springframework.web.bind.annotation.GetMapping;  // HTTP GET 요청을 처리하기 위한 어노테이션

@Controller  // 이 클래스는 Spring MVC의 Controller로 사용됨을 나타냄
public class MvcController {

    @GetMapping("/mvc")  // "/mvc" URL로 들어오는 GET 요청을 처리하는 메서드
    public String helloMvc(Model model) {  // 클라이언트로부터 요청이 오면 호출되는 메서드
        model.addAttribute("name", "Spring MVC!");  // "name"이라는 변수에 "Spring MVC!"라는 값을 설정, 이 데이터는 뷰에서 사용됨
        return "hello";  // "hello.html" 템플릿 파일을 반환, 이 템플릿을 뷰로 사용하여 클라이언트에게 응답
    }
}

 

< 템플릿 파일 예제: src/main/resources/templates/hello.html  >

<!DOCTYPE html>  <!-- HTML5 문서 형식을 선언 -->
<html xmlns:th="http://www.thymeleaf.org">  <!-- Thymeleaf 템플릿 엔진을 사용하기 위한 XML 네임스페이스 선언 -->
<head>
    <title>MVC Example</title>  <!-- 페이지의 제목을 설정 -->
</head>
<body>
    <!-- th:text는 Thymeleaf에서 데이터를 동적으로 출력하는 속성 -->
    <h1 th:text="'Hello, ' + ${name}">Hello</h1>  <!-- "name" 변수를 받아서 "Hello, Spring MVC!"를 출력 -->
</body>
</html>

 

  • 장점:
    • 서버에서 완성된 HTML을 반환하므로 클라이언트는 단순히 HTML을 받아 띄우기만 한다.
    • 클라이언트 로직이 단순해져 유지보수가 쉬운 경우가 많다.
  • 단점:
    • 서버가 화면 렌더링까지 담당하므로 서버에 부하가 커질 수 있다.
    • 클라이언트와 서버가 강하게 결합되어 있어, 클라이언트와 서버의 독립성이 낮다.
    • 동일한 UI를 사용하는 모바일 앱이나 다른 플랫폼에 대응하기 어렵다.

 

API 방식

📌 API 방식은 서버가 JSON과 같은 형식의 데이터'만'을 클라이언트에 제공하고, 클라이언트가 이를 받아 렌더링하는 방식입니다. 이 경우 서버는 데이터만을 전송하며, 프론트엔드가 해당 데이터를 활용해 화면을 구성합니다.

  • 보통 RESTful API나 GraphQL을 사용하여 데이터를 주고받습니다.
  • 이 방식은 프론트엔드와 백엔드의 역할을 분리해 줄 수 있어 모바일 앱, 싱글 페이지 애플리케이션(SPA), 프론트엔드 프레임워크(React, Vue 등)를 활용한 웹 애플리케이션에서 유리합니다.
  • 서버에서는 화면 렌더링을 하지 않고 데이터를 제공하는 역할만 하므로 확장성과 유지보수 측면에서 효과적입니다.
  • 우리가 보는 화면은 F12를 눌러 개발자 환경에 들어가면 코드를 확인할 수 있다. 정적 콘텐츠, MVC 방식은 서버가 클라이언트에게 제공한 HTML 코드가 확인이 되지만, API는 데이터만 제공한다.
  • 그러니까 코드를 전달하는게 아니라 코드를 실행한 결과를 JSON이라는 파일 형태로 클라이언트에게 보낸다.

 

 

  • 장점:
    • 서버와 클라이언트가 독립적으로 개발 및 유지보수 가능.
    • 동일한 API를 다양한 클라이언트(웹, 모바일, 데스크톱 애플리케이션 등)에서 재사용 가능.
    • 클라이언트 측에서 동적인 UI를 구현하기 용이.
  • 단점:
    • 클라이언트가 데이터 처리 및 화면 렌더링을 모두 담당해야 하므로 클라이언트 로직이 복잡해질 수 있습니다.
    • 클라이언트에서 데이터를 표시하려면 추가적인 프론트엔드 개발이 필요합니다.

 

 

 

 

< 페이지 소스 확인 >

MVC API
<html xmlns:th="http://ww.tymeleaf.org">
<body>
<p th:text="'hello ' + ${name}">hello</p>
</body>
</html>		 hello spring!!!!!!!

 

  • MVC로 서버에서 정보를 처리한 경우 위 처럼 페이지 소스를 확인하면 코드를 확인할 수 있는데, API는 코드의 실행 결과만 클라이언트에게 전달한다.
더보기

MVC 방식에서는 서버가 템플릿 엔진을 사용해 HTML 파일을 렌더링하고, 이 렌더링된 HTML이 클라이언트로 전달되므로, 페이지 소스를 확인하면 서버에서 처리된 코드가 HTML에 반영된 상태로 볼 수 있습니다. 예를 들어, ${name} 부분이 실제 값으로 변환되어 <p>hello spring!!!!!!!</p>와 같이 표시됩니다.

 

반면, API 방식에서는 서버가 HTML 페이지를 생성하지 않고 데이터만을 JSON 같은 형식으로 전달합니다. 따라서 클라이언트는 데이터를 받아 자체적으로 화면을 구성하며, API 방식은 순수하게 데이터만 전송되기 때문에 HTML이나 템플릿 코드 자체는 전달되지 않습니다. 이 차이가 MVC와 API 방식의 큰 차이점 중 하나입니다.

 

import org.springframework.web.bind.annotation.GetMapping;  // HTTP GET 요청을 처리하기 위한 어노테이션을 임포트
import org.springframework.web.bind.annotation.RestController;  // REST API의 컨트롤러로 사용할 어노테이션을 임포트

@RestController  // 이 클래스는 REST API에서 데이터를 반환하는 컨트롤러임을 나타내는 어노테이션
public class ApiController {

    @GetMapping("/api/hello")  // "/api/hello" 경로로 GET 요청을 처리하는 메서드
    public HelloResponse helloApi() {  // helloApi 메서드는 클라이언트에게 HelloResponse 객체를 반환
        return new HelloResponse("Hello, API!");  // HelloResponse 객체를 생성하고, "Hello, API!"라는 메시지를 반환
    }

    // HelloResponse 클래스는 API 응답의 구조를 정의하는 클래스
    static class HelloResponse {
        private String message;  // 응답으로 전달할 메시지를 저장하는 변수

        public HelloResponse(String message) {  // 생성자: 메시지를 초기화
            this.message = message;
        }

        public String getMessage() {  // 메시지를 반환하는 getter 메서드
            return message;
        }

        public void setMessage(String message) {  // 메시지를 설정하는 setter 메서드
            this.message = message;
        }
    }
}

 

 

저작자표시 비영리 동일조건

'Back-End (Web) > Spring' 카테고리의 다른 글

[Spring] Spring MVC 패턴  (1) 2024.12.14
[Spring] Spring Boot  (0) 2024.12.10
[Spring] Spring Framework  (2) 2024.12.09
[Spring] 웹 개발의 흐름  (1) 2024.12.05
[Spring] Spring 웹 애플리케이션 계층 구조  (2) 2024.11.13

+ Recent posts

티스토리툴바