Spring/Spring 쇼핑몰 프로젝트

[쇼핑몰프로젝트] ChatGPT를 이용하여 만드는 JAVA Spring 쇼핑몰 - DAY 3: 컨트롤러와 뷰

개발자하소서 2024. 7. 12. 22:22
728x90
반응형
SMALL

 

DAY 3: 컨트롤러와 뷰

 

목표

  1. Spring MVC 패턴 소개
  2. 첫 번째 컨트롤러와 뷰 작성
  3. Thymeleaf 설정 및 사용

 

📌 Spring MVC 패턴 소개

 


Spring MVC(Model-View-Controller) 패턴은 웹 애플리케이션 개발을 위한 아키텍처 패턴으로,

애플리케이션의 비즈니스 로직, 사용자 인터페이스, 데이터 모델을 분리한다.

  • Model: 애플리케이션의 데이터 및 비즈니스 로직을 담당한다.
  • View: 사용자에게 보여지는 UI를 담당한다.
  • Controller: 사용자 요청을 처리하고 모델과 뷰를 연결한다.

 

 

📌첫 번째 컨트롤러와 뷰 작성

 

 

먼저, 기본적인 컨트롤러와 뷰를 작성한다.

 

1) 컨트롤러 생성

HomeController를 생성하여 기본 페이지 요청을 처리한다.


  1. com.example.shoppingmall 패키지에 새로운 패키지 controller를 생성한다.









     2. controller 패키지 안에 HomeController 클래스를 생성한다.






전체 흐름 요약

1. 사용자가 웹 브라우저에서 내 '도메인 주소'로 접근한다.

2. HomeController 클래스의 'home' 메서드가 호출된다.

3. home 메서드는 "Welcome to the Shopping Mall!"이라는 메시지를 Model 객체에 추가한다.

4. "home"이라는 이름의 뷰를 반환한다.

5. 뷰는 사용자에게 "Welcome to the Shopping Mall!" 메시지를 표시한다.


 

package com.example.shoppingmall.controller;

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

@Controller
public class HomeController {

    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("message", "Welcome to the Shopping Mall!");
        return "home";
    }
}

 

 

 

2) 뷰 생성

src/main/resources/templates/home.html 파일을 생성하여 기본 페이지를 작성한다.








전체 흐름 요약

 1. 사용자가 내 도메인 주소로 접속하면 HomeController의 home 메서드가 호출된다.

 2. home 메서드는 Model 객체에 "Welcome to the Shopping Mall!"이라는 메시지를 추가한다.

 3. Spring은 이 메시지를 가지고 home.html 뷰를 렌더링한다.

 4. Thymeleaf 템플릿 엔진이 th:text="${message}" 부분을 찾아서 Model 객체의 메시지로 대체한다.

 5. 최종적으로 브라우저는 <h1>Welcome to the Shopping Mall!</h1>라는 내용을 표시한다.

 

 

<!DOCTYPE html> <!--html 문서임을 브라우저에 알려준다. -->
    <html xmlns:th="http://www.thymeleaf.org">
    <!-- thymeleaf 템플릿 엔진을 사용한다는 것을 선언한다 -->
            <head>
                <title>Shopping Mall</title> <!--브라우저 탭에 표시될 웹 페이지 제목설정 -->
            </head>
        <body>
            <H1 th:text="${message}">Welcome to the Shopping Mall!</H1>
            <!--${message}: 이 부분은 Spring Framework의 컨트롤러에서 전달된 데이터를 참조한다. 
            예를 들어, HomeController에서 model.addAttribute("message", "Welcome to the Shopping Mall!")로 
            설정된 데이터를 말한다. -->
        
        </body>
    </html>

 

 

 

 

📌 Thymeleaf 설정 및 사용

 

Spring Boot에서는 기본적으로 Thymeleaf가 포함되어 있다.

 

하지만 필요 시 pom.xml 파일에 다음 의존성을 추가한다.

 


1) Thymeleaf 의존성 추가

pom.xml 파일에서 다음 의존성을 확인하거나 추가한다.





* pom.xml 파일

  - pom.xml 파일은 Maven 프로젝트에서 사용되는 구성 파일로, 프로젝트의 의존성(dependencies)을 관리한다. 

  - 즉, 프로젝트에 필요한 외부 라이브러리들을 정의하는 곳이다.


2) Thymeleaf 설정

기본적으로 Spring Boot는 Thymeleaf를 자동으로 설정한다.

별도의 추가 설정은 필요하지 않는다.

이제 컨트롤러와 뷰를 설정했으므로 애플리케이션을 실행해보자.




* 왜 필요한가?

  - Thymeleaf 사용 가능하게 함: 이 의존성을 추가하면 Spring Boot 프로젝트에서 Thymeleaf 템플릿 엔진을 사용할 수 있게 됨


  - 템플릿 렌더링: 서버에서 동적으로 HTML을 생성하고, 데이터를 삽입하여 웹 페이지를 렌더링할 수 있다.



 

 

 

 

📌애플리케이션 실행 및 테스트

 



1. 애플리케이션을 실행한다.





2. 브라우저에서 http://localhost:8080으로 접속한다.



3. "Welcome to the Shopping Mall!" 메시지가 표시되면 성공이다.





 

 

 

 

📌 오늘의 요약

 

  • Spring MVC 패턴을 공부했다.

  • 첫 번째 컨트롤러 (HomeController)를 생성했다.

  • 기본 뷰 (home.html)를 생성했다.

  • Thymeleaf 설정을 확인하고, 간단한 페이지를 작성했다.
728x90
반응형
LIST