[최권진] Sprint4

[kwonjin2]

요구사항

• Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
• 피그마 디자인에 맞게 페이지를 만들어 주세요.
• React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

기본

로그인

• 이메일 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 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다.
• 활성화된 ‘회원가입’ 버튼을 누르면 “/signin” 로 이동합니다

심화

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

주요 변경사항

• 미션 3 피드백 반영해서 수정했습니다.
• 폴더 구조 변경했습니다.
• 공통 스타일관리 common.css파일 만들어서 적용해봤습니다.
• 메인페이지에 (index.html)유틸리티 클래스 사용해봤습니다.

멘토에게

• common.js 파일에 모든 공통 함수를 두는 것보다, 기능별로 .js 파일을 나누는 게 더 효율적인지 궁금합니다.
• 요구사항에서 focusout 이벤트를 사용할 때, addEventListener에서 blur 이벤트를 활용해야 하는지, 아니면 input 이벤트를 활용해야 하는지 궁금합니다. 만약 input 이벤트를 사용해야 한다면, 코드 구조가 달라지는지도 알고 싶습니다.
• JS 코드를 작성하면서 공통으로 겹치는 코드가 많다고 느꼈습니다. 현재 코드 작성 방식에서 더 최적화할 방법이 있는지 궁금합니다. 혹시 이에 관련된 키워드나 개념을 추천해주시면 검색해서 공부하고 싶습니다!

[dongqui]

권진님~ 이번 미션도 잘 마무리 해주셨습니다.
js를 잘 활용해 주시는 거 같습니다 :) 변수/함수 이름 짓는 것에 조금만 더 신경 써주시면 더욱 좋을 거 같아요!

common.js 파일에 모든 공통 함수를 두는 것보다, 기능별로 .js 파일을 나누는 게 더 효율적인지 궁금합니다.
-> 정답이 있지는 않습니다 ㅎ 언제나 트레이드오프를 생각해 보시면 좋아요! 기능별로 나눈다면 코드 구분은 더 잘 되겠지만 불필요하게 파일이 많이 생겨 오히려 찾기 어려워질 수도 있을 거 같네요. 그러면 공통 함수를 모아뒀다가 기능 별로 나눌 수 있는 부분이 많아질 때 파일을 나누는 것도 방법이 될 수 있겠죠 :)

요구사항에서 focusout 이벤트를 사용할 때, addEventListener에서 blur 이벤트를 활용해야 하는지, 아니면 input 이벤트를 활용해야 하는지 궁금합니다. 만약 input 이벤트를 사용해야 한다면, 코드 구조가 달라지는지도 알고 싶습니다.
-> 요구 사항 자체만 보면 blur 혹은 focusout 이벤트가 맞아보이네요 :) input을 사용해도 구조는 달라지지 않을 거에요!

JS 코드를 작성하면서 공통으로 겹치는 코드가 많다고 느꼈습니다. 현재 코드 작성 방식에서 더 최적화할 방법이 있는지 궁금합니다. 혹시 이에 관련된 키워드나 개념을 추천해주시면 검색해서 공부하고 싶습니다!
-> 리뷰에 남겨드렸습니다:) 지금도 충분히 잘 하셨습니다~! 👍

[dongqui]

유틸리티 클래스를 정의하셨군요! 👍

[dongqui]

defer를 넣어주셨네요 👍 😮

[dongqui]

정규식을 써주셨네요~! 👍

[dongqui]

border나 display는 class에 포함할 수 있겠네요~! :)

[dongqui]

에러 관련 UI 로직이 반복 되고 있죠! 이런 로직들은 함수로 추상화 해주면 좋습니다. (클린코드 - 추상화)
예를 들어

function handleInputErrorUI(input, errorMessage) {
  // input 에러 관련
  // 에러 메시지 관련
}
email.addEventListener("blur", (e) => {
// ...
  if (emailValue === "") {
     handleInputErrorUI(email, '이메일을 입력해주세요.');
   } else if (emailPattern.test(emailValue)) {
      handleInputErrorUI(email, '잘못된 이메일 형식입니다.');
   }
}

이렇게 함수를 활용하시면 코드 파악하기도 훨씬 수월하고, 로직도 재사용할 수 있습니다 :)

[dongqui]

변수나 함수명은 명확하게 써주는 것이 좋습니다!
email 보다는 emailInput이 낫고, emailCheck보다는 handleEmailInputEvent 가 나을 거 같네요! (예시 입니다)

이름 짓는 것이 별 거 아닌 거 같지만 코드 파악하나는데 정말 큰 영향을 끼칩니다!
개발자 커뮤니티에서는 이름 짓는 게 가장 어렵다는 밈도 돌아요 🤣

[dongqui]

위에서 진행한 유효성 검사를 반복하고 있죠!
해당 부분을 함수로 더 작게 나눠볼 수 있겠네요.

예를 들어 위에 작성하신 emailCheck 안 쪽을 보면 하나의 함수가 너무 많은 일을 하고 있습니다.
이메일 유효성 검사도 하고있고, 이메일 인풋의 에러 UI도 다루고 있죠!
언제나 그럴 수는 없지만 하나의 함수는 하나의 일을 하는 것이 유지보수가 쉽고 재사용성이 올라갑니다.
(클린코드 -단일 책임)

function validateEmail() {
// blur 이벤트 핸들러 콜백 함수 안에서 UI부분은 제거하고 유효성 검사만 가져오기
  if (비어 있는지) {
   //...
  } else if (이메일형식이 맞는지) {
     return { error: 'INVALID_FORM', message: '이메일 형식이 안 맞아~' };
  }
  return null;
}

email.addEventListener("blur", (e) => {
  const error= validateEmail();
  if (error) {
    handleInputErrorUI(email, error.message); // 위 코멘트에서 정의한 함수
  } else {
  //...
  }
}

function updateSubmitButtonState() {
// setLoginButton-> 단순히 버튼을 set한다는 명칭 보다는 버튼의 상태를 관리하는 것을 나타내는 함수명이 더 좋겠죠 :)

 loginButton.disabled = validatePassword() || validateEmail();
}