내일배움캠프 69일차

Drumj·2022년 7월 26일

Java TIL 내일배움캠프 프로젝트

내일배움캠프

목록 보기

70/80

<오늘의 학습>

오늘은!!! 프로필 변경 시 비밀번호를 또 입력 해야하는 번거로움이 있다는 피드백을 해결했다.

기존의 방식은
1. 프로필 변경을 위해 비밀번호를 확인
2. 프로필 수정 창에서 새로운 비밀번호를 입력, 2차 비밀번호도 입력

이렇게 확인을 위해 1번, 새 비밀번호로 변경을 위해 2번 총 3번의 비밀번호를 입력해야 한다.

이걸 해결하기 위해, 프로필 변경 창에서 비밀번호 변경을 제거하고 새로 비밀번호 변경 창을 만들었다.

오랜만에 FrontEnd

진짜 오랜만에 만져보는데 전문 프론트엔드 개발자분이 만드셔서 코드가 상당히 어려웠다.(우리 팀에
프론트엔드 개발자로 전향하신 분이 만드셨다.)

css는 제외하고 js 파일만 다루도록 하겠다. html 파일도 제외 하겠음.

user.js

const elementInfo = [{
    type : 'button',
    objs : {
        profileUpdate : document.querySelector('.profile-container #profile-update'),
        deleteUser : document.querySelector('.profile-container #user-delete'),
        passwordUpdate : document.querySelector('.profile-container #update-password'),
        latestPost : document.querySelector('.list-container #latest-tag'),
        likePost : document.querySelector('.list-container #like-tag')
    }
},{
    //모달
    type : 'modal',
    objs : {
        updateModal : document.querySelector('#modal-profile'),
        updatePw : document.querySelector('#modal-profile .modal-password'),
        updateWindow : document.querySelector('#modal-profile .modal-window'),
        deleteModal : document.querySelector('#modal-delete'),
        deletePw : document.querySelector('#modal-delete .modal-password'),
        deleteWindow : document.querySelector('#modal-delete .modal-delete-check'),
        passwordModal : document.querySelector('#modal-updatePw'),
        passwordPw : document.querySelector('#modal-updatePw .modal-password'),
        passwordWindow : document.querySelector('#modal-updatePw .modal-window'),
        closeBtn : document.querySelector('.close-btn')
    }

기존에 없던 부분인 passwordUpdate와 passwordModal,passwordPw,passwordWindow 부분을 추가해줬다.

이 외에도 modal이 반응 할 수 있는 부분도 있지만 제외 하도록 하겠음.

바로 실제 백엔드와 소통하는 ajax 부분을 소개한다.

//비밀번호 수정 전 체크
function password_check() {
    const password = updateProfile.password.value
    const password2 = updateProfile.password2.value

    if(password == "") {
        updateProfile.password.placeholder = '비밀번호를 입력해주세요'
        updateProfile.password.focus()
        return;
    }
    if(!is_password(password)) {
        updateProfile.password.value = ""
        updateProfile.password.placeholder = '비밀번호의 형식을 확인해주세요'
        updateProfile.password.focus()
        return;
    } 
    if(password2 == "") {
        updateProfile.password2.placeholder = '비밀번호를 입력해주세요'
        updateProfile.password2.focus()
        return;
    }
    if(password2 != password) {
        updateProfile.password2.value = ""
        updateProfile.password2.placeholder = '비밀번호가 일치하지 않습니다'
        updateProfile.password2.focus()
        return;
    }
    let data = {
        'password' : password2
    }
    
    update_password(data)
}

//비밀번호 업데이트 하기
function update_password(data){
    $.ajax({
        type: "PUT",
        url: `${domain}/update_pw/${id}`,
        data: JSON.stringify(data),
        contentType: 'application/json',
        beforeSend: function(xhr) {
            xhr.setRequestHeader("token", token);
        },
        success: function (response) {
            alert('비밀번호 변경이 완료되었습니다.')
            window.location.replace(`/user.html?userId=${id}`)
        }
    })
}

이렇게 해주면 password 가 잘 넘어가는 걸 확인 할 수 있다!

BackEnd

비밀번호 업데이트를 따로 진행하기 위해 Controller, Service, Model ,Dto 를 만들어 줬다.

ProfileinfoController
기존에 사용하던 controller 에서 새 Mapping 추가

@PutMapping("/update_pw/{id}")
public String updatePw(@PathVariable Long id, @RequestBody PwUpdateDto pwUpdateDto, @AuthenticationPrincipal UserDetailsImpl user){
	if(!id.equals(user.getUser().getId())) {
    	return "회원정보 수정은 본인만 가능합니다.";
    }
    pwService.pwUpdate(id,pwUpdateDto);
    return "비밀번호 수정이 완료되었습니다.";
}

처음에 코드를 다 짰는데 internal server error가 자꾸 발생하길래 뭐지 했는데...

PwUpdateDto에 @RequestBody를 달아주지 않아서 데이터를 제대로 전달받지 못해서 일어나는 일이었다..

근데 controller 젤 위에 @RestController 를 붙여줬는데 왜 또 @RequestBody를 달아줘야 하는 걸까..?

PwService

@Transactional
public void pwUpdate(Long id, PwUpdateDto pwUpdateDto){
    User user = userRepository.findById(id).orElseThrow(
            NoSuchUserException::new
    );
    String password = passwordEncoder.encode(pwUpdateDto.getPassword());
    user.pwUpdate(password);
}

password 만 따로 저장하기 위해서 새로 만든 pwUpdate.

기존에는 닉네임, 프로필사진, 상태메세지 등등 다 같이 변경 했었는데 해당 부분에서 password 를 제외해주고 따로 빼서 위 코드처럼 만들었다.

Model

public void pwUpdate(String password){
    this.password = password;
}

password 만 저장되게!!

@Getter
@Setter
public class PwUpdateDto {
    private String password;
}

여기도 password 만 옮겨주고 있다~

BackEnd 에서 코드는 진짜 빠르게 짰는데 front에서 상당히 오래걸린 작업이었다.

그리고 위에도 적어놨지만... 프론트에서 payload를 확인했을때 내가 바꾼 비밀번호가 전달되는 걸 확인했는데 Controller 에서 @RequestBody 가 없어서 제대로 못받아오는 건데
@RestController 만 믿고 안 붙이고 다른 쪽에서 헤맸다...