- 서버/springboot

Welcome Page 만들기

더모어더베러 2024. 4. 17. 23:20

SpringBoot에서 Welcome Page에 대해 알아보겠습니다

 

SpringBoot에서 resources/static/index.html 경로의 index.html은 Welcome Page로 쓰이게 됩니다.

Welcome Page는 도메인만 누르고 들어왔을때의 첫화면을 말합니다. 

 

 

위의 경로처럼 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>

 

그리고 main을 실행시키고 localhost:8080으로 접속하면 아래와 같은 화면을 확인 할수 있습니다. 

 


 

스프링 생태계의 규모는 어마어마하게 크기 때문에 외워서 작업하기는 불가능 합니다. 그러므로 필요한 정보를 검색해서 사용하는 능력을 길러야 합니다. 

 

먼저 spring.io 에 접속합니다.

Projects탭 > SpringBoot 을 클릭합니다. Learn 탭을 클릭후 버전에 맞는 Reference Doc를 클릭합니다. 필요한 정보들을 확인하고 적용하면됩니다. 

 

 


 

웹 어플리케이션에서 첫번째로 진입하는곳이 controller 입니다. 

아래와 같이 controller 패키지와 HelloController 클래스를 만들어줍니다.

 

 

HelloController

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

// 웹 어플리케이션의 첫번째 진입하는곳인 controller
// 어노테이션 Controller를 사용해준다
@Controller
public class HelloController {

	// 웹 어플리케이션에서 url /hello 라고 들어오면 hello 메소드가 실행된다
    // Get 방식
    @GetMapping("hello")    
    public String hello(Model model) {	// 스프링이 Model을 만들어서 넣어줌
        model.addAttribute("data", "doohyun");
        return "hello2";	// hello2.html 에 가서 랜더링해라
    }
}

 

 

 

hello2.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">  <!-- thymeleaf 사용 -->
<head>
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<!-- thymeleaf 사용해서 ${data}에 HelloController에서 념겨준 doohyun이 들어감 -->
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>     

</body>
</html>

 

크롬에 localhost:8080 으로 접속후에 hello 링크를 클릭하면 /hello 주소로 진입하게 되고 아래와 같은 화면을 볼수 있습니다.

 

 

그림으로 표현하면 아래와 같습니다.

 

 

참고자료

https://www.inflearn.com/course/lecture?courseSlug=%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8&unitId=49573&tab=curriculum