[Spring] 08. 스프링 부트와 스프링 MVC를 이용한 웹 앱 구현

1. 동적 뷰를 사용한 웹 앱 구현

MVC 흐름도에서 컨트롤러는 단순히 뷰의 이름만 반환하는 것이 아니라, 뷰에서 보여줄 데이터도 함께 전송합니다.

템플릿 엔진 (Template Engine)

컨트롤러에서 뷰로 데이터를 쉽게 전송하고, 전송받은 데이터를 특정 방식으로 화면에 표시할 수 있게 해주는 의존성입니다.

• 예시: 타임리프(Thymeleaf), 자바 서버 페이지(JSP) 등

Model 인터페이스 활용

Model 타입의 매개변수는 컨트롤러가 뷰에 전송할 데이터를 저장하는 역할을 합니다.

• 데이터 추가: addAttribute() 메서드를 호출하여 뷰에 전달할 값을 저장합니다.
• 매개변수 구성: 첫 번째 매개변수는 데이터를 식별할 key, 두 번째 매개변수는 실제 전달할 값입니다.

---

2. 컨트롤러 구현 예시

package com.example.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MainController {

  @RequestMapping("/home")
  public String home(Model page) {
    // "username"이라는 키로 "Katy"라는 값을 뷰에 전달
    page.addAttribute("username", "Katy");
    // "color"라는 키로 "red"라는 값을 뷰에 전달
    page.addAttribute("color", "red");
    
    return "home.html";
  }
}

3. 동적 뷰 구현 (Thymeleaf)

동적 뷰 파일은 기본적으로 resources/templates 폴더에 위치해야 스프링이 인식할 수 있습니다.

타임리프(Thymeleaf) 기본 문법

• 접두사 th 사용: HTML 태그 안에서 th:로 시작하는 속성을 사용하여 타임리프가 제공하는 동적 기능을 호출합니다.
• ${attribute_key}: 컨트롤러의 Model 인스턴스에 담겨 넘어온 데이터를 참조할 때 사용하는 표현식입니다.

HTML 예시 (home.html)

<!DOCTYPE html>
<html lang="en" xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
    <head>
        <meta charset="UTF-8">
        <title>Home Page</title>
    </head>
    <body>
        <h1>Welcome <span th:style="'color:' + ${color}"
                          th:text="${username}"></span>!</h1>
    </body>
</html>

4. HTTP 요청에서 데이터 얻기

스프링 MVC에서는 클라이언트가 보낸 데이터를 다양한 방식으로 추출할 수 있습니다. 대표적인 방식은 다음과 같습니다.

• HTTP 요청 매개변수 (Query Parameter)
• 경로 변수 (Path Variable)
• HTTP 요청 헤더 (Headers)
• HTTP 요청 본문 (Body)

---

1) HTTP 요청 매개변수 (쿼리 표현식)

데이터 전송량이 많지 않거나, 특정 값이 필수가 아닌(Optional) 경우 주로 사용합니다.

• 형식: /home?color=red&name=kim (키-값 쌍으로 전달)
• 방법: @RequestParam 애너테이션을 사용합니다.
• 특징: 기본적으로 필수(Required) 값입니다. 비필수 값으로 설정하려면 required = false 속성을 사용합니다.

[Controller 예시]

package com.example.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class MainController {

  @RequestMapping("/home")
  public String home(
      @RequestParam(required = false) String name,
      @RequestParam(required = false) String color,
      Model page) {
    page.addAttribute("username", name);
    page.addAttribute("color", color);
    return "home.html";
  }
}

2) 경로 변수 (Path Variable)

일반적으로 복수 값을 사용하지 않으며, 해당 값이 데이터 식별에 필수적일 때 사용합니다.

• 형식: /home/blue 형식으로 경로 자체에 데이터를 포함합니다.
• 방법: @RequestMapping의 경로를 정의할 때 중괄호 {} 사이에 변수 이름을 지정합니다.
• 추출: 매개변수에 @PathVariable 애너테이션을 사용하여 지정한 경로 변수 값을 가져옵니다.

[Controller 예시]

package com.example.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MainController {

  @RequestMapping("/home/{color}")
  public String home(
      @PathVariable String color,
      Model page) {
    page.addAttribute("username", "Katy");
    page.addAttribute("color", color);
    return "home.html";
  }
}

5. HTTP GET과 POST 메서드 사용

웹 애플리케이션에서는 수행하려는 작업의 목적에 따라 적절한 HTTP 메서드를 선택해야 합니다.

HTTP 메서드 요약

메서드	설명
GET	클라이언트가 서버의 데이터를 조회할 때 사용
POST	서버에 새로운 데이터를 추가/전송할 때 사용
PUT	서버에 있는 데이터 레코드를 전체 변경할 때 사용
PATCH	서버에 있는 데이터 레코드를 부분적 변경할 때 사용
DELETE	서버에 있는 데이터를 삭제할 때 사용

---