[Spring Boot] 3. 맛보기 실습 2

김건우

Mar 25, 2025

Contents

1. 프로젝트 생성 2. 코드 작성 템플릿 엔진

1. 프로젝트 생성

2. 코드 작성

💡

@Controller :

리턴 되는 값의 경로를 찾아서 (단, 경로는 고정 되어있음 /templates/user/파일명)

그 안의 파일의 내용을 찾아서 버퍼에 담음 ( 파일명.mustache로 설정)


package org.example.second.model;

import lombok.AllArgsConstructor;
import lombok.Getter;

@Getter
@AllArgsConstructor
public class User {
    private int id;
    private String username;
    private String email;
}


package org.example.second.repository;

import org.example.second.model.User;

public class UserRepository {

    public User findOne(){
        // select * from user_tb where id = 1;
        return new User( 1, "ssar", "ssar@nate.com");
    }

    public User findTwo(){
        // select * from user_tb where id = 1;
        return new User( 2, "cos", "cos@nate.com");
    }

}

2-1 Java 코드 내부에 HTML을 직접 작성하여 반환 하는 방식

유지 보수가 어렵고, 코드가 지저분해질 수 있다


package org.example.second.controller;

import org.example.second.model.User;
import org.example.second.repository.UserRepository;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

public class UserController {

    UserRepository userRepository = new UserRepository();
    
    @GetMapping("/v2/user/1")
    public @ResponseBody String findOneV2(){
        User user = userRepository.findOne();

        return """
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                </head>
                <body>
                <h1>info page</h1>
                <hr>
                <div>
                  ${user.id}, ${user.username}, ${user.email}
                </div>
                </body>
                </html>
                """.replace("${user.id}",user.getId()+"")
                .replace("${user.username}",user.getUsername())
                .replace("${user.email}",user.getEmail());
    }
}

템플릿 엔진

Java 코드에서 HTML을 제거하여 가독성이 높아짐

유지보수가 쉬워지고, HTML을 따로 관리할 수 있음

2-2 HTML 코드에 Java 코드를 작성하여 반환하는 방식


public class UserController {

    UserRepository userRepository = new UserRepository();

    @GetMapping("/user/1")
    public String findOne(Model model) {
        User user = userRepository.findTwo(); // DB에서 사용자 데이터 조회
        model.addAttribute("model", user); // HTML에 보낼 데이터 저장
        return "user/info"; // 템플릿 사용
    }

HTML 템플릿

특정 부분을 동적으로 변경할 수 있도록 변수를 넣어둠

<div> 변수 </div>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>info page</h1>
<hr>
<div>
  {{model.id}}, {{model.username}}, {{model.email}}
</div>
</body>
</html>