[📚상품 구매 사이트 5단계] 구매자/관리자 - 마이페이지, 회원정보수정하기, 탈퇴하기 기능 만들기

구매자 header

관리자 header

마이페이지 화면과 회원수정 페이지

 

이번에는 마이페이지를 만들 것이다.

마이페이지에는 회원정보를 수정과 탈퇴 기능을 추가할 것이당😏

(유저 이름은 수정 불가하고 비밀번호랑 이메일만!)

(탈퇴하기를 누르면 DB에서 정보가 없어짐과 동시에 세션을 초기화 시켜서 로그인을 다시 해야 홈페이지 이용가능!!)

 

 

⏬ 5단계 깃 허브 보러가기 (전체 코드) ⏬

GitHub - JungminK1m/Springboot-Product-Study-V5

---

🎤 코드 리뷰 🎤

 

1. 헤더에 마이페이지 추가

 

이전 게시글에도 썼었지만😥😥😥

마이페이지와 로그아웃은 role('USER' , 'ADMIN' 권한)에 상관없이 동일하므로 굳이 choose문 안에 쓰지 않아도 된다!!

---

2. 마이페이지 화면 만들기

userInfo.jsp

(상품 상세페이지 그대로 가져다 씀)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

    <%@ include file="../layout/header.jsp" %>

    <div class="center">

        <div style="margin: 20px;">

            <form>

                   

                <table border="1" style="width: 500px; height: 200px; text-align: center;">

                    <tr style="border: 1px solid">

                        <th style="background-color: rgb(185, 185, 185)">이름</th>

                        <th>${user.userName}</th>

                    </tr>

                    <tr style="border: 1px solid">

                        <th style="background-color: rgb(185, 185, 185)">비밀번호</th>

                        <td>${user.userPassword}</td>

                    </tr>

                    <tr style="border: 1px solid">

                        <th style="background-color: rgb(185, 185, 185)">이메일</th>

                        <td>${user.userEmail}</td>

                    </tr>

                </table>

            </form>

                <div class="center" style="margin-top: 40px; text-align: center;">

                    <form action="/userUpdateForm" method="get">

                        <button

                            style="width: 240px; height: 50px; margin-right: 20px; background-color: rgb(255, 210, 199);">수정하기</button>

                    </form>

                    <form action="/deleteUser" method="post">

                        <button

                            style="width: 240px; height: 50px; margin: auto; background-color: rgb(250, 255, 182);">탈퇴하기</button>

                    </form>

                </div>

        </div>

    </div>

     

    <%@ include file="../layout/footer.jsp" %>

---

3. 마이페이지 화면 컨트롤러 (GetMapping)

 

주소에 @PathVariable을 사용하여 userId를 넣어도 되지만,

세션에 로그인 한 유저의 정보를 들고 올 수 있다.

세션에 로그인 한 사람만 마이페이지에 접근할 수 있도록 먼저 접근 제한을 걸어주고,

principal의 userId를 findById 메서드의 매개변수로 넣어 유저의 정보를 가져온다.

그 정보를 model 객체에 "user" 이름으로 저장하였다.

 

userRepository

user.xml

MyBatis가 세션의 userId와 일치하는 user_id를 DB에서 찾아 모든 정보를 들고와 줄 것이다!

그 중에 우리는 JSP에서 이름, 패스워드, 이메일만 쓰는 것!!

---

4. 회원 정보 수정하기 컨트롤러

업데이트를 위한 DTO를 만들었다.

일반적으로 DTO는 데이터 전송 객체이다. DB에서 가져온 데이터들을 비즈니스 로직에서 사용하기 적합한 형태로 필드를 가지고 있다.

엔티티 객체는 DB와 직접적으로 연결되어 있으므로, 보안을 위해 DTO 클래스를 이용해서 필요한 필드만을 선택적으로 노출한다.

노출한다해도 DB의 스키마 정보나, 보안상의 위협이 덜 하기 때문에.

이러한 접근 방법을 통해 엔티티 객체와 DTO의 역할을 명확하게 분리하는 것이 좋다.

 

toEntity는 UpdateUserDto를 User 엔티티 객체로 바꾸는 메서드이다.

DTO안에 내부 클래스로 toEntity를 만드는 이유는,

해당 DTO 클래스와 관련된 엔티티 클래스의 변환 작업을 한 곳에서 관리하기 위해서이다.

이렇게 하면 코드의 유지보수성과 가독성이 좋아지고, 코드 중복 또한 줄일 수 있다.

toEntity 클래스는 데이터를 insert 하거나 update 할 때 만드는 것이 좋다.

select와 delete도 해도 되지만 둘은 단순 조회나 삭제 작업이므로,

DTO 객체를 사용하지 않고 엔티티 객체를 직접 사용하는 경우가 많다.

 

userRepository

레파지토리에서 update 메서드는 User로 받아서 처리해야 한다.(User라는 Object로)

이런 식으로 하려면 업데이트 한 내용을 새로운 user 객체에 넣어주고 그것을 매개변수로 넣어줘야 한다.

그래서 toEntity를 이용하는 것이다.

 

⏬ toEntity를 안쓰려면 컨트롤러에다가 일일이 써줘야 한다. 아래 사진처럼.⏬

그러니까 웬만하면 toEntity를 이용하자

아니면, 레파지토리의 변수를 User 객체로 안받는 방법도 있다. 그렇게 되면 

그러니까 그냥 toEntity 쓰자..

모든 업데이트 값을 매개변수에 일일이 @Param 어노테이션을 이용해 입력해야 하는데, 지금은 값이 2개이지만,

나중에 실무에서는 엄청나게 많을 수 있으니 번거로운 작업이 될 것이다.

 

위와 같은 2가지 경우에는 혹시라도 DTO 내부의 필드 이름이 변경되거나, 삭제되면 레파지토리 내부의 코드를 일일이 수정해 주어야 하기 때문에 유지보수성도 떨어지고 오류가 생길 확률도 크다.

따라서 UpdateUserDto 클래스 내부의 toEntity() 메서드를 이용하여 엔티티 객체로 변환 후, 해당 객체를 매개변수로 받는 레파지토리 메서드를 작성하는 것이 바람직하다.

이렇게 하면 DTO와 엔티티 객체 간의 의존성을 낮추고, 유지보수성과 코드의 안정성을 높일 수 있다.

 

toEntity의 매개변수에는 userId를 넣어준다.

왜냐면!

userId가 필수적으로 전달되어야하는 정보이기 때문에, 해당 필드를 매개변수로 받는 방식이 더 안전한 방법이다.

또한, 매개변수로 받을 경우에는 해당 값을 강제할 수 있어서 null 값 등 예기치 않은 값이 들어올 가능성을 낮출 수 있다.

따라서, toEntity() 메서드에서 매개변수로 userId를 받는 방식을 사용하는 것이 바람직함!!!

 

물론!

UpdateUserDto 클래스에 userId 필드를 추가하고, toEntity() 메서드에서 매개변수 없이

해당 필드를 사용하는 방법도 가능하다😃😃

 

드디어 업데이트 컨트롤러다 ㅎㅎㅋㅋ

세션에 로그인 한 유저를 principal로 받은 뒤

update 메서드의 매개변수로 DTO의 toEntity클래스에 매개변수인 userId 자리에 principal의 userId를 넣어주면 끝!!

toEntity를 안 썼다면 코드가 훨씬 지저분했을 것이다.

 

업데이트를 하면 비밀번호나 이메일의 정보가 바뀌었을 것이기 때문에

기존 세션에 로그인 되어있던 정보를 삭제한다.

(근데 이건 나중에 자바스크립트로 하는 것이 더 좋은 거 같다. 약간 홈페이지의 흐름? 이라 해야하나 사용 흐름이 이상하게 흘러가는데 CustomException으로 만들면 복잡해져서..)

(로그아웃 되고, principal이 없으니 CustomException이 작동할 것이다.)

 

session.invalidate(); 을 일단 없애고 보면

업데이트가 되고 나서 다시 마이페이지로 이동한다. 그럼 업데이트 된 정보가 마이페이지에 떠 있을 것이다🤗🤗

 

---

5. 회원정보 수정 화면 만들기

userUpdate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

    <%@ include file="../layout/header.jsp" %>

        <div class="container">

            <form action="/userInfoUpdate" method="post">

                <div class="mb-3 mt-3">

                    유저 이름 :

                    <input name="userName" type="text" value="${user.userName}" readonly="readonly">

                </div>

                <div class="mb-3 mt-3">

                    비밀번호 :

                    <input name="userPassword" type="password" value="${user.userPassword}" placeholder="변경할 비밀번호">

                </div>

                <div class="mb-3 mt-3">

                    이메일 :

                    <input name="userEmail" type="email" value="${user.userEmail}" placeholder="변경할 이메일주소">

                </div>

                <button id="btnUpdateProfile" type="submit" class="btn btn-primary">회원수정완료</button>

            </form>

        </div>

 

    <%@ include file="../layout/footer.jsp" %>

 

 

---

📊 결과 확인 📊

 

 

유저 ssar의 비밀번호와 이메일을 변경해 보자😣

 

 

기존 비밀번호 : 1234 ➡ 1

기존 이메일 : ssar@nate.com ➡ ssar@ssar.com

 

 

잘 변경되었다.

 

 

로그아웃 하고 기존의 비밀번호로 로그인을 하려고 하면

 

 

예외처리 된다.

 

변경된 비밀번호로 로그인 하면 성공!

로그인 성공하면 상품 목록 페이지로 이동!