V2-02. 회원가입 & 로그인 기능 추가

Sep 06, 2024

Contents

1. 상단 메뉴에 버튼 추가 2. UserRepository 만들기 3. UserController 만들기 4. UserRequest 만들기

1. 상단 메뉴에 버튼 추가

header.mastache


<!DOCTYPE html>
<html lang="en">

<head>
    <title>Blog</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="/board">Metacoding</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/join-form">회원가입</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/login-form">로그인</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/logout">로그아웃</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/board/save-form">글쓰기</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

회원가입, 로그인, 로그아웃, 글쓰기 버튼을 추가해줍니다.

2. UserRepository 만들기

user패키지에 UserRepository를 만든다.


@Repository
public class UserRepository {

    @Autowired
    private EntityManager em;

    public User findByUsernameAndPassword(String username, String password) {
        Query query = em.createQuery("select u from User u where u.username =:username and u.password=:password", User.class);
        query.setParameter("username", username);
        query.setParameter("password", password);
        return (User) query.getSingleResult();
    }


    @Transactional
    public void save(User user) {
        em.persist(user);
    }
}

findByUsernameAndPassword 메서드가 로그인 시도할 때 아이디/비밀번호를 확인한다.

3. UserController 만들기

user패키지에 UserController를 만든다.


@Controller
public class UserController {

    @Autowired
    private UserRepository userRepository;

    //HttpSession은 스프링 시작시에 Ioc에(빈 컨테이너) 생성돼서 대기중이다. @Autowired로 주입
    @Autowired
    private HttpSession session;

    @PostMapping("/login")
    public String login(UserRequest.LoginDTO loginDTO) {
        User sessionUser = userRepository.findByUsernameAndPassword(loginDTO.getUsername(), loginDTO.getPassword());
        session.setAttribute("sessionUser", sessionUser);
        return "redirect:/board";
    }


    @PostMapping("/join")
    public String join(UserRequest.JoinDTO joinDTO) {
        userRepository.save(joinDTO.toEntity());
        return "redirect:/login-form";
    }


    @GetMapping("/join-form")
    public String joinForm() {
        return "user/join-form";
    }

    @GetMapping("/login-form")
    public String loginForm() {
        return "user/login-form";
    }
}

4. UserRequest 만들기

user패키지에 UserRequest를 만들어서 User관련 request요청에 사용할 DTO를 만들어준다.

💡

DTO(Data Transfer Object) : 데이터를 안전하고 명확하게 관리하기 위해 사용한다.


public class UserRequest {

    @Data  // @Getter, @Setter, @ToString.. 등 기능 포함
    public static class JoinDTO {
        private String username;
        private String password;
        private String email;

        //이 메서드의 책임은 DTO -> UserObject로 바꿔주는 책임
        //toEntity()는 insert 할 때만 필요. select 할 때는 만들어줄 필요 없다.
        public User toEntity() {
            return User.builder().username(username).password(password).email(email).build();
        }
    }

    @Data
    public static class LoginDTO {
        private String username;
        private String password;
    }
}

내부에 DTO클래스를 static으로 만들어서 사용

JoinDTO : 회원가입 요청시 필요한 정보인 username, password, email의 정보를 전달

LoginDTO : 로그인 요청시 필요한 정보인 username, password 정보를 전달

toEntity()는 insert할 때 필요한 정보를 id(PK)값 빼고 전달하기 위해 만든 메서드이다.

UserRepository가 save(User user) 에서 id값만 빠진 User객체를 받아서 em.persist() 하면 영속성 컨텍스트에 저장하고 트랜잭션이 끝나고 쿼리가 insert 나가서 db에 넣는다.

Contents

1. 상단 메뉴에 버튼 추가 2. UserRepository 만들기 3. UserController 만들기 4. UserRequest 만들기