스프링 입문) 3. View 환경설정
Welcome Page 작성
스프링 부트는 Welcome Page 기능을 제공한다.
Welcome Page 기능이란 특정 파일을 서버 애플리케이션의 메인 페이지로 띄워주는 기능을 말한다.
프로젝트의 resources/static 경로에 index.html 파일을 작성한다.
index.html 소스코드
<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
Hello
<a href="/hello">hello</a>
</body>
</html>
index.html을 작성한 뒤 서버를 작동시킨다.
(서버를 작동시킨다는 말은 애플리케이션을 run 한다는 뜻이다. 현재 만들고있는 프로젝트가 서버 애플리케이션이기 때문이다.)
브라우저에서 localhost:8080으로 접속해본다.
마우스 우클릭 - [페이지 소스 보기]를 이용해
페이지 소스를 확인해보면 작성했던 html 파일이 그대로 띄워진 것을 확인할 수 있다.
index.html은 기본적으로 static 폴더에 들어있는 정적 파일이다.
static 폴더에 있는 파일은 웹 브라우저에 띄울 때 별도의 가공을 거치지 않고 그대로 띄워진다.
Controller, View 작성
src/main/java/hdxian/hdxianspring 하위에 [controller] 란 이름의 패키지를 만든다.
controller 패키지 하위에 HelloController 클래스를 하나 만들고, 다음과 같이 작성한다.
HelloController.java 소스코드
@Controller
public class HelloController {
@GetMapping("hello")
public String hello(Model model) {
model.addAttribute("data", "hello!!");
return "hello";
}
}@Controller : 스프링에서 동작하는 Controller 요소임을 지정하는 어노테이션. 클래스에 함께 작성하지 않으면 Controller로서 기능하지 못한다.
@GetMapping("hello") : 이 애플리케이션에 /hello 라는 경로로 GET 요청을 보내면 이 어노테이션이 붙은 메서드가 동작한다.
model.addArrtibute("data", "hello!!") : model 객체에 data라는 이름으로 "hello!!"라는 내용을 저장한다. K-V 쌍을 이루는 일종의 딕셔너리라 보면 된다.
return "hello" : 스프링에서 templates/ 폴더 하위에 "hello"라는 이름의 html 파일을 찾아서 띄우도록 한다.
만약 return "spring" 이었다면 templates/spring.html이 브라우저에 띄워진다.
resources/templates 하위에 hello.html 파일을 생성하고 다음과 같이 작성한다.
hello.html 소스코드
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>
</body>
</html>
위에서 작성한 HelloController 클래스의 hello() 메서드가 return "hello" 형태로 리턴했기 때문에,
해당 요청에 대해 hello.html 페이지 내용이 브라우저에 띄워진다.
${data} : 자바 클래스의 hello() 메서드에서 model 인스턴스에 "data"라는이름으로 "hello!!"를 저장한 것을 기억할 것이다.
이 내용을 참고해 ${data} 내용이 "hello!!"로 치환되어 브라우저에 띄워진다.
서버를 다시 시작한 뒤 주소창에 localhost:8080/hello을 입력해 접속해보면 다음과 같은 창이 나타난다.
페이지 소스를 확인해보면 ${data} 부분이 hello!!로 바뀐 것을 확인할 수 있다.
이 창이 띄워지는 동안 스프링 내부의 동작 과정을 살펴보면 다음과 같다.
1. 브라우저 주소창에 localhost:8080/hello 를 입력한다.
2. 스프링 내부에서 @GetMapping("hello") 어노테이션이 붙은 메서드(HelloController 클래스의 hello 메서드)가 실행된다.
3. hello() 메서드는 model 인스턴스에 "data"라는 이름으로 "hello!!" 문자열을 저장한 뒤, "hello"를 리턴한다.
4. 스프링 컨테이너의 viewResolver가 "hello" 리턴 값을 확인하고 templates/hello.html을 찾는다. 또한 함께 전달된 model 인스턴스의 내용을 참고하여 ${data}라고 작성된 부분을 hello!!라고 치환된 뒤 브라우저에 띄운다.
5. 변환된 hello.html 파일을 받은 브라우저가 페이지를 브라우저에 띄운다.
브라우저에 띄운다는 표현을 쓰니 자세한 동작과정을 서술하기가 힘들다.
앞으로는 서버, 클라이언트 관점에서 좀 더 자세히 정리해야겠다.
일단은 웹 페이지가 브라우저에 띄워지는 과정을 한 눈에 보는 것이 중요하니 흐름만 이해하고 넘어가도 충분하다.
정리하면
스프링은 Welcome Page 기능을 제공한다. resources/static 폴더에 index.html을 작성하면 이 페이지를 웹 서버의 기본 페이지로 띄워준다.
resources/static 폴더에 있는 파일들은 정적 파일로, 별도의 변환 과정을 거치지 않고 브라우저에 전달된다.
반면 resources/templates 폴더의 파일들은 서버에서 별도의 변환과정을 거쳐 서로 다른 내용으로 구성해 전달할 수 있다.
@Controller를 붙여 Controller 클래스를 정의하고, Controller 클래스 안에 @GetMapping인 메서드를 작성해 각 요청마다 동작할 메서드를 정의한다.
@GetMapping이 붙은 메서드에서 문자열을 리턴하면 문자열의 이름과 일치하는 html 페이지를 resources/templates 폴더에서 찾아 요청에 대한 응답으로 처리한다. 이 때 Model 객체를 이용해 html 페이지에 데이터를 전달할 수 있다.
브라우저에 localhost:8080/hello를 입력했을 때 스프링 내부의 동작과정은 다음과 같다.
1. 브라우저 주소창에 localhost:8080/hello 를 입력한다.
2. 스프링 내부에서 @GetMapping("hello") 어노테이션이 붙은 메서드(HelloController 클래스의 hello 메서드)가 실행된다.
3. hello() 메서드는 model 인스턴스에 "data"라는 이름으로 "hello!!" 문자열을 저장한 뒤, "hello"를 리턴한다.
4. 스프링 컨테이너의 viewResolver가 "hello" 리턴 값을 확인하고 templates/hello.html을 찾는다. 또한 함께 전달된 model 인스턴스의 내용을 참고하여 ${data}라고 작성된 부분을 hello!!라고 치환된 뒤 브라우저에 띄운다.
5. 변환된 hello.html 파일을 받은 브라우저가 페이지를 브라우저에 띄운다.