본문 바로가기
Thymeleaf

19. 실전 예제와 실무 적용 사례 - 1

by leo2114 2024. 2. 24.
반응형

회원가입/로그인 페이지 구현

회원가입과 로그인 페이지는 웹 애플리케이션에서 매우 중요한 부분입니다. 이번 챕터에서는 Spring Boot와 Thymeleaf를 사용하여 간단한 회원가입 및 로그인 페이지를 구현하는 방법에 대해 알아보겠습니다.

1. 회원가입 페이지 구현

먼저, 회원가입 페이지를 구현해야 합니다. 아래는 간단한 회원가입 페이지의 HTML 코드입니다.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>회원가입</title>
</head>
<body>
    <h2>회원가입</h2>
    <form th:action="@{/signup}" method="post">
        <label for="username">사용자명:</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">비밀번호:</label>
        <input type="password" id="password" name="password">
        <br>
        <button type="submit">가입</button>
    </form>
</body>
</html>

 

위의 코드에서는 사용자명과 비밀번호를 입력할 수 있는 폼을 구현했습니다. th:action 속성을 사용하여 회원가입 요청을 처리할 컨트롤러의 엔드포인트를 지정했습니다.

2. 로그인 페이지 구현

다음으로는 로그인 페이지를 구현합니다. 아래는 간단한 로그인 페이지의 HTML 코드입니다.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>로그인</title>
</head>
<body>
    <h2>로그인</h2>
    <form th:action="@{/login}" method="post">
        <label for="username">사용자명:</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">비밀번호:</label>
        <input type="password" id="password" name="password">
        <br>
        <button type="submit">로그인</button>
    </form>
</body>
</html>

 

회원가입 페이지와 비슷하게 사용자명과 비밀번호를 입력할 수 있는 폼을 구현했습니다. th:action 속성을 사용하여 로그인 요청을 처리할 컨트롤러의 엔드포인트를 지정했습니다.

3. 컨트롤러 구현

회원가입과 로그인을 처리할 컨트롤러를 구현해야 합니다. 아래는 간단한 컨트롤러의 예시입니다.

@Controller
public class AuthController {

    @GetMapping("/signup")
    public String showSignupForm(Model model) {
        model.addAttribute("user", new User());
        return "signup";
    }

    @PostMapping("/signup")
    public String signup(@ModelAttribute("user") User user) {
        // 회원가입 로직 구현
        return "redirect:/login";
    }

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

 

위의 코드에서 showSignupForm 메서드는 회원가입 페이지를 보여주고, signup 메서드는 회원가입 요청을 처리합니다. 비슷하게 showLoginForm 메서드는 로그인 페이지를 보여주고, 실제 로그인 로직은 Spring Security에 의해 자동으로 처리됩니다.

4. 실행

애플리케이션을 실행하고 회원가입 및 로그인 페이지를 테스트하여 기능이 올바르게 작동하는지 확인합니다.

5. 요약

이제 간단한 회원가입과 로그인 페이지를 구현하는 방법을 알아보았습니다. 이러한 기능은 웹 애플리케이션의 핵심 부분이며, Spring Boot와 Thymeleaf를 사용하여 쉽게 구현할 수 있습니다. 이러한 기능을 통해 사용자들은 웹 애플리케이션에 가입하고 로그인하여 서비스를 이용할 수 있습니다.

반응형