[Spring] 웹 개발을 하는 세 가지 방법(2) : MVC와 템플릿 엔진

2022. 2. 8. 17:08·Spring
728x90

웹 개발의 세 가지 방법

1. 정적 컨텐츠 👈

2. MVC와 템플릿 엔진 👈

3. API

 

 

MVC와 템플릿 엔진

 

MVC : Model, View, Controller

과거 JSP 모델 1 방식에서는 View와 Controller가 구분되어 있지 않고, View에서 모든 역할을 다 수행했다

 

View는 화면을 그리는 데 모든 역량을 집중해야 한다

Controller는 비즈니스 로직, 내부적인 처리를 한 후, 화면에서 필요한 것을 모델에 담아 화면 쪽에 넘겨준다

 

 

 

 

> 실행해보기

controller 동작에 대해 살펴봅니다

1. HelloController 파일에 다음과 같은 내용을 추가

    @GetMapping("hello-mvc")
    public String helloMVC(@RequestParam("name") String name, Model model) {
        model.addAttribute("name", name);
        return "hello-template";
    }

 

 

 

2. hello-template.html 템플릿 추가

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

 

 

💡 thymleaf의 장점 : 다음과 같이 경로를 복사하여 서버 없이도 html 파일을 직접 열어보고 소스도 확인할 수 있다

 

 

 

3-1. 프로젝트 실행 후, localhost:8080/hello-mvc

오류 발생...!

로그를 확인해봅시다

name 파라미터가 없어서 발생한 오류네요

 

 

 

3-2. 주소 뒤에 ?와 함께 파라미터를 넘겨줍니다 (HTTP Get 방식)

name = spring!!!!!이 넘어가서 ⭐정상적으로 화면 출력⭐됩니다

 

 

 

 

> 동작 설명

- hello controller의 매핑된 메서드를 호출

- viewResolver가 동작 : 뷰를 찾고 템플릿 엔진과 연결하는 역할 수행, templates/에서 템플릿을 찾아서 Thymeleaf 템플릿 엔진에 넘긴다

- 템플릿엔진이 랜더링하고 변환한 HTML을 웹 브라우저에 반환

 

 

 

 

 

 

 

 

 

이 포스팅은 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술을 듣고 공부한 내용을 정리한 것입니다

 

 

728x90
저작자표시 비영리 (새창열림)

'Spring' 카테고리의 다른 글

[Spring] HttpServletRequest, HttpServletResponse 객체  (1) 2024.01.31
[Spring] 웹 개발을 하는 세 가지 방법(3) : API  (0) 2022.02.08
[Spring] 웹 개발을 하는 세 가지 방법(1) : 정적 콘텐츠  (0) 2022.02.08
[Spring] 웹 개발을 하는 세 가지 방법 : 정적 컨텐츠, MVC와 템플릿 엔진, API  (0) 2022.02.08
[Spring] 스프링 프로젝트 빌드하고 실행하기  (0) 2022.01.28
'Spring' 카테고리의 다른 글
  • [Spring] HttpServletRequest, HttpServletResponse 객체
  • [Spring] 웹 개발을 하는 세 가지 방법(3) : API
  • [Spring] 웹 개발을 하는 세 가지 방법(1) : 정적 콘텐츠
  • [Spring] 웹 개발을 하는 세 가지 방법 : 정적 컨텐츠, MVC와 템플릿 엔진, API
s_ih_yun
s_ih_yun
  • s_ih_yun
    CODESYUN
    s_ih_yun
  • 전체
    오늘
    어제
    • 분류 전체보기 (352)
      • Web (8)
      • Java (7)
      • Spring (26)
      • Git (16)
      • MyBatis (1)
      • FrontEnd (17)
      • JavaScript (11)
      • DevOps (6)
      • Project (0)
      • Cloud (9)
      • Lanuage (13)
        • C++ (3)
        • Python (10)
      • DB (4)
        • MySQL (1)
        • Oracle (2)
      • Computer Science (26)
        • Concept (3)
        • Algorithm (23)
      • Baekjoon (104)
        • 단계별로 풀어보기 (78)
      • CodeUp (98)
        • Python 기초 100제 (98)
      • Programmers (2)
      • Books (3)
      • etc (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

    • Syun's Pages
  • 인기 글

  • 태그

    SourceTree
    JavaScript
    단계별로 풀어보기
    CodeUp 기초 100제
    myBatis
    git
    java
    웹
    web
    BOJ
    알고리즘
    MySQL
    codeup
    C
    Programmers
    oracle
    CSS
    HTML
    자료구조
    c++
    db
    VS Code
    Python
    aws
    github
    clean code
    Tistory
    spring
    Cloud
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
s_ih_yun
[Spring] 웹 개발을 하는 세 가지 방법(2) : MVC와 템플릿 엔진
상단으로

티스토리툴바