[Spring] 개발 역할, 부트스트랩, PRG 패턴

스프링 MVC 복습 노트: 개발 역할, 부트스트랩, PRG 패턴

이 글에서는 인프런 김영한님의 "스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술"을 수강하고 정리했습니다. 

 

1. 요구사항 분석 및 개발 역할 분담

스프링 MVC 프로젝트를 진행할 때, 요구사항이 정리되면 각 개발자들이 역할을 나누어 작업을 진행한다.

• 디자이너: 요구사항에 맞춰 디자인을 진행하고, 디자인 결과물을 웹 퍼블리셔에게 전달한다.
• 웹 퍼블리셔: 디자이너가 만든 디자인을 기반으로 HTML, CSS를 작성하여 백엔드 개발자에게 제공한다.
• 백엔드 개발자: 웹 퍼블리셔가 HTML을 만들기 전에 시스템 설계를 진행하고, 핵심 비즈니스 로직을 개발한다. HTML이 완성되면 이를 뷰 템플릿으로 변환하여 동적인 화면을 구현하고 웹 페이지의 흐름을 제어한다.

참고 React, Vue.js 같은 웹 클라이언트 기술을 사용하면 웹 프론트엔드 개발자가 웹 퍼블리셔 역할까지 수행하는 경우도 있다. 이 경우 백엔드 개발자는 뷰 템플릿 대신 HTTP API를 제공하여 웹 클라이언트가 데이터를 활용할 수 있도록 한다.

---

2. 부트스트랩을 활용한 HTML 마크업

백엔드 개발자가 핵심 비즈니스 로직을 개발하는 동안, 웹 퍼블리셔는 HTML 마크업을 완료한다. 부트스트랩을 활용하면 더욱 편리하게 UI를 구성할 수 있다.

부트스트랩 적용 방법

1. 부트스트랩 공식 사이트에서 bootstrap.min.css 파일을 다운로드한다.
2. 압축을 풀고 bootstrap.min.css 파일을 다음 경로에 추가한다.
3. resources/static/css/bootstrap.min.css

부트스트랩이란? 부트스트랩(Bootstrap)은 HTML, CSS, JS 기반의 웹 프레임워크로, 다양한 기기에서 작동하는 반응형 웹을 쉽게 구현할 수 있도록 돕는다. - 출처: 위키백과

주의사항 정적 리소스(/resources/static 폴더)에 HTML 파일을 넣으면 실제 서비스에서도 공개된다. 따라서 공개할 필요 없는 파일은 별도로 관리해야 한다.

---

3. 상품 등록 및 새로고침 문제 해결 (PRG 패턴)

문제 상황: 새로고침 시 중복 등록 발생

상품을 등록한 후 웹 브라우저에서 새로고침 버튼을 클릭하면 동일한 상품이 다시 등록되는 문제가 발생한다.

이유:

• 상품 등록 시 POST /add 요청이 발생하여 서버에 상품이 저장된다.
• 사용자가 새로고침을 하면 마지막 요청(POST /add) 이 다시 실행되면서 동일한 상품이 여러 개 등록된다.

해결 방법: PRG (Post/Redirect/Get) 패턴 적용

1. 상품 등록 후, 뷰 템플릿으로 이동하는 것이 아니라 상품 상세 화면으로 리다이렉트한다.
2. 웹 브라우저는 리다이렉트의 영향으로 GET /items/{id} 요청을 수행한다.
3. 이후 새로고침을 해도 POST /add 가 다시 실행되지 않고, 상품 상세 화면만 다시 불러오게 된다.

PRG 패턴 적용 코드

@PostMapping("/add")
public String addItemV5(Item item) {
    itemRepository.save(item);
    return "redirect:/basic/items/" + item.getId();
}

RedirectAttributes 활용 (URL 인코딩 문제 해결)

• redirect:/basic/items/" + item.getId() 방식은 URL 인코딩이 되지 않아 위험하다.
• 이를 해결하기 위해 RedirectAttributes 를 사용하여 안전한 리다이렉트를 구현한다.

@PostMapping("/add")
public String addItemV6(Item item, RedirectAttributes redirectAttributes) {
    Item savedItem = itemRepository.save(item);
    redirectAttributes.addAttribute("itemId", savedItem.getId());
    redirectAttributes.addAttribute("status", true);
    return "redirect:/basic/items/{itemId}";
}

• redirectAttributes.addAttribute("itemId", savedItem.getId()) → PathVariable
• redirectAttributes.addAttribute("status", true) → 쿼리 파라미터 추가

이제 리다이렉트된 URL은 다음과 같은 형태가 된다.

http://localhost:8080/basic/items/3?status=true

저장 완료 메시지 출력 (뷰 템플릿 수정)

<h2 th:if="${param.status}" th:text="'저장 완료!'" ></h2>

th:if="${param.status}" 를 활용하면, ?status=true 가 존재할 때만 "저장 완료!" 메시지가 표시된다.