Spring #5 MVC와 템플릿 엔진

Spring #5 MVC와 템플릿 엔진

2024. 7. 16. 20:13ㆍ📁 백엔드 개발/SPRING

이번에는 MVC 패턴에 대해서 알아보겠습니다

MVC : Model, View, Controller 로써, 앞 글자를 따와서 MVC라는 단어가 생성이 되었습니다

Spring에서는 관심사를 분리하기 위해서 MVC패턴을 사용합니다.

그럼 코드를 직접 짜보겠습니다!

package helloo.helloo_spring.controller;

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

@Controller
public class HelloController {

    @GetMapping("hello") // get 요청 처리
    public String hello(Model model) { // model 객체 매개변수, 문자열 반환
        model.addAttribute("data", "hello!");
        // model 객체에 data 속성 추가, 그 값을 hello! 설정
        return "hello"; // 뷰의 이름
        // 뷰 리졸버를 통해서 뷰 파일을 찾고 hello.html 반환
    }

    @GetMapping("hello-mvc") // 사용자가 hello-mvc URL을 접속하면 메서드 호출
    public String helloMvc(@RequestParam("name") String name, Model model) {
        // @RequestParam 어노테이션은 URL 쿼리 파라미터중 "name" 이라는 키를 가지고 오겠다 라는 의미
        model.addAttribute("name", name);
        return "hello-template";
    }
}

// @RequestParam 추가적 설명
// 사용자가 http://localhost:8080/hello-mvc?name="spring" 입력 후 접속시
// @RequestParam("name")에서 name을 찾아 추출 후 name 매개변수로 전달

helloMvc 메서드를 보시면 될거 같습니다.

hello-template.html

<html xmlns:th="http://www.thymeleaf.org">
<body>
<p th:text="'hello ' + ${name}">hello! empty</p>
</body>
</html>

사용자가 http://localhost:8080/hello-mvc?name="spring" 을 입력후 접속하면

이렇게 뜨는걸 볼 수 있습니다

여기서 추가적인 작업을 해보도록 하겠습니다

- 사용자가 index를 입력하면 자동적으로 name 쿼리 파라미터를 전달함.

- 전달된 인자를 화면에 보여주는 페이지

1. 사용자가 입력할 수 있는 폼을 만들겠습니다

templates/input.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>폼 입력 페이지</title>
</head>
<body>
  <h1>이름을 입력하세요</h1>
  <form action="/hello-mvc-test" method="get">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name" />
    <button type="submit">Submit</button>
  </form>
</body>
</html>

여기서 form action을 /hello-mvc-test로 했기 때문에 submit을 했을때 text에 적힌 name이 /hello-mvc-test로 전달됩니다.

2. input.html을 처리하기 위해서 Controller를 만들겠습니다

package helloo.helloo_spring.controller;

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

@Controller
public class HelloController {

    @GetMapping("hello") // get 요청 처리
    public String hello(Model model) { // model 객체 매개변수, 문자열 반환
        model.addAttribute("data", "hello!");
        // model 객체에 data 속성 추가, 그 값을 hello! 설정
        return "hello"; // 뷰의 이름
        // 뷰 리졸버를 통해서 뷰 파일을 찾고 hello.html 반환
    }

    @GetMapping("hello-mvc") // 사용자가 hello-mvc URL을 접속하면 메서드 호출
    public String helloMvc(@RequestParam("name") String name, Model model) {
        // @RequestParam 어노테이션은 URL 쿼리 파라미터중 "name" 이라는 키를 가지고 오겠다 라는 의미
        model.addAttribute("name", name);
        return "hello-template";
    }

    // 여기부터
    @GetMapping("/")
    public String input() {
        return "input";
    }

    @GetMapping("hello-mvc-test")
    public String helloMvcTest(@RequestParam("name") String name, Model model) {
        model.addAttribute("name", name);
        return "hello-template-test";
    }
    // 여기까지
}

// @RequestParam 추가적 설명
// 사용자가 http://localhost:8080/hello-mvc?name="spring" 입력 후 접속시
// @RequestParam("name")에서 name을 찾아 추출 후 name 매개변수로 전달

이미 static 폴더에 index.html이 있기때문에 GetMapping을 안해주면 static/index.html을 반환하기 때문에

GetMapping을 통해서 경로를 다시 설정해줍니다.

그리고 사용자가 입력 폼을 통해서 입력하고 제출했을때 보여주는 페이지 경로를 설정했습니다.

3. 결과값을 보여주는 페이지

templates/hello-template-test.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>사용자가 입력한 값 출력</title>
</head>
<body>
  <h1>Hello, <span th:text="${name}">!</span></h1>
</body>
</html>

4. 결과

localhost:8080에 들어오게 되면

이런 페이지가 뜨고, 이름에 spring을 입력한 후 submit을 누르면

이런 화면이 뜨고 URL도 http://localhost:8080/hello-mvc-test?name=spring
으로 변경된걸 확인 할 수 있습니다

실행과정

1. localhost:8080에 들어가게 되면 사용자가 입력할 수 있는 input.html을 보여줌

2. name을 입력하고 submit을 누르게 되면 name값이 hello-mvc-test로 전달된다.

그렇게 되면 http://localhost:8080/hello-mvc-test?name=입력된값 을 브라우저가 요청을 보냅니다.

3. hello-mvc-test 경로에 대한 요청을 처리하는 메서드를 호출한 후 요청 파라미터에서 name값을 모델에 추가한 후

4. hello-template-test.html 뷰가 렌더링된다.

위 글은 김영한님의 spring 입문 강의를 바탕으로 적었습니다!

'📁 백엔드 개발 > SPRING' 카테고리의 다른 글

[인프런 워밍업 클럽 2기 - BE] 1주차 발자국 (10)	2024.10.06
Spring 자동 재시작 (0)	2024.07.25
Spring #4 정적 컨텐츠 (0)	2024.07.16
Spring #3 View 환경설정 (0)	2024.07.16
Spring #2 라이브러리 살펴보기! (0)	2024.07.13

🚀 Dev Sprint: 도전은 계속된다

🚀 Dev Sprint: 도전은 계속된다

태그

최근글

댓글

공지사항

아카이브

'📁 백엔드 개발 > SPRING' 카테고리의 다른 글

관련글

티스토리툴바