Basic 박재현 Sprint 4

[doctor-taco]

요구사항

기본

로그인

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

심화

• 눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
• 비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다.

주요 변경사항

스크린샷

멘토에게

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

[kiJu2]

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

[kiJu2]

크으 ~ 여전히 커밋 단위와 커밋 메시지 매우 명확하네요 👍

[kiJu2]

크으 global.css가 정말 유용하겠군요 !

훌륭합니다 ! 이제 서비스 전반적으로 사용되는 스타일은 global.css에 적용하면 되겠군요 ! 👍

[kiJu2]

굿굿 ! 하나의 이메일 유효성 검사와 관련된 함수를 작성하셨군요 👍

[kiJu2]

(심화/생각해보기/제안/선택) 단일 책임 원칙 적용하기

단일 책임 원칙?: 하나의 클래스(함수)는 하나의 기능 담당하여 하나의 책임을 수행하는데 집중되어야 있어야 한다는 의미이다.

현재 checkEmail 함수는:

1. document를 통해 element를 받아오고 있습니다
2. 엘리먼트를 변경하고 있습니다.
3. 유효성 검사를 하고 있습니다.

하나의 함수에 여러 목적을 달성하고 있어요 !

다음과 같이 책임을 분리할 수 있습니다:

Suggested change

	function checkEmail() {
	const emailInput = document.getElementsByClassName("sign-email")[0];
	const emailError = document.getElementsByClassName("sign-email-error")[0];
	emailInput.classList.remove("error");
	if (!emailInput.value) {
	emailInput.style.border = "1px solid red";
	emailError.textContent = "이메일을 입력해주세요.";
	} else if (!emailInput.checkValidity()) {
	emailInput.style.border = "1px solid red";
	emailError.textContent = "잘못된 이메일 형식입니다.";
	} else {
	emailInput.style.border = "";
	emailError.textContent = "";
	}
	toggleLoginBtn();
	toggleSignupBtn();
	}
	function validateEmail(emailInput) {
	if (!emailInput.value) {
	return { isValid: false, error: "이메일을 입력해주세요." };
	}
	if (!emailInput.checkValidity()) {
	return { isValid: false, error: "잘못된 이메일 형식입니다." };
	}
	return { isValid: true, error: "" };
	}
	function applyEmailFeedback(emailInput, emailError, validationResult) {
	if (validationResult.isValid) {
	emailInput.style.border = "";
	emailError.textContent = "";
	emailInput.classList.remove("error");
	} else {
	emailInput.style.border = "1px solid red";
	emailError.textContent = validationResult.error;
	emailInput.classList.add("error");
	}
	}
	function toggleButtons() {
	toggleLoginBtn();
	toggleSignupBtn();
	}
	function checkEmail() {
	const emailInput = document.getElementsByClassName("sign-email")[0];
	const emailError = document.getElementsByClassName("sign-email-error")[0];
	const validationResult = validateEmail(emailInput);
	applyEmailFeedback(emailInput, emailError, validationResult);
	toggleButtons();
	}

[kiJu2]

(더 더 더 나아가서/심화/선택) 추가로 email 리소스에만 국한하지 않고 여러 필드도 적용해볼 수 있어요.

다음과 같이 스키마를 작성하여 관심사를 분리할 수 있습니다:

const schema = {
  email: {
    target: document.getElementsByClassName("sign-email")[0],
    validators: [
      { check: (v) => v.trim() !== "", error: "이메일을 입력해주세요." },
      { check: (v) => /\S+@\S+\.\S+/.test(v), error: "잘못된 이메일 형식입니다." },
    ],
  },
  password: {
    target: document.getElementsByClassName("sign-password")[0],
    validators: [
      { check: (v) => v.trim() !== "", error: "비밀번호를 입력해주세요." },
      { check: (v) => v.length >= 8, error: "비밀번호는 최소 8자 이상이어야 합니다." },
    ],
  },
};

스키마를 활용하여 각 리소스에 따라 유효성 검사를 하면 확장에 용이한 패턴이 됩니다 😊

[kiJu2]

다음과 같이 조건문 값을 그대로 사용할 수 있습니다:

Suggested change

	if (
	emailInput.checkValidity() &&
	nicknameInput.value.length >= 3 &&
	pwInput.value.length >= 8 &&
	pwcheckInput.value === pwInput.value
	) {
	submitBtn.disabled = false;
	} else {
	submitBtn.disabled = true;
	}
	const isValid = emailInput.checkValidity() &&
	nicknameInput.value.length >= 3 &&
	pwInput.value.length >= 8 &&
	pwcheckInput.value === pwInput.value
	submitBtn.disabled = !isValid;

이렇게 하면 조건문이 어떤 의미를 가지는지 알 수 있기에 가독성이 좋아질 수 있습니다 😊

[kiJu2]

수고하셨습니다 재현님 !
워낙 학습을 잘 수행하고 계시고 아마 재현님이라면 충분히 수용 가능하실거라 생각이 들어서 조금 욕심내어 심화 단계 피드백을 드려봤습니다 ! ㅎㅎㅎ
피드백에 대한 궁금한 점 있으시다면 DM으로 질문 주세요 😊

미션 수행하시느라 수고 많으셨어요 재현님 !