@waterglasstoon
피드백 후 개선 사항 3일차
오늘 한 것
- 프로필 페이지에서 프로필 모달 ajax 제거
- 프로필 수정 모달에서 닉네임 중복체크 에러 디버깅
프로필 모달 ajax 제거
- 제일 중요한건 각 태그의 값을 받아오는 방법을 Jquery를 통해 구현하는 것이었다!
어제 댓글에서 유저 프로필 모달이랑 쪽지 모달과 같은 방식으로 진행했다.
조금 특이 했던건, input 태그의 값을 id를 통해 값을 뽑아내는(?) 방식이다. 예를들어
<input id="nickname" type="text" placeholder="닉네임" class="input" name="" id="">에서 input 값을 Jquery를 이용해 넣어줄 때,
$('#nickname').text(nickname);이런식으로 .text()를 써줬는데, 신기하게도 .text()를 이용해서 다른 함수에서 가져다 쓸 수 있었다.
그럼 .val() 과 .html()은 각 각 뭐가 다른지 꼭 공부해 봐야 할 것 같다.
이렇게 모달을 열 때 따로 함수를 여러번 선언할 필요가 없어졌다.
➲ 참고 자료 : Jquery img 태그 값 가져오기
➲ 참고 자료 : Jquery span 태그 값 가져오기
닉네임 중복체크
와, 오늘 이 기능 구현하면서 신세계를 경험했는데, 일단 중복체크에 오류가 있었던 부분이.
1. 프로필 모달에서 프로필이미지/깃허브주소/포트폴리오주소/자기소개 이 중 하나이상을 수정하려했을 때도 무조건 닉네임 중복체크를 했어야함.
2. 닉네임 중복체크시 한번 유효한 닉네임을 중복체크한 후 다른 유저의 닉네임으로 똑같이 바꾼 후 중복체크 안해도 수정이 완료됨.
먼저 1번 오류
위에 .text()로 얻어온 input 태그안에 있는 nickname 값은 DB에서 넘어온 nickname 값이다. 그걸 이용해서 분기처리를 해줬다. 만약 지금 프로필 수정 모달에서 닉네임에 적은 값이랑, DB에있는 nickname 값이 같으면 중복체크를 안해도 되게끔!
| profile.js
let isNicknameChecked = false;
// false면 중복체크 해야됨!
window.requestEdit = () => {
let nickname = $('#nickname').val();
let nicknameDB = $('#nickname').text();
// 이부분이 .text로 값을 받아와준것이다!
if (nickname == '') {
$('#nickname').addClass('is-danger');
$('#nickname').focus();
$('#profile-modal-help').text('닉네임을 입력해 주세요.').removeClass('is-success').addClass('is-danger');
return;
}
// 닉네임 중복확인 여부 확인
if (nickname == nicknameDB) {
$('#nickname').removeClass('is-danger');
$('#profile-modal-help').text('');
isNicknameChecked == true;
} // 여기서 중복체크가 true니까 안해도 수정이 되게끔 해줬다!
else if (isNicknameChecked == false) {
$('#nickname').addClass('is-danger');
$('#nickname').focus();
$('#profile-modal-help').text('닉네임 중복확인을 해주세요.').removeClass('is-success').addClass('is-danger');
return;
}
$('#nickname').removeClass('is-danger');
$('#profile-modal-help').text('');
editProfile(nickname);
};2번 오류
이 오류를 잡기 위해서 필요한게 있었는데, input 태그가 바뀌는 걸 실시간으로 알아차리는 거였다.
window.checkNicknameDupProfile = () => {
let token = Cookies.get('token');
let nickname = $('#nickname').val();
let nicknameDB = $('#nickname').text();
//여기서부터 input 값 실시간으로 바뀌는 거 체크후 찬 로직!
$('#nickname').on('change keyup paste', function () {
let currentVal = $(this).val();
if (currentVal != nickname) {
$('#nickname').addClass('is-danger');
$('#nickname').focus();
$('#profile-modal-help').text('닉네임 중복확인을 해주세요.').removeClass('is-success').addClass('is-danger');
isNicknameChecked = false;
}
else if (nickname == nicknameDB) {
$('#nickname').removeClass('is-danger').addClass('is-safe');
$('#profile-modal-help').text('사용 가능한 닉네임입니다.').removeClass('is-danger').addClass('is-success');
isNicknameChecked = true;
}
});
if (nickname == '') {
$('#nickname').addClass('is-danger');
$('#nickname').focus();
$('#profile-modal-help').text('닉네임을 입력해 주세요.').removeClass('is-success').addClass('is-danger');
return;
}
$.ajax({
type: 'PUT',
url: process.env.BACKEND_HOST + '/user/profile/check-nickname',
beforeSend: function (xhr) {
xhr.setRequestHeader('Content-type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
},
data: JSON.stringify({
nickname: nickname
}),
success: function (response) {
if (response['dup']) {
$('#nickname').addClass('is-danger');
$('#nickname').focus();
$('#profile-modal-help').text('중복된 닉네임이 존재합니다.').removeClass('is-success').addClass('is-danger');
return;
}
$('#nickname').removeClass('is-danger').addClass('is-safe');
$('#nickname').focus();
$('#profile-modal-help').text('사용 가능한 닉네임입니다.').removeClass('is-danger').addClass('is-success');
isNicknameChecked = true;
}
});
};➲ 참고 자료 : input 변화 감지하기
Filter 기능 CSS
오늘 끝까지 우리팀의 골칫거리였던 CSS를 손봤다. 나는야...정대만...이 아니라 임성언...포기를 모르는 여자. ㅋㅋㅋㅋㅋㅋ
팀장님이 아직까지도 하고계시냐라며 놀랐지만 나는...나는....절대 넘어갈 수 없어 이 어긋남-!
그래도 혼자하는 것보다 팀장님이랑 같이하니까 생각이 정리되는 부분도 있었고, '그럼..이거를 이렇게 하면 되지 않을까요?', '이거는 이부분의 class인데~' 하면서 얘기를 하다 보니까 뭔가 슉슉-! 진행이 되어서 잘 됐다!
중간에 좌절하고 싶었던 포인트가 몇번 있었는데 그걸 이기고 해결하고 나니까 정~~~말 행복했다.
마지막 github conflict가 말도안되게 나서 진짜 멘붕이었는데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ사람이 똑똑하지 못하면...잔머리라도 좋아야한다라는 말이 있듯이 (내가 지어냄) 전문용어를 써보자면 야매로 해냈다. 으으으으! 배포 후 수정 이렇게 열심히 하려고 한건 아닌데..촤암나! 나 좀 멋질지도!
