[블로그프로젝트] 26. 회원정보 수정하기(1)

유튜브에서 블로그 만들기 프로젝트를 따라하면서 나의 스킬을 조금더 레벨업 하고자 한다.

IDE : IntelliJ

언어 : Java

DB : MySQL

빌드관리 도구 : Maven

OS : iOS

참고유튜브 : 메타코딩

---

글 수정, 삭제 기능을 만들었으니 이제 유저의 정보도 수정할 수 있는 기능을 작성해보자

header에 내정보수정을 누르면 주소를 /user/updateForm으로 이동하게 만들었으니

userController로이동해 updateForm 메서드를 작성해준다.

 

그러면 controller는 user에 updateForm으로 리턴해준다.

    @GetMapping("/user/updateForm")
    public String updateForm(){

        return "user/updateForm";
    }

 

User 패키지에 updateForm을 생성해주자 signForm을 복사해서 이름을 바꿔주면 된다.

 

회원의 아이디는 변경할수 없게 할것이기 때문에 readonly를 추가해준다.

어떠한 값을 기준으로 유저를 선택해 정보를 수정을 해줘야하는지 모르기 때문에 유저의일련번호를 hidden으로 값을 불러와 "id"로 사용할 수 있게 해준다.

시큐리티세션에 저장되어 있는 유저의 정보를 가져와서 사용하면 되기 때문에 principal.user.userId를 값으로 넣어주면 된다.

유저 정보를 수정할 때 가입한 유저의 아이디와 이메일은 보여주는게 좋기 때문에 비밀번호를 제외한 아이디 이메일에는 

마찬가지로 principal.user.username과 email을 넣어준다.

버튼도 btn-save에서 btn-update로 변경해주는걸 잊지말자

<div class="container">

    <form>
        <input type="hidden" id="id" value="${principal.user.userId}"/>
        <div class="form-group">
            <label for="username">ID</label>
            <input type="text" value="${principal.user.username}" class="form-control" id="username" placeholder="Enter ID" name="username" readonly>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Enter Password" name="password">
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" value="${principal.user.email}" class="form-control" id="email" placeholder="Enter Email" name="email">
        </div>

    </form>

    <button id="btn-update" class="btn btn-primary">Update</button>

</div>
<br>
<script src="/js/user.js"></script>

 

 

서버에서 간단하게 확인을해보면 유저의 id와 email값들을 잘 불러오는걸 확인할 수 있다.

 

이제 버튼이 눌러졌을때 기능을 작성하기 위해 User.js로 이동해서 btn-update 버튼이 눌렸을때 작동할 기능을 작성하자

        $("#btn-update").on("click",()=> {
            this.update();
            });

 

user.jsp에서 작성한 유저일련번호의 변수명을 작성해주어야 한다.

처음에 id : ${"#id"}.val()로 작성을 했다가 작동하지 않아서 유저의 일련번호를 찾지 못해서 

계속 null 값만 넘어왔었다.

,

        update : function(){

            let data = {
                userId : $("#id").val(),
                password : $("#password").val(),
                email : $("#email").val()
            };

            $.ajax({
                type : "PUT",
                url : "/user",
                data : JSON.stringify(data),
                contentType : "application/json; charset=utf-8",
                dataType : "json"

            }).done(function(resp) {
                alert("회원수정완료");

                location.href ="/"
            }).fail(function(error) {
                alert("회원수정실패 다시 한번 확인해주세요")
                alert(JSON.stringify(error));
            });

        }

 

userApiController로 이동해서 user.js에서 보낸 데이터들을 받아주자

    @PutMapping("/user")
    public ResponseDTO<Integer> update(@RequestBody User user){
        userService.회원수정(user);
        return new ResponseDTO<Integer>(HttpStatus.OK.value(),1);
    }

 

userService로 이동해 회원수정 메서드를 작성해주자

userRepository에 있는 findById 메서드를 동작시켜주기위해 userApiController에서 받은 유저정보에서 hidden 값으로 처리했었던 

유저의 일련번호(userId)를 보내줘서 나온 결과값을 persistance에 저장하고

새롭게 유저가 설정한 비밀번호도 다시 db에 업데이트를 할 때 암호화해서 넣어주어야하기때문에 회원가입때 비밀번호를 해쉬화해서 저장한것처럼 해주면 된다.

유저가 새롭게 작성해준 비밀번호를 rawPassword로 받아서 BCryptPasswordEncoder로 비밀번호를 해쉬화후에 set 해주면 된다.

그러면 영속성 컨텍스트에 있는 user의 정보가 변경이 되고 db 메모리에 변경된 값이 저장되게된다.

그러게 다시 userService까지 응답이 오게되어 userApiController로 응답을 보내줄때 트랜잭션이 종료되어 db메모리에만 저장되어 있던 변경된 값이 자동으로 커밋되어 db에 변경된 값이 저장되게 된다.

@Transactional
    public void 회원수정(User user) {
        User persistance = userRepository.findById(user.getUserId())
                .orElseThrow(()->{return new IllegalArgumentException("회원 찾기 실패");
                });
        String rawPassword = user.getPassword();
        String encPassword = encoder.encode(rawPassword);
        persistance.setPassword(encPassword);
        persistance.setEmail(user.getEmail());

    }

 

서버에서 테스트를 진행하게 되면

1111@naver.com -> 1111@test.com으로 변경

작성한대로 수정이 완료되었다고 알람이 오고 db를 확인해보면 변경된 이메일주소를 확인할 수 있다.

여기서 비밀번호도 변경했는데 변경한 비밀번호로 로그인을 시도하면 잘 되는걸 확인할 수 있었다.