웰컴 페이지란 ?
일반적으로 웰컴 페이지란 사용자가 웹 사이트를 처음 접속했을 때 나타나는 메인 페이지라고 생각하면 된다. url 자체에 다른 파라미터 값 없이 웹사이트 주소만 나타나는 경우가 많다. 네이버나 구글을 생각하면 된다.
스프링부트 웰컴 페이지 설정
공식 문서인 spring.io에 들어가서 보면 Welcome Page에 대해서 나와있다. static폴더의 index.html을 welcome page로 지정하고, static폴더에 index.html이 존재하지 않을 경우에 templates 폴더에서 index.html을 찾는다. 만약 static 폴더와 templates 둘다 index.html이 있다면 static 폴더의 index.html이 우선순위가 높다.
스프링 부트에서 웰컴페이지를 설정해주기 위해서 프로젝트 /src/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파일을 만들어주고 localhost:8080으로 접속해보면
다음과 같이 뜰 것이다. 하지만 지금 아직 우리는 hello를 만들어주지 않았기 때문에 a태그로 감싸진 hello를 클릭하면
처럼 뜬다.
이제 index파일을 설정해줬으니 컨트롤러와 view 파일을 설정해주도록 하자.
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>해당 글에서는 김영한님의 강의를 따라서 thymeleaf라는 템플릿 엔진을 써서 만들었다.
HelloController.javapackage hello.hellospring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller //Controller라는 표시를 해주는 Controller 어노테이션
public class HelloController {
@GetMapping("hello") //클라이언트가 /hello라고 호출하면 이 메서드를 호출한다
public String hello(Model model){
model.addAttribute("data", "hello!!"); // data는 key hello!! 는 value로 view로 넘김
return "hello"; // view resolver로 prefix와 suffix로 앞과 뒤를 생략하고 뷰를 리턴한다.
}
}
다음은 Java 파일이다. 여기서 Model은 View와 Controller를 이어주는 역할을 한다.
위처럼 모델을 사용했을 때, hello.html으로 return 시켜준다. 즉 이 컨트롤러의 역할은 클라이언트(사용자)가 url을 도메인에 /hello를 붙여서 검색했을 때 Dispatcher-servlet이 받아서 적절한 Controller에 위임해준다. 그렇게 HelloController로 들어오게 되고 helloController에 hello 메소드를 실행한다.
따라서 HelloController와 hello.html까지 만들어주고 다시 index.html로 들어와서
이 hello 링크를 클릭하게 되면
"data"가 key 값이고 "hello!!"를 value로 설정해줬기 때문에 hello.html에서 ${data}를 사용해서 key값으로 value를 꺼내준다. HelloController에서 value값을 수정하고 서버를 재시작하면 파라미터 값이 변하는 것도 확인해 볼 수 있을것이다.
