Spring WebPage & API

vinca·2023년 3월 13일

Java Spring

🍀 Spring

목록 보기

2/7

Introduction

View를 만들어서 웹 페이지를 실제로 띄워보자.

Welcome Page

이전 톰켓 서버에 접속했을 때, 아무런 파일이 없었으므로 화이트 에러가 발생했었다.

이를 해결하기 위해서는 src/main/static에 index.html을 추가해주면 된다.

src/main/static/index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>이젠 이 화면이 출력되겠쬬?</h1>
    <a href ="/hello">index.html</a>
</body>
</html>

이제 다시 실행 후, 접속해보게 되면 첫 화면인 welcome 페이지를 띄울 수 있게 된다.

Thymeleaf

thymeleaf 템플릿 엔진

thymeleaf 공식 사이트

스프링 공식 튜토리얼

스프링부트 메뉴얼

Thymeleaf는 Java Spring 웹페이지를 출력할 수 있는 템플릿 엔진이다.

위 welcome page는 정적으로 파일을 그대로 던저준 화면이기에 어떠한 수정이나, 변형을 할 수 없다.

따라서 이러한 템플릿 엔진을 사용하면 원하는 대로 모양 및 출력될 내용을 변경할 수 있도록 한다.

컨트롤러 생성

웹 어플리케이션에서의 첫번째 진입점이다.
@Controller 어노테이션을 지정하여 사용한다.

@Controller
public class HelloController {
  // 소스코드 생략
}

@GetMapping

Get방식으로, 서버의 주소 뒤에 입력할 주소를 요청했을 때 응답한다. 값이나 페이지를 리턴하게 되는데 이를 하나씩 살펴보자.

기본적으로 return되는 페이지(HTML)는 반드시 resources/templates 아래 있어야 한다.

1. 단순 웹 페이지 리턴

localhost:8080/hello

위 값의 요청이 들어왔을 때, 새로운 페이지(hello.html)로 재 갱신(이동)해준다.

여기서는 클라이언트쪽에서 따로 GET 메소드 뒤에 파라미터는 따로 추가하지 않은 형태로 간단하다.

// GET 메소드 /hello 를 호출 했을 때 실행됨
    @GetMapping("hello")
    public String defaultWebPage(Model model){
        // 모델에 값 추가 후 넘겨줌
        model.addAttribute("price","1000원");
        // ViewResolver를 통해 hello.html을 재 갱신하라.
        return "hello";
    }

단순히 return만 했을 뿐인데 어떻게 이러한 갱신이 가능할까?

컨트롤러에서 리턴 값으로 문자를 반환하면 뷰 리졸버(viewResolver)가 알아서 해당 html파일을 찾아서 반환하기 때문이다.
(return뒤의 hello문자열이 resources/templates/ +{hello}+ .html로 자동으로 매핑 됨.)

좀 더 상세하게 설명하자면, localhost:8080/hello의 요청이 들어왔을 때, 서버쪽에서 model에 addAttribute 메소드를 통해 데이터(키는 "price", 값은 "1000원")를 넣고 이를 새로운 View에서 출력되도록 한다.

아래 반환되는 View인 hello.html을 보면 다음과 같이 "price"키 값을 통해 model 내 값을 접근하여 출력하는 것을 확인할 수 있다.

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Hello</title>
</head>
<body>
    <p th:text="'풍선의 가격은.  '+ ${price}">안녕하세요 손님</p>
</body>
</html>

결과

2. MVC 형태

이번에는 클라이언트(View)에서 서버(Controller)에게 값을 포함한 요청을 보내고, 새로운 페이지(View)를 반환할 때 모델에 해당 값을 넣어 반환하는 형태를 보자.

말이 복잡한데, 소스코드를 보면 쉽다.

GET 방식의 메소드 이므로
아래와 같이 요청뒤에 쿼리문을 추가해서 발송해 보도록 하자.

http://localhost:8080/hello-mvc?price=1000&stock=3

위와 같이 파라미터를 추가해서 보내면 서버의 Controller는 다음과 같이 값을 받아서 사용한다.

    @GetMapping("hello-mvc")
    public String mvcWebPage(@RequestParam("price")  String price, @RequestParam("stock") String stock, Model model){
        model.addAttribute("price", price);
        model.addAttribute("stock", stock);
        return "hello-mvc";

@RequestParam을 통해 GET방식으로 요청되는 파라미터를 가져오고, 이를 다시 Model에 넣어서 새로운 웹 페이지(hello-mvc.html)에 출력해주고 있다.

새롭게 출력되는 View인 hello-mvc.html은 다음과 같다.

<html xmlns:th="http://www.thymeleaf.org">
<body>
<p th:text="'풍선의 가격은 ' + ${price} + '원 개수는 ' +${stock} + '개'">default text</p>
</body>
</html>

결과

3. API

localhost:8080/hello-API

API 방식으로 데이터를 바로 반환할 수 있다.
(즉, HTML을 통한 화면을 제공하는 것이 아님.)

@ResponsBody

다음과 같은 어노테이션을 추가해 주어야한다.
HTTP에서의 body부분에 해당 데이터를 직접 넣어주는 것.

    @GetMapping("hello-API")
    @ResponseBody
    public Balloon helloApi(@RequestParam("price") String price){
        Balloon balloon = new Balloon();
        balloon.setPrice(price);
        return balloon;
    }

    static class Balloon{
        private String price;
        
        public void setPrice(String price) {
            this.price = price;
        }
    }