이번에 공부하는 문제해결기법이라는 강의에서 제공한 과제이다. 아래 링크에 있는 글을 읽고 이해한 내용을 최대한 정리해보려고 한다.
https://spring.io/guides/gs/serving-web-content/
Serving Web Content with Spring MVC
What you Will Build
내가 build하게 될 application은 정적 홈페이지(static home page)이고, 이것은 HTTP GET 리퀘스트를 아래 링크로부터 받을 예정이다.
http://localhost:8080/greeting
만약 정적 페이지에 "Hello World"를 출력하는 html을 설정해두었다면, "Hello, World!"가 출력될 것이고, 만약
name이라는 파라미터를 받을 수 있도록 설정해두었다면 아래와 같이 url 링크를 작성하면 된다.
http://localhost:8080/greeting?name=User
위에 작성한 내용을 실행하기 위해 알 내용을 마칠 것이다.
실습
1. Controller 작성하기
Spring에서의 HTTP request는 controller에 의해서 동작한다. 컨트롤러는 @Controller를 붙임으로 인하여 인식할 수 있다.
아래의 예시코드에서 GreetingController는 /greeting에 대한 GET request를 담당하며, "greeting"이라는 이름을 가진 View를 리턴합니다. (View는 html을 렌더링해줄 수 있는 것입니다.)
package com.example.servingwebcontent;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class GreetingController {
@GetMapping("/greeting")
public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {
model.addAttribute("name", name);
return "greeting";
}
}@Requestparam은 name에 받아온 내용을 저장해줍니다. 기본적으로 required는 true로 되어 있어서 값을 받아오지 않으면 에러를 출력합니다. 그리고 defaultValue를 통하여 기본적인 값을 세팅해둘 수 있습니다.
이제 name이라는 파라미터는 Model 오브젝트에 추가됩니다. 그로 인하여서 우리가 View로 model을 넘겨주어서 view template으로 확인 가능한 것이지요.
2. View 작성하기
View를 보는 기법으로는 Thymeleaf를 이용하여 HTML에 대한 Server-side 랜더링이 가능하도록 하였습니다. 위의 경우에는 Thymeleaf가 greeting.html을 랜더링 하겠군요!
타임리프는 th:text를 평가하여 ${name}를 가져옵니다. (컨트롤러에서)
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>- Controller에서
@RequestParam을 통하여 받아온 값을name이라는 변수에 저장합니다. model.addAttribute("name", name);을 통하여 저장한 변수값을addAttribute를 통하여model에 저장합니다.- greeting.html에서 저장한
model값을viewresolver를 통하여 보여지게 됩니다. 이때 템플릿 엔진Thymeleaf을 이용합니다. <p th:text="'Hello, ' + ${name} + '!'" />은Thymeleaf를 이용하여 변환을 해준다는 의미입니다.
이제 화면에 나타나기 위한 준비가 끝남!!
3. Test 해보기
웹사이트 running을 시작하고, http://localhost:8080/greeting 을 입력해보시오.
이것만 작성하면 디폴트 값이 출력된다. 그것을 방지하기 위하여 파라미터를 직접 넘겨보자.
http://localhost:8080/greeting?name=User
name이라는 파라미터에 값을 넘겨준것이나 다름없다.
그럼 정상적으로 Hello, World!가 정상적 출력된다.
4. Homepage 추가하기
스프링 부트는 우리에게 정적 페이지를 제공해준다. 그렇기 때문에 static이나 public 폴더에 들어가서 정적 페이지를 추가해보자.
index.html는 특별한데, 만약 이것이 존재하면 welcome페이지로 작동을 하여서 맨 처음에 이 페이지가 보여지게 된다.
경로는 아래와 같다.
src/main/resources/static/index.html
아래와 같이 코드를 작성해보자.
<!DOCTYPE HTML>
<html>
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Get your greeting <a href="/greeting">here</a></p>
</body>
</html>