[장준혁] Sprint4

[CitrusSoda]

체크리스트 [기본]

로그인

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

체크리스트 [심화]

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

주요 변경사항

• scripts 폴더를 따로 만들어 js파일들을 보관하였습니다.

스크린샷

스프린트 미션 4

멘토에게

• 엘리먼트를 반환하는 querySelector와 getElementById가 속도 차이가 있다고 들었는데 현업에서 getElementById로 반영할 만큼 차이가 유의미한지 궁금합니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[airman5573]

안녕하세요 준혁님, 미션 진행하느라 수고하셨습니다 👍
기능 구현을 잘 하셨고 코드 흐름도 좋습니다만, 평소 준혁님 코드에서 느껴지는 '깔끔함'이 덜했습니다.
부랴부랴 기능구현에만 초점을 맞춘 느낌이랄까요? 전반적으로 리팩토링 부탁드립니다!

엘리먼트를 반환하는 querySelector와 getElementById가 속도 차이가 있다고 들었는데 현업에서 getElementById로 반영할 만큼 차이가 유의미한지 궁금합니다.

=> 아무래도 getElementById는 찾으려는 대상이 조금더 specific하고 querySelector 는 general해서 전자가 속도가 더 빠를것으로 예상되나, 웹사이트 퍼포먼스에 영향을 줄만큼의 차이는 아니라고 생각합니다. 크게 구분없이 편하신걸로 사용해주세요 :D

[airman5573]

[참고해주세요]

전역으로 관리하는것 보다는 element안에 있는 값을 재활용 하시는걸 추천드립니다.

[CitrusSoda]

즉시 실행 함수로 바꾸어 전역 함수를 함수 내부 변수로 바꾸어도 괜찮을까요?

[airman5573]

[수정해주세요]

style을 직접 조작하는것 보다는 disabled 속성을 활용해주세요.

[airman5573]

[수정해주세요]

여기도 style을 직접 조작하기 보다는 class를 땟다 붙였다 해주세요. 휴먼에러가 나올수 있습니다.

[CitrusSoda]

1. 변수명 전체적으로 명시적으로 리팩토링 하겠습니다
2. style로 직접 접근하여 스타일링 하지 않고 class로 접근하여 스타일 관리하겠습니다
3. 전역 변수 사용 최소화하겠습니다
4. 추가적으로 코드 구조가 중복된 함수들 모듈화 시켜 더 깔끔하게 만들겠습니다