[나예진] Sprint 4 #55
[나예진] Sprint 4 #55
Conversation
There was a problem hiding this comment.
예진님 이번 미션도 고생 많으셨습니다! 👍
기능별로 함수를 나눠주셔서 좋았습니다~! 함수명에 조금만 더 신경써주시면 더욱 좋을 거 같습니다.
submit 버튼을 a 태그 대신 button 태그를 사용하시면 조금 더 수월하게 작업하실 거 같아요 :)
페이지가 리로드 될때 버튼을 클릭하면 비활성화 하고 싶은데 구현이 어려웠읍니다...
"DOMContentLoaded"이벤트를 사용한다는거 까진 알겠는데...
blockBtn 의 if문에 (email.value==='' || pwd.value==='')를 추가하고
버튼 클릭 이벤트를 document.addEventListener("DOMContentLoaded", () =>blockBtn());
이렇게 바꿔도 잘안되네욥...ㅠㅠ
-> 버튼을 클릭하면 비활성화 된다는 말씀이 정확히 어떤 말씀인지는 모르겠지만... 일단 버튼을 비활성화 할 때는 보통 disabled 속성을 많이 사용합니다. 우선 a 태그를 button 태그로 수정해 주시고 button 태그에 disabled 속성을 넣어두시면 페이지 로드시에 기본으로 비활성화 될 거에요 :) 이후 로직을 다시 구현해 보시죠~!
그래서 버튼 체크 함수의 조건을 구구절절 길게 써놨는데..어떻게 개선하는게 좋을까요?
checkedPwd 와 checkedEmail같이 조건을 함수로 달아주면 addErrorMessage때문에 mouseover이벤트가 발생할 때
에러메세지를 출력하더라구요
버튼을 클릭했을때만 메세지를 띄우고 싶은데 말이죠.....
-> 구구절절 길게 쓰시는 것도 방법이긴 합니다..! 🤣 다만 요거를 조금 더 보기 좋고 유지보수 하기 쉽게 만들기 위해 함수를 활용할 수 있어요.
예를들면, 지금 checkedMail 이라는 함수가 유효성 검사도 하고 error UI도 다루고 있는데 이 함수를 더 작게 쪼개보는거죠! (클린코드-단일책임)
function validateEmail() {
// checkedMail 에서 UI 관련 부분은 제거하고 유효성 검사만
if (비어 있는지) {
//...
} else if (이메일형식이 맞는지) {
return { error: 'INVALID_FORM', message: '이메일 형식이 안 맞아~' };
}
return null;
}
function handleEmailInputFocusout() {
const error= validateEmail();
if (error) {
addErrorMessage(email, error.message);
} else {
//...
}
}
function updateSubmitButtonState() {
// blockLoginBtn -> 단순히 block 한다는 명칭 보다는 버튼의 상태를 관리하는 것을 나타내는 함수명이 더 좋겠죠 :)
loginBtn.disabled = validatePassword() || validateEmail();
}이렇게 반복되는 유효성 검사를 따로 뽑아내면, 재사용도 가능하고 조건을 나열하더라도 함수명을 통해 어떤 일이 벌어지는 지 명확하게 알 수 있게 됩니다! (클린코드-추상화)
이번 미션은 정신도 없고 어려웠는데 차차 익숙해지겠죠..?.😂
-> 넵 그럼요 :) 충분히 잘하고 계십니다~!! 💯 지금은 html/css/javascript 개념들, dom은 어떻게 다루는지 등 기본 학습에만 충실하셔도 좋아요. 코드를 잘 정리하고 구조화하는 것은 천천히 익혀나가시면 됩니다!
|
|
||
| // 비밀번호 보이기 아이콘 변화 | ||
| visibilityIcon.forEach((icon,i) => { | ||
| icon.addEventListener("mousedown", ()=>visibileIcon(event, |
There was a problem hiding this comment.
icon.addEventListener("mousedown", (event)=>visibileIcon(event,
visibilityIcon[i]
,visibilityIcon[i].parentElement.firstElementChild));event객체를 명시적으로 넘겨주세요! 현재는 콜백 함수로 전달되는 이벤트 객체가 아니라 전역에 존재하는 window.event에 접근하는 거 같네요..! 전역에서 관리되는 요소들은 다른 로직과 충돌 될 수 있습니다.
| export function checkedEmail(){ | ||
| if(email.value===''){ | ||
| addErrorMessage(email,'이메일을 입력해주세요'); | ||
| }else if(!email.value.includes('@')||email.value.split("@")[1] === ""||email.value.split("@")[0] === ""){ |
| // 비밀번호 보이기 아이콘 변화 | ||
| export function visibileIcon(event,icon,input) { | ||
| event.preventDefault(); | ||
| icon.classList.toggle("on"); |
There was a problem hiding this comment.
on 클래스에 따로 스타일은 없는 거 같은데, 단순히 상태 구분 목적이라면 icon.type === 'text' 등을 활용할 수 있습니다!
| || !email.value.includes('@')||email.value.split("@")[1] === ""||email.value.split("@")[0] === "" | ||
| ||pwd.value==''||pwd.value.length < 8){ | ||
| loginBtn.classList.remove('ok-btn') | ||
| loginBtn.removeAttribute('href'); |
There was a problem hiding this comment.
지금은 a tag로 되어 있는데, 로그인을 하면 단순히 페이지 이동을 시키는 것이 아니라 서버에 로그인 요청을 보내게 될 거에요! 해당 로직을 처리하는 태그로는 button이 적절합니다 :)
| } | ||
|
|
||
| // 비밀번호 체크 | ||
| export function checkedPwd(){ |
There was a problem hiding this comment.
checked로 이름 붙이신 이유가 있으실까요!? 함수명 자체가 명사나 과거형 처럼 보입니다 🤔
별거 아닌거 같지만, 함수가 어떤 일을 하는지 명확하게 이름 지어주는 것은 너무너무 중요합니다!
개발자 커뮤니티에서는 변수, 함수 이름 짓는 게 가장 어렵다는 밈이 돌기도 합니다 🤣
3 participants
요구사항
기본
로그인
이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다
회원가입
이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
닉네임 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “닉네임을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않습니다..” 에러 메세지를 보입니다.
input 에 빈 값이 있거나 에러 메세지가 있으면 ‘회원가입’ 버튼은 비활성화 됩니다.
input 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다.
활성화된 ‘회원가입’ 버튼을 누르면 “/signup” 로 이동합니다
심화
주요 변경사항
sprint3 피드백 반영
스크린샷
멘토에게
"
DOMContentLoaded"이벤트를 사용한다는거 까진 알겠는데...blockBtn의 if문에(email.value==='' || pwd.value==='')를 추가하고버튼 클릭 이벤트를
document.addEventListener("DOMContentLoaded", () =>blockBtn());이렇게 바꿔도 잘안되네욥...ㅠㅠ
checkedPwd와checkedEmail같이 조건을 함수로 달아주면addErrorMessage때문에mouseover이벤트가 발생할 때에러메세지를 출력하더라구요
버튼을 클릭했을때만 메세지를 띄우고 싶은데 말이죠.....