[나윤주] sprint4

[naynara87]

판다마켓

사이트주소: https://pandamarket-momo.netlify.app/

요구사항

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

기본

로그인

• 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다
• input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
  회원가입
• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• 닉네임 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “닉네임을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않습니다..” 에러 메세지를 보입니다.
• input 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다.
• 활성화된 ‘회원가입’ 버튼을 누르면 “/signup” 로 이동합니다
• input 에 빈 값이 있거나 에러 메세지가 있으면 ‘회원가입’ 버튼은 비활성화 됩니다.

심화

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

스타일 관련

//scss 변환
sass --watch assets/scss/style.scss assets/css/style.css 

스크린샷

멘토에게

• 멘토님 달아주신 코멘트 반영 및 응용해서 다시 올립니다.

[Taero-Kim]

p4;
요부분은 OR 연산자를 통해서도 조금 더 축약할 수 있을 것 같아요!

const errorDiv = inputFormDiv.querySelector('.error-message') || document.createElement('div');
// OR(||) 연산자는 첫번째 값이 falsy한 경우 두번째 값을 반환합니다.
// 따라서 inputFormDiv.querySelector('.error-message');가 null인경우 자동으로 document.createElement('div'); 를 할당하게 됩니다.

errorDiv.classList.add('error-message');
// classList.add는 클래스명이 없다면 추가하고, 이미 있다면 아무 동작도 하지 않습니다.

따라서 위와 같이 쓰면 아예 if문을 없애볼 수도 있을 것 같아요!

[Taero-Kim]

p4;
요 errorDiv도 재할당되지 않으니, const로 선언해도 될 것 같아요!

[Taero-Kim]

상수화 시키는 부분을 적용해주셨네요!
이렇게 반복적으로 자주 사용되는 객체의 key나 변수 등을 상수로 관리하는 습관을 들이면
코드 베이스가 거대해지는 상황에서 휴먼에러를 많이 방지할 수 있을 것 같아요!👍

[Taero-Kim]

p4;
지난번 리뷰에도 남겨드렸는데, 요 부분은 나중에 시간이 될 때 천천히 조금 더 보기 좋게 조건문을 개선해보는 것도 좋을 것 같아요!

[Taero-Kim]

앞으로 거의 모든 변수에는 기본적으로 const만 사용하는 연습을 해봐요!
그러다가 정말 let이 필요할 때 그때만 let을 사용하는 습관을 들이면 좋을 것 같아요!

[Taero-Kim]

굳! 삼항연산자와 변수를 통해 훨씬 이 부분의 코드의 가독성이 좋아진 것 같아요!

[Taero-Kim]

login과 signup에 반복되어 사용되는 요런 함수들은, 천천히 시간 날때마다 공통 함수로 분리하는 연습을 해보면 좋을 것 같아요!