[인프런 강의] 2. View 설정하기 - Welcome Page With index.html, Templated View With Thymeleaf

권하준·2024년 3월 13일

Spring boot

Spring Boot

목록 보기

3/14

인프런 강의 바로가기

저번 포스팅에서 서버를 실행하고 페이지에 접속해보면, 제대로 된 화면이 보이지 않고 에러 페이지가 뜬 것을 볼 수 있었다.

화면이 뜨지 않은 이유가 바로 View를 설정하지 않았기 때문이다.
이번에는 스프링 부트에서 이러한 View를 만드는 방법을 정리해보려고 한다.

김영한 개발자님의 강의에서는 index.html파일을 통해 정적 웰컴 페이지 만드는 방법과, thymeleaf 템플릿 엔진을 사용해서 템플릿 뷰를 만드는 방법을 다루었다.

그럼 이제 본격적으로 View를 만들어보자.

1. index.html로 Welcome Page 만들기

🎈 Welcome Page
웹 페이지의 기본 도메인 주소에 접속하면 보이는 페이지
우리가 흔히 접속하는 naver.com/ 이나 google.co.kr/ 등도 Welcome Page이다.

Spring Boot에서는 아주 간단하게 정적 웰컴 페이지를 만드는 기능을 제공한다.

해당 기능에 대한 공식 설명 페이지는 여기를 클릭하면 이동한다.

그럼 바로 웰컴 페이지를 만들어보겠다.
정적 웰컴 페이지를 만드는 방법은 매우 간단하다.
프로젝트의 static 폴더, 즉 resources/static/ 경로에 index.html 파일을 생성해 주면 된다.

아래 코드를 복사하여 html 파일을 생성해보자

resources/static/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>
        안녕하세요.<br>
        index.html 을 설정하여 만든 <b>정적 웰컴 페이지</b> 입니다.
    </p>
</body>
</html>

이후 서버를 실행하고, 웰컴 페이지에 접속해보면..

짜잔 우리가 집어넣은 html파일이 해당 페이지에 연결된 것을 확인할 수 있다.

이렇게 index.html을 사용하여 웰컴 페이지를 설정해봤는데, 사실 웰컴 페이지 말고 임의의 주소로 접속했을 때 보여질 페이지도 비슷한 방법으로 만들 수 있다.

2. 임의의 주소와 연결 되는 정적 페이지 만들어 보기

앞과 비슷한 방식을 사용하여 웰컴 페이지가 아닌 임의 주소의 페이지도 쉽게 만들 수 있다.
앞에서 index.html 문서를 작성한 static/ 폴더에 이번에는 sub-page.html 문서를 만들고 아래 스크립트를 복사해보자.

resources/static/sub-page.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    안녕하세요.<br>
    "sub-page"로 접속한 <b>정적 페이지</b> 입니다.
</p>
</body>
</html>

그리고 서버를 다시 실행한 후, localhost:8080/sub-page.html 로 한번 접속을 해보자.

그러면 임의로 설정한 주소에도 해당 페이지가 연결된 것을 볼 수 있다.

이처럼 스프링 부트에서는 static 폴더를 사용하여 쉽게 View 페이지를 만들 수 있다.

하지만 위에서 사용한 방법으로는 오직 정적 페이지밖에 띄우지 못한다.
그렇다면 동적 페이지는 어떻게 설정하는 것일까?
김영한 개발자님께서는 thymeleaf 템플릿 엔진을 사용하는 방법을 소개해 주셨다.

3. Thymeleaf 템플릿 엔진으로 View 구현하기

앞의 포스팅에서 프로젝트를 생성할 때 의존성(dependencies)를 추가했던 과정을 기억하는가?
우리가 추가한 의존성 중 thymeleaf 라는 모듈을 추가했던 것을 기억하자.

thymeleaf 공식 페이지

🎈 thymeleaf
웹 또는 독립 환경에서 사용되는 자바 템플릿 엔진

thymeleaf는 Spring Boot에서 권장하는 템플릿 엔진 중 하나이다.
링크에서 스프링 부트의 템플릿 엔진에 대해 설명해준다.
우선은 대충 JSP 처럼 동적 페이지를 작성하는데 사용된다고 알면 된다.

그러면 이 thymeleaf라는 템플릿 엔진을 사용하여 동적 페이지를 구현해보자.

1. Controller 정의하기

가장 먼저 할 일은 스프링 부트에서 컨트롤러를 정의하는 것이다.
여기서 컨트롤러는 MVC 패턴(Model, View, Controller)에서의 Controller 를 말하는 것인데... 우리는 아직 MVC를 안배웠으니까 대충 복잡한 과정을 처리하는 부분 쯤으로 알고 넘어가자

컨트롤러를 정의하기 위해서, 메인 소스 코드가 위치하는 곳에 새로운 클래스를 하나 만들고 아래 코드를 복사해보자.
나는 편의상 클래스 이름을 MyController이라고 명명하겠다.

src/main/MyController.java

package com.example.hello;

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

@Controller // #1. MyController 클래스를 컨트롤러로 지정
public class MyController {
    @GetMapping("sub-page") // #2. "sub-page"라는 url 주소를 매핑 
    public String subPage(Model model){
        // #3. "12345678"이라는 값을 "data"라는 이름으로 지정 및 추가
        model.addAttribute("data", "12345678");
        // #4. templates 폴터에서 "sub-page.html" 이름을 가지는 템플릿으로 연결
        return "sub-page";
    }
}

코드를 뜯어보자.

#1
@Controller 아노테이션을 사용하여 해당 클래스가 컨트롤러임을 스프링 부트에게 알려준다
#2
@GetMapping 아노테이션은 url 주소를 매핑시켜주는 역할을 수행한다. subPage()라는 메소드와 "sub-page"라는 url을 매핑시켜서, "sub-page/" 페이지에 접근했을 때 subPage()에서 정의한 동작을 수행 및 페이지를 리턴한다.
#3
모델에 임의의 데이터를 추가한다. 여기서 모델은 대충 유동적으로 변할 수 있는 데이터 정도로만 이해하고 넘어간다. (MVC 패턴을 공부할 때, 자세히 알려줄 듯 하다..)
#4
동작을 실행한 후 연결시킬 페이지를 지정한다.
리턴된 값을 이름으로 가지는 html 파일을 "templates" 폴더 에서 찾은 후 반환한다.

아직 MVC 패턴을 공부하지 않았기 때문에 위의 코드의 이해가 쉽지 않을 수 있다. 이해가 어려워도 일단은 동적 페이지를 간단하게 만들어 봤다는 정도로만 생각하자.

2. 템플릿(html) 정의하기

컨트롤러를 정의했으면, 이제 실제로 보여질 화면을 정의해 주어야 한다.
html파일이 위치할 경로는 resources/templates/ 이다.

html 파일의 이름은 앞의 컨트롤러에서 정의한데로 만들어야한다.
컨트롤러에서는 마지막에 "sub-page" 라는 이름을 반환했으므로 파일 이름은 "sub-page.html" 로 지어주면 된다.

html 파일을 만들고 아래 코드를 복사하자.

resources/templates/sub-page.html

<!DOCTYPE html>
<!--#1. 타임리프의 th 속성을 사용하기 위한 태그-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>안녕하세요.<br>
    "sub-page"로 접속한 <b>동적 페이지</b>입니다.<br>
<!--        #2. 컨트롤러에서 정의한 데이터를 사용 -->
    넘겨받은 데이터는 <b th:text="${data}"></b>입니다.</p>
</body>
</html>

해당 문서에서 눈여겨 볼 부분은 아래와 같다.

#1
html 문서에서 타입리프 태그를 사용하기 위해 설정하는 부분이다.
타임리프의 자세한 사용법은 생략한다.(~~나도 모른다~~)
#2
앞의 컨트롤러에서 정의한 데이터 값을 템플릿에서도 사용할 수 있다.

이렇게 템플릿 문서까지 작성을 완료 했으면 서버를 실행후 localhost:8080/sub-host 주소로 접속해보자.

짜잔 우리가 눈 여겨볼 포인트가 몇 가지 있다.

먼저 페이지에 접속한 주소를 한번 봐보자.
위의 페이지는 "기본도메인주소/sub-page" 의 url로 접속을 하였다.
여기서 sub-page 라는 주소는 우리가 컨트롤러에서 리턴한 문자열임을 알 수 있다.
data 값으로 컨트롤러에서 정의한 데이터인 12345678 이 표시되었다.
분명 우리가 작성한 html 문서에서는 12345678 이라는 구체적인 값을 입력하지 않고, 컨트롤러에서 정의한 이름인 data 라는 이름으로 작성하였다.
이렇게 작성된 문서는 누군가 페이지에 접근할 때, 동적으로 처리되어서 보여지기 때문에 12345678 값을 확인할 수 있는 것이다.
즉 우리는 thymeleaf를 사용하여 동적 페이지를 구현한 것이라고 볼 수 있겠다.

4. Thymeleaf를 사용하여 동적 Wellcome Page 만들기

앞에서 임의의 주소를 가지는 동적 웹 페이지를 만들어 보았다.
앞의 코드에서 조금만 수정하면, thymeleaf로 동적 웰컴 페이지도 구현할 수 있다.

앞의 컨트롤러를 정의한 MyController 클래스 에 아래 메소드를 추가해보자

@GetMapping("")
    public String wellcomePage(Model model){
        model.addAttribute("data2", "87654321");
        return "wellcome";
    }

위의 subPage() 메소드와 어떤점이 다른지 눈치 챘는가?
바로 @GetMapping 아노테이션 안의 값을 공백("")으로 설정했다는 것이다.
그리고 연결되는 html 문서를 "wellcome"으로 설정했다.

컨트롤러를 설정을 마쳤으면, 보여질 html 템플릿도 작성하자.

resources/templates/wellcome.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>안녕하세요.<br>
    "웰컴 페이지"로 접속한 <b>동적 페이지</b>입니다.<br>
    넘겨받은 데이터는 <b th:text="${data2}"></b>입니다.</p>
</body>
</html>