[스프링 MVC 1편] - 웹 페이지 만들기(2)

Chooooo·2023년 1월 8일

MVC spring mvc 웹페이지

스프링 MVC 1편

목록 보기

9/11

이 글은 강의 : 김영한님의 - "[스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술]"을 듣고 정리한 내용입니다. 😁😁

상품 목록 - 타임리프

본격적으로 컨트롤러와 뷰 템플릿을 개발해보자.

우선 상품목록을 노출하는 상품목록 페이지를 컨트롤러와 뷰 템플릿을 구현할 것.

상품관리 컨트롤러 - BasicItemController

package hello.itemservice.web.basic;

import hello.itemservice.domain.item.Item;
import hello.itemservice.domain.item.ItemRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.PostConstruct;
import java.util.List;

@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor
public class BasicItemController {

    private final ItemRepository itemRepository;

    @GetMapping
    public String items(Model model) {
        List<Item> items = itemRepository.findAll();
        model.addAttribute("items", items);

        return "/basic/items";
    }

    @PostConstruct
    public void init() {
        itemRepository.save(new Item("itemA", 10000, 10));
        itemRepository.save(new Item("itemB", 20000, 20));
    }
}

컨트롤러 로직은 itemRepository에서 모든 상품을 조회한 다음에 모델에 담는다. 그리고 뷰 템플릿을 호출한다.

🎃 @PostConstructor
(테스터용 데이터 추가) → 테스터용 데이터가 없으면 회원 목록이 정상적으로 작동하는지 알 수 없다.
⇒ 컨트롤러만 구현하고 테스트를 하면 노출할 상품이 없기 때문에 프로젝트 로드시 해당 빈의 의존관계가 모두 주입된 후 초기화 용도로 호출된다. 첨부된 메소드 init()을 수행해 2개의 아이템을 미리 추가한다. (여기서는 간단히 테스트용 데이터를 넣기 위해서 사용했다)

🎃 @RequiredArgsConstructor
⇒ 롬복(Lombok)에서 제공하는 애노테이션으로 final이 붙은 멤버 변수만 사용해 생성자를 자동으로 만들어준다. 그럼 생성자를 통해 해당 멤버변수를 자동 주입해준다. (아래와 같이 만들어줌)

헷갈리는 것들은 스프링 핵심원리 기본편을 다시 복습하자 !

public BasicItemController(ItemRepository itemRepository) {
 this.itemRepository = itemRepository;
}

이렇게 생성자가 딱 1개만 있는 경우에는 스프링이 자동으로 @Autowired로 의존관계를 주입해준다.
따라서 final 키워드를 빼면 안된다 ! 그러면 ItemRepository 의존관계 주입이 안된다.

뷰 템플릿 - items.html

기존에 작성한 items.html을 뷰 템플릿 영역으로 복사 후 수정해서 타임리프 내츄절 뷰 템플릿으로 만들어준다.
/resources/static/items.html → 복사 → /resources/templates/basic/items.html

경로 : /resources/templates/basic/items.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}"
          href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="max-width: 600px">
    <div class="py-5 text-center">
        <h2>상품 목록</h2>
    </div>
    <div class="row">
        <div class="col">
            <button class="btn btn-primary float-end"
                    onclick="location.href='addForm.html'"
                    th:onclick="|location.href='@{/basic/items/add}'|"
                    type="button">
                상품 등록
            </button>
        </div>
    </div>
    <hr class="my-4">
    <div>
        <table class="table">
            <thead>
            <tr>
                <th>ID</th>
                <th>상품명</th>
                <th>가격</th>
                <th>수량</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="item : ${items}">
                <td><a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원 ID</a></td>
                <td><a href="item.html" th:href="@{|/basic/items/${item.id}|}"
                       th:text="${item.itemName}">상품명</a></td>
                <td th:text="${item.price}">상품 가격</td>
                <td th:text="${item.quantity}">수량</td>
            </tr>
            </tbody>
        </table>
    </div>
</div> <!-- /container -->
</body>
</html>

타임리프 사용법 간단히 알아보기

타임리프 사용 선언

타임리프를 HTML 페이지에서 사용하기 위해선 다음과 같이 HTML 태그에 작성해줘야 한다.
<html xmlns:th="http://www.thymeleaf.org">

속성 변경 - th:href

th:href="@{/css/bootstrap.min.css}"

🎃 기존 href="value1"를 th:href="value2"로 변경해준다.

🎃 타임리프 뷰 템플릿을 거치면 원래 값을 th:xxx 으로 변경한다. 만약 값이 없다면 새로 생성.

🎃 HTML을 그대로 볼 때는 href 속성이 그대로 사용되고 뷰 템플릿을 거치면 th:href의 값이 href로 대치된다.

대부분의 HTML 속성을 th:xxx 로 변경할 수 있다.

타임리프 핵심

🎈 핵심은 th:xxx 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다. th:xxx 이 없으면 기존 html의 xxx 속성이 그대로 사용된다.

⇒ 그래서 HTML파일을 그냥 탐색기로 열어도 th:xxx 속성을 웹 브라우저에서는 읽지 못하기에 무시하고 기본 xxx속성을 읽어서 웹페이지는 깨지지않고 렌더링된다.

URL 링크 표현식 - @{...}

URL 링크를 사용하는 경우 @{...}를 사용하는데 이를 URL링크 표현식이라 한다.
URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함한다. (요즘 안쓴다)

속성 변경 - th:onclick

onclick="location.href='addForm.html'"
th:onclick="|location.href='@{/basic/items/add}'|"
(onclick은 폼으로 이동하는걸 나타냄)
여기에는 다음에 설명하는 리터럴 대체 문법이 사용되었다. 자세히 알아보자.

리터럴 대체 문법 - |...|

th:onclick="|location.href='@{/basic/items/add}'|"

타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다.
- <span th:text="'Welcome to our application, ' + ${user.name} + '!'">
다음과 같이 리터럴 대체 문법을 사용하면, 더하기 없이 편리하게 사용할 수 있다.
- <span th:text="|Welcome to our application, ${user.name}!|">
결과를 다음과 같이 만들어야 하는데
- location.href='/basic/items/add'
- 그냥 사용하면 문자와 표현식을 각각 따로 더해서 사용해야 하므로 다음과 같이 복잡해진다.
  th:onclick="'location.href=' + '\'' + @{/basic/items/add} + '\''"
리터럴 대체 문법을 사용하면 다음과 같이 편리하게 사용할 수 있다.
th:onclick="|location.href='@{/basic/items/add}'|"

th:each 반복 출력

<tr th:each="item: ${items}">

반복은 th:each 를 사용한다. 이렇게 하면 모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고, 반복문 안에서 item 변수를 사용할 수 있다.
컬렉션의 수 만큼 .. 이 하위 테그를 포함해서 생성된다.

변수 표현식 - ${...}

<td th:text="${item.price}">10000</td>

모델에 포함된 값이나 타임리프 변수로 선언한 값을 조회할 수 있다.
프로퍼티 접근법을 사용한다. (item.getPrice())

URL 링크 표현식2 - @{...}

th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
🎈 경로를 템플릿처럼 사용할 수 있다.

🎈 경로변수({itemId}) 뿐 아니라 쿼리 파라미터도 생성할 수 있다.
⇒ th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"
⇒ http://localhost:8080/basic/items/1?query=test

URL 링크 축약

th:href="@{|/basic/items/${item.id}|}"

리터럴 대체 문법을 사용해 간단하게 사용할 수도 있다.

참고

타임리프는 순수 HTML 파일을 웹 브라우저에서 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다. JSP를 생각해보면, JSP 파일은 웹 브라우저에서 그냥 열면 JSP 소스코드와 HTML이 뒤죽박죽 되어서 정상적인 확인이 불가능하다. 오직 서버를 통해서 JSP를 열어야 한다.
이렇게 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿 (natural templates)이라 한다.

백엔드 개발자가 뷰 템플릿을 활용해 동적 HTML까지 개발하는 일이 많을까 걱정이 된다..

상품 상세

상품 상세 컨트롤러와 뷰를 개발하자.

특정 상품의 상세정보를 조회하는 API를 구현해보자

BasicItemController - 상품 상세 추가

@GetMapping("/{itemId}")
public String item(Model model, @PathVariable Long itemId) {
    Item item = itemRepository.findById(itemId);
    model.addAttribute("item", item);

    return "/basic/item";
}

🎃 @PathVariable로 넘어온 아이템 아이디로 상품을 조회 후 모델에 추가해 뷰 템플릿을 호출한다.

item.html - 상품 상세 뷰

정적 HTML을 뷰 템플릿(templates) 영역으로 복사하고 다음과 같이 수정하자.
/resources/static/item.html → 복사 → /resources/templates/basic/item.html

경로 : /resources/templates/basic/item.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}" href="/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="py-5 text-center">
        <h2>상품 상세</h2>
    </div>
    <h2 th:if="${param.status}" th:text="'저장 완료'"></h2>
    <div>
        <label for="itemId">상품 ID</label>
        <input type="text" id="itemId" name="itemId" class="form-control"
               value="1" th:value="${item.id}" readonly>
    </div>
    <div>
        <label for="itemName">상품명</label>
        <input type="text" id="itemName" name="itemName" class="form-control"
               value="상품A" th:value="${item.itemName}" readonly>
    </div>
    <div>
        <label for="price">가격</label>
        <input type="text" id="price" name="price" class="form-control"
               value="10000" th:value="${item.price}" readonly>
    </div>
    <div>
        <label for="quantity">수량</label>
        <input type="text" id="quantity" name="quantity" class="form-control"
               value="10" th:value="${item.quantity}" readonly>
    </div>
    <hr class="my-4">
    <div class="row">
        <div class="col">
            <button class="w-100 btn btn-primary btn-lg"
                    onclick="location.href='editForm.html'"
                    th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"
                    type="button">상품 수정
            </button>
        </div>
        <div class="col">
            <button class="w-100 btn btn-secondary btn-lg"
                    onclick="location.href='items.html'"
                    th:onclick="|location.href='@{/basic/items}'|"
                    type="button">목록으로
            </button>
        </div>
    </div>
</div> <!-- /container -->
</body>
</html>

🎃 속성 변경 - th:value

th:value="${item.id}"
- 모델에 있는 item 정보를 획득하고 프로퍼티 접근법으로 출력한다. ( item.getId() )
- value 속성을 th:value 속성으로 변경한다.

🎃 상품 수정 링크
th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"

🎃 목록으로 링크
th:onclick="|location.href='@{/basic/items}'|"

상품 등록 폼

BasicItemController - 상품 등록 폼 추가

이제 상품 등록을 위해 상품 등록 페이지로 이동하는 API를 구현하자

@GetMapping("/add")
public String addForm() {
    return "basic/addForm";
}

해당 API에서는 단순하게 뷰 템플릿만 호출해서 상품등록 페이지로 이동만 담당한다. (단순히 뷰 템플릿만 호출)

addForm.html - 상품 등록 폼 뷰

정적 HTML을 뷰 템플릿(templates) 영역으로 복사하고 다음과 같이 수정하자.
/resources/static/addForm.html → 복사 → /resources/templates/basic/addForm.html

경로 : /resources/templates/basic/addForm.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <link href="../css/bootstrap.min.css"
 th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
 <style>
 .container {
 max-width: 560px;
 }
 </style>
</head>
<body>
<div class="container">
 <div class="py-5 text-center">
 <h2>상품 등록 폼</h2>
 </div>
 <h4 class="mb-3">상품 입력</h4>
 <form action="item.html" th:action method="post">
 <div>
 <label for="itemName">상품명</label>
 <input type="text" id="itemName" name="itemName" class="formcontrol" placeholder="이름을 입력하세요">
 </div>
 <div>
 <label for="price">가격</label>
 <input type="text" id="price" name="price" class="form-control"
placeholder="가격을 입력하세요">
 </div>
 <div>
 <label for="quantity">수량</label>
 <input type="text" id="quantity" name="quantity" class="formcontrol" placeholder="수량을 입력하세요">
 </div>
 <hr class="my-4">
 <div class="row">
 <div class="col">
 <button class="w-100 btn btn-primary btn-lg" type="submit">상품
등록</button>
 </div>
 <div class="col">
 <button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='items.html'"
 th:onclick="|location.href='@{/basic/items}'|"
 type="button">취소</button>
 </div>
 </div>
 </form>
</div> <!-- /container -->
</body>
</html>

🎃 속성 변경 - th:action

HTML Form에서 action에 값이 설정되어 있지 않으면 현재 URL을 그대로 사용한다.
상품 등록 폼의 URL과 실제 상품 등록을 처리하는 URL을 똑같이 맞추고 HTTP 메서드로 두 기능을 구분한다.
- 상품 등록 폼: GET /basic/items/add
  - 상품 등록 처리: POST /basic/items/add

이렇게 하면 하나의 URL로 등록 폼과 등록 처리를 깔끔하게 할 수 있다.

🎃 취소

취소 시 상품 목록으로 이동한다.
th:onclick="|location.href='@{/basic/items}'|"

상품 등록 처리 - @ModelAttribute

상품등록 폼에서 작성한 폼 데이터를 전달해서 실제 상품을 등록처리해본다.
여기서는 HTML Form 방식을 사용해 데이터를 전송한다.

POST - HTML Form
Content-Type : application/x-www-form-urlencoded
메세지 바디에 쿼리 파라미터 형식으로 전달된다.
⇒ itemName=name&price=10000&quantity=10
예) 회원 가입, 상품 주문, HTML Form 사용

요청 파라미터 형식을 처리하는 방법을 버전별로 알아서 복잡한 방법부터 간결한 방법까지 사용해본다.

addItemV1 - BasicItemController에 추가

@RequetParam 사용

@PostMapping("/add")
public String saveLegacy(@RequestParam String itemName,
                         @RequestParam int price,
                         @RequestParam Integer quantity,
                         Model model) {
    Item item = new Item();
    item.setItemName(itemName);
    item.setPrice(price);
    item.setQuantity(quantity);

    Item save = itemRepository.save(item);
    model.addAttribute("item", save);
    return "basic/item";
}

🧨 먼저 @RequestParam String itemName : itemName 요청 파라미터 데이터를 해당 변수에 받는다.

🧨 Item 객체를 생성하고 itemRepository 를 통해서 저장한다.

🧨 저장된 item 을 모델에 담아서 뷰에 전달한다.

중요: 여기서는 상품 상세에서 사용한 item.html 뷰 템플릿을 그대로 재활용한다. → 반환에서 return "basic/item"을 보면 뷰를 재활용해서 상품 목록 뷰로 호출해줘! 그렇기에 뷰를 다시 만들 필요가 없는거지.

🎃 위 방법은 간단하게 아이템을 저장하는 로직임에도 불구하고 코드가 너무 길다. 그리고 전달받는 3개의 요청 파라미터도 결국 하나의 객체를 만들기 위한 파라미터들이기에 이를 한번에 객체로 매핑시켜 받을수도 있다. @ModelAttribute 애노테이션을 사용해보자.

addItemV2 - 상품 등록 처리 - @ModelAttribute

/**
 * @ModelAttribute("item") Item item
 * model.addAttribute("item", item); 자동 추가
 */
@PostMapping("/add")
public String saveV2(@ModelAttribute("item") Item item, Model model) {
    Item save = itemRepository.save(item);
    //model.addAttribute("item", save); //생략 가능
    return "basic/item";
}

🎃 @ModelAttribute 애노테이션을 활용해 요청 파라미터를 처리해준다.
⇒ Item 객체를 생성 후, 요청 파라미터의 값을 프로퍼티 접근법(setXxx)으로 입력해준다. (자동으로 입력해서 객체 생성해줌 !!! )

	Item item = new Item();
    item.setItemName(itemName);
    item.setPrice(price);
    item.setQuantity(quantity);

위 과정을 생략하게 해준다.

🎃 @ModelAttribute - Model 자동 추가
⇒ 위 코드를 보면 Model 객체에 저장된 item을 추가해주는 로직을 주석처리했다. 이는 @ModelAttribute 애노테이션의 기능 덕분인데, 이 기능으로 바로 Model에 @ModelAttribute로 지정한 객체를 자동으로 넣어준다. 모델에 데이터를 담을때는 이름이 필요한데 이름은 @ModelAttribute에 지정한 name(value) 속성을 사용한다.(속성("item"))

이름을 다르게 지정하면 다른 이름으로 모델에 포함된다.
@ModelAttribute("hello") Item item → 이름을 hello 로 지정
model.addAttribute("hello", item); → 모델에 hello 이름으로 저장 (안에 그대로 넣어주는 것이 중요)
(위 과정을 자동으로 해준다) + 지정한 이름은 화면 이름과 동일한 것으로 지정할 것.
파라미터의 Model model 부분도 지워도 됨. 스프링이 만든 모델에 자동으로 들어가니까 괜찮아 !

🎈 주의
실행전에 이전 버전인 addItemV1 에 @PostMapping("/add") 를 꼭 주석처리 해주어야 한다. 그렇지 않으면 중복 매핑으로 오류가 발생한다

addItemV3 - 상품 등록 처리 - ModelAttribute 이름 생략

name(value) 생략!

/**
 * @ModelAttribute name 생략 가능
 * model.addAttribute(item); 자동 추가, 생략 가능
 * 생략시 model에 저장되는 name은 클래스명 첫글자만 소문자로 등록 Item -> item
 */
@PostMapping("/add")
public String saveV3(@ModelAttribute Item item, Model model) {
    itemRepository.save(item);
    //model.addAttribute("item", save);
    return "basic/item";
}

🎃 @ModelAttribute 애노테이션에서 name 속성을 생략할 수도 있다.
⇒ 생략하면 모델에 저장될 때 클래스명에서 첫 글자를 소문자로 변경해 등록한다.

) @ModelAttribute 클래스명 → 모델에 자동 추가되는 이름
⇒ @ModelAttribute Item item이면 Model.addAttribute("item", item) 와 같다.
HelloWorld → helloWorld

addItemV4 - 상품 등록 처리 - ModelAttribute 전체 생략

/**
 * @ModelAttribute 자체 생략 가능
 * model.addAttribute(item) 자동 추가
 */
@PostMapping("/add")
public String saveV4(Item item) {
    itemRepository.save(item);
    return "basic/item";
}

🎃 심지어 @ModelAttribute 애노테이션도 생략이 가능하다. 대상 객체가 모델에 자동등록되는 기능도 정상동작한다.

하지만 처음에 말했듯이 애노테이션은 일단 쓰자.. (이거까지 줄일 필요는 없다는 뜻)

🎃 객체가 아니라 기본타입이면 @RequestParam이 동작한다.

상품 수정

이제 등록한 상품을 수정해보자. 여기서는 특정 상품을 수정해야하기에 해당 상품에 대한 정보를 얻어와야해서 특정 상품의 아이디를 @PathVariable로 전달해줘야 한다.

BasicItemController - 상품 수정 폼 컨트롤러 추가

@GetMapping("/{itemId}/edit")
public String editForm(@PathVariable Long itemId, Model model) {
    Item item = itemRepository.findById(itemId);
    model.addAttribute("item", item);

    return "basic/editForm";
}

수정에 필요한 정보를 조회 후 수정용 폼 뷰를 호출한다.

상품 수정 폼 뷰

정적 HTML을 뷰 템플릿(templates) 영역으로 복사하고 다음과 같이 수정하자.
/resources/static/editForm.html → 복사 → /resources/templates/basic/editForm.html

경로 : /resources/templates/basic/editForm.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}" href="/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="py-5 text-center">
        <h2>상품 수정 폼</h2>
    </div>
    <form action="item.html" th:action method="post">
        <div>
            <label for="id">상품 ID</label>
            <input type="text" id="id" name="id" class="form-control" value="1" th:value="${item.id}"
                   readonly>
        </div>
        <div>
            <label for="itemName">상품명</label>
            <input type="text" id="itemName" name="itemName" class="formcontrol"
                   value="상품A" th:value="${item.itemName}">
        </div>
        <div>
            <label for="price">가격</label>
            <input type="text" id="price" name="price" class="form-control"
                   value="10000" th:value="${item.price}">
        </div>
        <div>
            <label for="quantity">수량</label>
            <input type="text" id="quantity" name="quantity" class="formcontrol"
                   value="10" th:value="${item.quantity}">
        </div>
        <hr class="my-4">
        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" type="submit">저장</button>
            </div>
            <div class="col">
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='item.html'"
                        th:onclick="|location.href='@{/basic/items/{itemId}(itemId=${item.id})}'|"
                        type="button">취소
                </button>
            </div>
        </div>
    </form>
</div> <!-- /container -->
</body>
</html>

상품 수정 폼은 상품 등록과 유사하고, 특별한 내용이 없다.

BasicItemController - 상품 수정 개발 처리 기능 추가

@PostMapping("/{itemId}/edit")
public String edit(@PathVariable Long itemId, @ModelAttribute Item item) {
    itemRepository.update(itemId, item);
    return "redirect:/basic/items/{itemId}";
}

🎃 상품 수정은 상품 등록과 전체 프로세스가 유사하다.

GET /items/{itemId}/edit : 상품 수정 폼
POST /items/{itemId}/edit : 상품 수정 처리

🎃 return "redirect:/basic/items/{itemId}"
⇒ 상품 수정은 마지막에 뷰 템플릿 호출이 아닌 상품 상세 화면으로 이동하도록 리다이렉트를 호출한다.

⇒ 스프링에서는 redirect:/... 를 사용해 편리하게 리다이렉트를 지원한다.
(만약 스프링이 아니라면 응답 상태코드를 3xx로 설정해서 동작시켜야 한다.)
⇒ 컨트롤러에 매핑된 @PathVariable 의 값은 redirect 에도 사용 할 수 있다 !

redirect:/basic/items/{itemId} → {itemId} 는 @PathVariable Long itemId 의 값을 그대로 사용한다.

참고

HTML Form 전송은 PUT, PATCH를 지원하지 않는다. GET, POST만 사용할 수 있다.
PUT, PATCH는 HTTP API 전송시에 사용
스프링에서 HTTP POST로 Form 요청할 때 히든 필드를 통해서 PUT, PATCH 매핑을 사용하는 방법이 있지만, HTTP 요청상 POST 요청이다.

PRG Post/Redirect/Get

여기까지 개발을 했다면 이런 의문이 생길 수 있다.
상품등록페이지 및 수정페이지에서 등록이 완료된 상태에서 새로고침을 하면 어떻게 되지?
새로고침을 하게되면 마지막으로 요청했던 경로로 재요청을 하게되는데 마지막에 Post 방식으로 상품등록을 했다면 해당 상품등록 요청이 재전송되어 중복등록되는 치명적인 문제가 생길 수 있다.

전체 흐름

문제가 되는 흐름 - POST 등록 후 새로고침

🎃 위에서 언급했듯이 웹 브라우저는 새로 고침시 마지막에 서버에 전송한 데이터를 다시 전송하는데, 상품 등록 폼에서 데이터를 입력 후 저장을 선택하면 POST /add + 상품 데이터를 서버로 전송하게 되는데, 이 상태에서 다시 새로고침을 선택하면 마지막에 전송한 POST /add + 상품 데이터 를 서버로 재전송하게 되어 중복등록이 되는 것이다.

그래서 내용은 같고 ID만 다른 상품 데이터가 계속 쌓이게 된다.

이 문제를 어떻게 해결할 수 있을까 ?

PRG: Post Redirect Get 을 이용하여 해결

웹 브라우저의 새로 고침은 마지막에 서버에 전송한 데이터를 다시 전송한다.

새로 고침 문제를 해결하려면 상품 저장 후에 뷰 템플릿으로 이동하는 것이 아니라, 상품 상세 화면으로 리다이렉트를 호출해주면 된다.
웹 브라우저는 리다이렉트의 영향으로 상품 저장 후에 실제 상품 상세 화면으로 다시 이동한다. 따라서 마지막에 호출한 내용이 상품 상세 화면인 GET /items/{id} 가 되는 것이다.
이후 새로고침을 해도 상품 상세 화면으로 이동하게 되므로 새로 고침 문제를 해결할 수 있다.
(여기서의 새로고침은 GET /items/{id} 를 새로고침 하는 것이기 때문에 새로고침을 해도 상품 상세 화면으로 이동하게 되므로 새로 고침 문제를 해결할 수 있다.)

🎃 다시 말해서, POST 요청으로 상품 저장을 한 뒤 위 그림의 2번 항목처럼 상품 상세 화면으로 리다이렉트를 호출 !!

🎃 웹 브라우저는 리다이렉트의 영향으로 상품 저장후 상품 상세 화면으로 이동하게 되는데, 따라서 이 이후 새로고침을 아무리해도 GET 요청은 멱등성을 보장하기에 새로고침 문제는 해결된다.

PRG 적용 코드 - BasicItemController에 추가

/**
 * PRG - Post/Redirect/Get
 */
@PostMapping("/add")
public String saveV5(Item item) {
    itemRepository.save(item);

    return "redirect:/basic/items/" + item.getId();
}

상품 등록 처리 이후에 뷰 템플릿이 아니라 상품 상세 화면으로 리다이렉트 하도록 하는 코드.
이런 문제 해결 방식을 PRG Post/Redirect/Get 라 한다

🎃 return "redirect:/basic/items/" + item.getId();

주의

"redirect:/basic/items/" + item.getId() redirect에서 +item.getId() 처럼 URL에 변수를 더해서 사용하는 것은 URL 인코딩이 안되기 때문에 위험하다. 다음에 설명하는 RedirectAttributes 를 사용하자.

RedirectAttributes

리다이렉트를 통해 페이지를 이동하는 것은 좋은데, 이 경우 내가 수행한 로직(상품 등록, 상품 수정 등) 이 정상적으로 완료되었는지를 알 수 없다. 그래서 리다이렉트 된 페이지에 이런 결과를 노출하고싶을 때 RedirectAttributes를 이용하면 된다.

그래서 저장이 잘 되었으면 상품 상세 화면에 "저장되었습니다"라는 메시지를 보여달라는 요구사항이 왔다고 가정하고 해결해보자.

/**
 * RedirectAttributes
 */
@PostMapping("/add")
public String saveV6(Item item, RedirectAttributes redirectAttributes) {
    Item savedItem = itemRepository.save(item);
    redirectAttributes.addAttribute("itemId", savedItem.getId());
    redirectAttributes.addAttribute("status", true);

    return "redirect:/basic/items/{itemId}";
}

🎃 리다이렉트할 때 간단히 status를 추가해 뷰 템플릿에서 th:if 로 결과를 표시할 수 있다.
⇒ 실행결과 http://localhost:8080/basic/items/3?status=true 가 리다이렉트된다.

🎃 RedirectAttributes
⇒ URL 인코딩 뿐아니라 @PathVariable, 쿼리파라미터 처리까지 해준다.

🎈 redirect:/basic/items/{itemId}

@pathVariable 바인딩: {itemId}
나머지는 쿼리 파라미터로 처리: ?status=true

뷰 템플릿 메세지 추가

경로 : resources/templates/basic/item.html

<div class="container">
 <div class="py-5 text-center">
 <h2>상품 상세</h2>
 </div>
 <!-- 추가 -->
 <h2 th:if="${param.status}" th:text="'저장 완료!'"></h2>

th:if : 해당 조건이 참이면 실행
${param.status} : 타임리프에서 쿼리 파라미터를 편리하게 조회하는 기능
- 원래는 컨트롤러에서 모델에 직접 담고 값을 꺼내야 한다. 그런데 쿼리 파라미터는 자주 사용해서 타임리프에서 직접 지원한다.
뷰 템플릿에 메시지를 추가하고 실행해보면 "저장 완료!" 라는 메시지가 나오는 것을 확인할 수 있다. 물론 상품 목록에서 상품 상세로 이동한 경우에는 해당 메시지가 출력되지 않는다.

Chooooo

back-end, 지속 성장 가능한 개발자를 향하여

이전 포스트

[스프링 MVC 1편] - 웹 페이지 만들기(1)

다음 포스트

[스프링 MVC 1편] - 웹 페이지 만들기(2)