Conversation
| @@ -20,20 +19,25 @@ | |||
| <form class="auth_contents"> | |||
| <div class="auth_content"> | |||
| <label>이메일</label> | |||
There was a problem hiding this comment.
<label for="email">이메일</label>이렇게 바꾸면 로그인을 클릭하더라도 email input에 포커스가 갈꺼에요ㅎㅎ!
| <div class="auth_content pw"> | ||
| <label>비밀번호</label> | ||
| <div class="auth_content"> | ||
| <label for="password">비밀번호</label> |
There was a problem hiding this comment.
아아 알고계신데 위에 이메일은 누락되신거군요ㅎㅎ
이미 알고계시다면 그냥 넘어가도 괜찮아요~!!
| <div class="eye" onclick="onEyecliked()"> | ||
| <img id="eye_img" onclick="onImgcliked()" src="/images/btn_visibility_on_24px.svg"> |
There was a problem hiding this comment.
클릭했을때 onImgcliked 도 있고 onEyecliked 가 있는데 어떤게 맞는걸까요?
| <input class="button" type="submit" value="로그인"> | ||
| <input class="button" type="button" value="로그인" onclick="location.href='/pages/items.html';"> |
There was a problem hiding this comment.
아직 form을 안배워서 submit 버튼이 되면 action이 발생되어서 원하는대로 동작이 안되시긴 할꺼에요...!
원래대로 submit이 맞고, form 태그로 감싸주는게 원래는맞아요ㅎㅎ;;
일단 이부분은 배우기 전이니 넘어가도 괜찮습니다!
| <div class="eye" onclick="onEyecliked()"> | ||
| <img src="/images/btn_visibility_on_24px.svg"> | ||
| </div> |
There was a problem hiding this comment.
아래쪽꺼 눈 아이콘을 클릭해도 위에있는 비밀번호 input의 type이 바뀌는것같아요ㅠ
이 버그를 해겨결하기 위해선 비밀번호 확인에도 별도의 함수를 만들어주어야 겠네요...!ㅠ
근데 그렇게 하자니 너무 코드가 길어지고 중복되는 코드가 많아져서 보기 싫으실 수 있어요...ㅠㅠㅠ
저희가 그래서 part1에서 중복되는 코드를 줄이고자 모듈화 했던거 기억 나실꺼에요!
js도 모듈화를 할 수 있는데, 그건 멘토링때 같이 해보구요, 일단 회원가입 페이지에서 비밀번호확인쪽도 정상적으로 동작하도록 수정해보면 좋을것같아요!
제일 쉽게는 그냥 passwordConfirm을 위한 함수를 따로 만들어주면 되겠죠ㅎㅎ!
| const submitBtn=document.querySelector('.button'); | ||
| const email=emailInput.value; | ||
|
|
||
| if(email.includes("@")&&email.includes(".")){ |
There was a problem hiding this comment.
이부분을 조금 개선하면 좋을것같아요!
일단 이메일인지 아닌지 구분하기 위해서 @랑 . 이 포함되긴 해야겠지만 다른 조건들도 여러가지가 있을꺼에요...ㅠ
그걸 하나하나 if문으로 거르는건 어렵고, 이런 문제를 해결하기 위해서 실무에서 정규표현식 이라는걸 많이 사용해요!
문자열의 패턴을 검사하는건데, 다음과 같이 사용해요
function isValidEmail(email) {
// 이메일 정규표현식
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return emailRegex.test(email);
}
// 테스트
console.log(isValidEmail("[email protected]")); // true
console.log(isValidEmail("invalid-email")); // false
console.log(isValidEmail("[email protected]")); // true
console.log(isValidEmail("[email protected]")); // false형태는 조금 어려울 수있는데, 우선 이런게 있다 정도만 알고 넘어가도 좋아요ㅎㅎ
| if(!password){ | ||
| pwError.innerText='비밀번호를 입력해주세요' | ||
| pwInput.classList.add('error'); | ||
| pwError.classList.add('error_msg'); | ||
| submitBtn.disabled=true; | ||
| } | ||
| else if(password.length<=8){ | ||
| pwError.innerText='비밀번호를 8자 이상 입력해주세요'; | ||
| pwInput.classList.add('error'); | ||
| pwError.classList.add('error_msg'); | ||
| submitBtn.disabled=true; | ||
| } | ||
| else{ | ||
| pwInput.classList.remove('error'); | ||
| pwError.innerText = ''; // 에러 메시지 제거 | ||
| pwError.classList.remove('error_msg'); | ||
| submitBtn.disabled = false; | ||
| submitBtn.style.backgroundColor = 'var(--blue100)'; // 원 | ||
|
|
||
| } |
There was a problem hiding this comment.
꼼꼼하게 예외처리 잘 처리하신것같아요ㅎㅎ!
코드도 깔끔해서 읽기도 편하구요
질문에 대한 답
이건 이해를 잘 못했어요ㅠ
네네! 물론이죠ㅎㅎ! 힌트를 드리자면... 구현하는 함수들을 다시사용할 수 있도록 추상화 하는거에요!
이건 class로 처리할 수도 있고 data-* 를 사용할수도 있긴 한데, data-* 는 지양하는게 좋아요ㅠ
이건 방법에 차이라서... 뭐가 맞고 틀리고는 없는데, 저는 addEventListener가 좀더 좋은것같아요ㅎㅎ;; focus도 있고, blur도 있고 input도 있어서... js로 처리하는게 좀더 간단하지 않을까여? |
|
에고...ㅋㅋ;; 실수로 제가 닫아버렸네요ㅋㅋ;; 암튼 과제 하시느라 고생 많으셨구요...! 잘 진행하고 계신것같습니다! 더 질문 있으신거 있으시면 코멘트나 DM 남겨주시면 볼게여! |
요구사항
기본
로그인
회원가입
심화
주요 변경사항
스크린샷
멘토에게
id 값은 같은게 두개가 있으면 안되니 eyeClicked 할 때 password의 값을 class 로 변경 해줘도 회원가입 창에서는 비밀번호 확인 창의 비번은 안보이는데 'data-target 속성을 참조하여 해당 비밀번호 필드(input)의 타입을 변경' 이런 식으로 data-target을 넣는게 맞나요..?
저는 function을 다 줬는데 addEventListener로 js 를 짜는게 더 나을까요?
셀프 코드 리뷰를 통해 질문 이어가겠습니다.