[김우성] Sprint 4

[me92years]

요구사항

기본

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

심화

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

주요 변경사항

• 자바스크립트 강의를 시청하며 얻은 새로운 경험들로 자바스크립트만을 사용하여 만들어 봤습니다.

멘토에게

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

[lisarnjs]

우성님의 코드 스타일은 리액트스러운데요 !!
벌써 js로 이렇게 재사용성과 함수 분리, 컴포넌트 분리, 라우팅 처리 하시는 것을 보니까
우성님은 앞으로 걱정이 없는데요.. 너무 잘하실듯 👍
리액트도 엄청 금방 배우실 것 같구요!
코드에 자신감을 가지셔도 좋을 거 같습니당 ㅎㅎ
이번주도 화이팅 💯

[lisarnjs]

script 태그를 불러올 수 있는 방법에는 defer와 async도 있다는 것을 아시나요?
혹시 모르시다면 아래 글 하나 읽어보시면 도움이 될 거에요!
https://ko.javascript.info/script-async-defer

[lisarnjs]

오 리액트를 이미 사용해보신 분 같아요!
완전 리액트스러운 라우팅 처리입니다 👍

[lisarnjs]

와우 use strict;까지 ?!
react에서도 React.StrictMode 가 기본으로 사용되요! 요 친구와 비슷한 개념인이 나중에 리액트에서 보시면 어색하진 않으실 것 같네요 💯

[lisarnjs]

toggle 함수 사용하신 것 너무 좋아요!

[lisarnjs]

click event 함수들을 넘겨주는 것 같은데 왠지 함수의 코드가 같아보입니다.!!
이 친구까지 함수로 분리해준다면 더 완벽해질듯 bb

[lisarnjs]

상수화 너무 좋구요!

[lisarnjs]

위에도 max-width 768px가 있었던 것 같아요! 하나로 합쳐주시는 게 유지보수에도 좋고 css는 위에서 아래로 그려지기 때문에 혹시라도 위에 있는 css 가 덮이는 위험도 줄어들 거 같아요 👍