[MVC] 5. Controller, ViewResolver(Thymeleaf) 구현

Controller를 구현해 보겠습니다

Controller는 사용자의 요청(request)가 진입하는 지점(endpoint)라고 생각하시면 됩니다

어떤 요청이 왔는지에 따라 어떻게 처리할지를 결정하고 사용자에게는 처리된 결과를 응답하는 역할입니다

컨틀롤러가 없어도 웹페이지를 열 수는 있습니다

다음과 같이 main아래의 resources에 static이라는 이름으로 디렉토리를 만들어 보겠습니다

만들어진 static 디렉토리에다가 home.html 파일을 만들겠습니다

만들어진 home.html에 다음과 같이 작성합니다

<!DOCTYPE html>
<html lang="ko">
  <body>
    Home
  </body>
</html>

그리고 IntelliJ 오른쪽 상단에서 초록색 재생 버튼을 찾아서 눌러주세요

앞서 보았던 스프링 실행화면이 나옵니다

실행이 되면 웹 브라우저에서 다음과 같이 url을 입력해주세요

http://localhost:8080/home.html

엔터를 치면 다음과 같은 화면이 나옵니다

앞서 만들었던 html 파일의 body에 넣은 Home이 보이는 것을 알 수 있습니다

기본적으로 spring boot는 resources/static 아래의 정적파일 (html, css etc.)등을 직접 불러 들이도록 설정이 되어 있습니다

그러나 실제로 웹 사이트들을 보면 파일을 직접 부르지 않고 https://younsik-tech.tistory.com/35 와 같은 uri를 통해서 웹 페이지를 제공합니다

이를 위해서 spring에서는 Controller와 Controller의 응답을 바탕으로 화면을 구성해주는 ViewResolver를 설정해야합니다

과거에는 JSP 등이 많이 사용되었으나 최근에는 많은 개발자들이 Thymeleaf를 이용해서 뷰를 설정합니다

Thymeleaf를 사용하려면 별도의 라이브러리를 추가를 해주어야합니다

다행히 spring-boot에서는 해당 라이브러리를 제공해주고 별다른 세팅을 하지 않아도 사용할 수 있게끔 기본값이 설정되어 있습니다

build.gradle 파일의 dependencies 안에 다음 내용을 추가합니다

dependencies {

    ... 생략 ...

    // thymeleaf
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

    ... 생략 ...
    
}

Gradle reload를 눌러주세요

까먹으셨으면 다음 화면에서 찾아주시면 됩니다

화살표 두개가 원을 그리며 도는 모습의 버튼을 클릭해주세요

thymeleaf 라이브러리가 설치되면 spring boot를 설정할 application.yml을 생성해보겠습니다

생성할 위치는 앞서 사용한 resources 디렉토리를 사용합니다

resources에서 오른쪽 클릭해서 New를 눌러주세요

이번엔 File을 눌러서 application.yml 이라고 이름 짓겠습니다

만들어진 application.yml 안에는 다음과 같이 작성합니다

spring:
  web:
    resources:
      static-locations:
        - classpath:/resources/
        - classpath:/static/
      add-mappings: true
  thymeleaf:
    prefix: classpath:/templates/
    cache: false

위 설정의 의미는 일반적인 정적 자원(css, js etc.)들은 /resoruces/ 와 /static/ 에 있고 thymeleaf는 /templates/ 안의 정적 자원들을 이용한다라고 생각하시면 됩니다

설정이 완료되었으면 앞서 만들었던 패키지 com.tech.younsik.admin에서 오른쪽 클릭을 하고 새로운 패키지를 만들어 보겠습니다

New를 선택하고 Package를 클릭합니다

패키지 이름은 controller로 만들어보겠습니다

엔터를 누르면 패키지가 만들어집니다

이번에는 패키지에서 사용할 Controller를 만들어 보겠습니다

새롭게 만든 controller 패키지에서 오른쪽 클릭하여 New를 선택하고 Java Class를 생성합니다

클래스 이름은 HomeController로 생성하겠습니다

만들어진 클래스에 다음과 같이 작성합니다

package com.tech.younsik.admin.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HomeController {

  @RequestMapping(value = "/")
  public String home() {
    return "home";
  }
}

그리고 앞서 만들었던 home.html을 resource 안에 templates라는 디렉토리를 만들어서 넣어두겠습니다

templates 디렉토리가 만들어졌으면 앞서 만들었던 home.html을 드래그해서 templates 안에 넣어주거나

삭제후 templastes 안에 새로운 home.html 을 만드셔도 됩니다

home.html에는 home 옆에 추가로 thymeleaf 라고 써서 구분할 수 있게 만들겠습니다

<!DOCTYPE html>
<html lang="ko">
  <body>
    Home - thymeleaf
  </body>
</html>

생성이 완료되었으면 기존에 실행되고 있는 Spring Boot를 IntelliJ 우측 상단의 빨간 네모 모양의 종료 버튼을 누르고 다시 시작하거나 MainApplication 옆의 화살표가 원을 그리면서 도는 모습의 재시작 버튼을 눌러서 다시 실행을 합니다

재실행이 되면 아까 사용한 url을 다시 입력해보겠습니다

에러 페이지가 나오는 것을 볼 수 있습니다

그 이유는 앞에서 설정한 thymeleaf는 /templates/ 안에 설정된 정적 자원을 사용하고

thymeleaf에서는 기본적으로 읽어들이는 정적 자원의 확장자를 .html로 설정합니다

파일 확장자 .html을 제외하고 입력해도 마찬가지로 에러페이지가 나옵니다

이유는 앞서 Controller에서 설정한 RequestMapping 어노테이션에 있습니다

@Controller
public class HomeController {

  @RequestMapping(value = "/")
  public String home() {
    return "home";
  }
}

위 코드에서 @Controller 어노테이션은 앞으로 이 어노테이션이 붙는 클래스를 Controller로 사용하겠다는 의미입니다

비슷하게 @RestController가 있지만 지금은 화면 렌더링(View 화면 생성하는 것을 의미)이 필요하므로 @Controller를 사용합니다

@RestController는 MVC가 아닌 REST-API를 만들때 주로 사용합니다

@RequestMapping에서 value로 설정된 "/"는 저희가 서버의 기본 port를 사용한 localhost:8080 뒤의 path를 의미합니다

지금은 "/"로 되어 있기때문에 Controller는 localhost:8080/ 을 endpoint로 사용합니다

일반적으로 브라우저에서 uri 맨뒤는 생략할 수 있기 때문에 localhost:8080/ 과 localhost:8080은 같은 의미입니다

그런데 return으로 반환하는 값의 타입이 String이고 값은 "home"을 반환한다고 되어 있습니다

Spring MVC에서 ViewResolver(여기서는 Thymeleaf)를 설정하면 앞서 설정한 thymleaf가 읽는 리소스의 위치

classpath:/templates/ 안(보통 resources를 classpath로 생각하면 됩니다)에서 "home"에다가 thymeleaf의 기본적인 확장자 .html 이 붙은 정적 리소스를 찾게됩니다

즉, resources 안의 templates 디렉토리에 있는 home.html을 찾게됩니다

그러면 브라우저에서 localhost:8080 의 결과를 보도록 하겠습니다

보시는 것처럼 아까 설정한 Home 옆에 thymeleaf가 붙어 있는 home.html을 읽은 것을 알 수 있습니다

이처럼 Controller와 ViewResolver를 사용하면 .html 등이 붙지 않은 uri 만으로도 원하는 웹페이지 화면을 보여줄 수 있습니다

다음은 어려울 수도 있지만 admin 페이지를 만들때 자주 사용하는 BootStrap과 그 기반의 테마를 하나 선정해서 적용하고

Layout기반으로 페이지를 분리하는 방법을 알아보겠습니다

저작자표시 비영리 변경금지

'Hands-on > SpringBoot' 카테고리의 다른 글

[MVC] 4. 패키지 생성 및 git 브랜치 생성 및 커밋 (0)	2022.05.11
[MVC] 3. Boot-Admin 프로젝트 Git 연동 (원격) (0)	2022.04.30
[MVC] 2. Boot-Admin 프로젝트 Git 연동 (로컬) (1)	2022.04.30
[MVC] 1. Boot-Admin 프로젝트 세팅 (IntelliJ + Gradle) (0)	2022.04.30

'Hands-on > SpringBoot' 카테고리의 다른 글

티스토리툴바