[한동형] Sprint 4

[hdh12191]

요구사항

기본

##로그인

• 이메일 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” 로 이동합니다

심화

• [x]
• []

주요 변경사항

스크린샷

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[kiJu2]

스프리트 미션 하시느라 수고 많으셨어요.
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다. 😊

[kiJu2]

(제안) 에러 메시지를 정의하셨군요? 😊

현재 전역 상수로 정의하셨는데 객체로 만들어서 같은 관심사끼리 묶을 수도 있습니다 !

Suggested change

	const ENTER_EMAIL = "이메일을 입력해주세요.";
	const ENTER_PASSWORD = "비밀번호를 입력해주세요.";
	const WRONG_EMAIL = "잘못된 이메일 형식입니다";
	const PASSWORD_NEED_EIGHT_WORDS = "비밀번호를 8자 이상 입력해주세요.";
	const NO_ERROR_MESSAGE = "";
	const ERROR_MESSAGES = {
	email: {
	empty: "이메일을 입력해주세요.",
	invalid: "잘못된 이메일 형식입니다.",
	},
	password: {
	empty: "비밀번호를 입력해주세요.",
	tooShort: "비밀번호를 8자 이상 입력해주세요.",
	},
	noError: "",
	};

[kiJu2]

굿굿 ! 복잡한 조건문은 변수로 정의하셨네요 !

이렇게 하신다면 조건문에 별칭을 붙일 수 있고 가독성은 향상될거예요 ! 좋은 패턴입니다 ! 👍👍👍

[kiJu2]

함수는 동사로 시작하는게 일반적입니다 !

Suggested change

	const emailValid = () => {
	const validateEmail = () => {

일반적으로 변수는 명사, 함수는 동사로 지어요.
boolean의 경우 isValidEmail와 같이 is, are, has로 시작하기도 합니다. =)

함수의 경우 다음과 같은 단어들이 접두사가 될 수 있어요:

• get
• fetch
• push
• update
• create
• calculate
• set
• 등등 ...

일반적인 네이밍 컨벤션 보기

[kiJu2]

(팁) 다음과 같이 정의해둔 조건을 그대로 사용하실 수도 있습니다. 😊

Suggested change

	if (isEmailValid && isPasswordValid) {
	loginBtn.classList.remove("disabled");
	loginBtn.disabled = false;
	} else {
	loginBtn.classList.add("disabled");
	loginBtn.disabled = true;
	}
	loginBtn.disabled = !(isEmailValid && isPasswordValid);
	if (isEmailValid && isPasswordValid) {
	loginBtn.classList.remove("disabled");
	} else {
	loginBtn.classList.add("disabled");
	}

[kiJu2]

(제안)class를 정의해두고 재사용할 수도 있겠네요 ! 😊

.input-error {
    border: 3px solid #F74747;
}

Suggested change

	if (!emailInput.value) {
	emailError.innerHTML = ENTER_EMAIL;
	emailInputWrapper.style.border = "3px solid #F74747";
	}
	if (emailInput.value && !emailInput.value.includes("@")) {
	emailError.innerHTML = WRONG_EMAIL;
	emailInputWrapper.style.border = "3px solid #F74747";
	}
	if (emailInput.value && emailInput.value.includes("@")) {
	emailError.innerHTML = NO_ERROR_MESSAGE;
	emailInputWrapper.style.border = "none";
	}
	toggleLoginButton();
	};
	const passwordValid = () => {
	if (!passwordInput.value) {
	passwordError.innerHTML = ENTER_PASSWORD;
	passwordInputWrapper.style.border = "3px solid #F74747";
	}
	if (passwordInput.value && passwordInput.value.length < 8) {
	passwordError.innerHTML = PASSWORD_NEED_EIGHT_WORDS;
	passwordInputWrapper.style.border = "3px solid #F74747";
	}
	if (passwordInput.value && passwordInput.value.length >= 8) {
	passwordError.innerHTML = NO_ERROR_MESSAGE;
	passwordInputWrapper.style.border = "none";
	}
	if (!emailInput.value) {
	emailError.innerHTML = ENTER_EMAIL;
	emailInputWrapper.classList.add("input-error");
	}
	if (emailInput.value && !emailInput.value.includes("@")) {
	emailError.innerHTML = WRONG_EMAIL;
	emailInputWrapper.classList.add("input-error");
	}
	if (emailInput.value && emailInput.value.includes("@")) {
	emailError.innerHTML = NO_ERROR_MESSAGE;
	emailInputWrapper.classList.remove("input-error");
	}
	toggleLoginButton();
	};
	const passwordValid = () => {
	if (!passwordInput.value) {
	passwordError.innerHTML = ENTER_PASSWORD;
	passwordInputWrapper.classList.add("input-error");
	}
	if (passwordInput.value && passwordInput.value.length < 8) {
	passwordError.innerHTML = PASSWORD_NEED_EIGHT_WORDS;
	passwordInputWrapper.classList.add("input-error");
	}
	if (passwordInput.value && passwordInput.value.length >= 8) {
	passwordError.innerHTML = NO_ERROR_MESSAGE;
	passwordInputWrapper.classList.remove("input-error");
	}

[kiJu2]

수고 하셨습니다 동형님 !
코드가 상당히 직관적이고 가독성이 좋네요 ㅎㅎㅎ
간결한 코드들에 모든 요구 사항이 담겨있는 모습이 인상깊습니다 ! 👍