Spring Boot/스프링 입문 강의

Spring 입문 Chapter 5-1. 회원 관리 예제 웹 MVC 개발 : 회원 웹 기능 - 홈 화면 추가

HEY__ 2022. 3. 3. 17:36
728x90

이 글은 인프런에 있는 김영한님의 "스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술" 강의를 듣고 정리한 필기입니다.

 

 

⛅️ Controller를 통해 html 연결하기

이전 시간에는 MemberController를 만들고, 컴포넌트 스캔 혹은 @Bean을 통해 의존 관계를 설정했다.

이번 시간에는 홈 화면을 추가해보도록 하자.

 

아주 단순하게 회원을 등록하고, 회원을 조회할 수 있는 홈 화면을 만들어보자.

 

controller 패키지에서 HomeController 클래스를 하나 생성하자.

@Controller
public class HomeController {

    @GetMapping("/")
    public String home(){
        return "home";
    }
}

@Controller 어노테이션을 붙여준다.

그리고 @GetMapping을 통해 "/"를 연결시킨다. /은 도메인의 첫번째 주소를 말한다.

즉, localhost:8080/ 에 접속했을 때 이 메서드가 호출이 되는 것이다.

 

이후 return 값으로 home을 반환한다.

이전에 이야기했던 것처럼 String home을 반환하면, templates 패키지에서 home.html을 찾아갈 것이다.

 

이로써 localhost:8080/ 메인화면에 접속했을 때 home.html로 연결되게끔 설정을 완료했다.

 

⛅️ Controller에 연결할 home.html 작성

이제 home.html 파일을 작성해보자.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
  <div>
    <h1>Hello Spring</h1>
    <p>회원 기능</p>
    <p>
      <a href="/members/new">회원 가입</a>
      <a href="/members">회원 목록</a>
    </p>
  </div>
</div> <!-- /container -->
</body>
</html>

 

우리는 spring을 배우는것이기 때문에 html 코드는 복사하도록 하자.

코드를 실행하고 localhost:8080/ 로 접속하면 밑과 같은 화면이 나올 것이다.

 

하지만 여기서 버튼을 눌러도 페이지 에러가 나오고, 페이지가 제대로 나오지 않을 것이다.

아직 페이지 연결을 하지 않았기 때문이다.

 

다음 시간부터는 회원 가입과 회원 목록 버튼을 눌렀을 때, 원하는 페이지가 나오도록 해보자.

 

 

 

 

728x90