[남숙희] Week4

[sooki88]

요구사항

기본

• [기본]이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지가 보이나요?
• [기본]이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 input에 빨강색 테두리와 아래에 “올바른 이메일 주소가 아닙니다.” 빨강색 에러 메세지가 보이나요?
• [기본]이메일 input에서 focus out 일 때, input 값이 [email protected] 일 경우 input에 빨강색 테두리와 아래에 “이미 사용 중인 이메일입니다.” 빨강색 에러 메세지가 보이나요?
• [기본]비밀번호 input에서 focus out 할 때, 값이 8자 미만으로 있거나 문자열만 있거나 숫자만 있는 경우, input에 빨강색 테두리와 아래에 “비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.” 빨강색 에러 메세지가 보이나요?
• [기본]비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input에 빨강색 테두리와 아래에 “비밀번호가 일치하지 않아요.” 빨강색 에러 메세지가 보이나요?
• [기본]회원가입을 실행할 경우, 문제가 있는 경우 문제가 있는 input에 빨강색 테두리와 에러 메세지가 보이나요?
• [기본]이외의 유효한 회원가입 시도의 경우, “/folder”로 이동하나요?
• [기본]이메일: [email protected], 비밀번호: codeit101 으로 로그인 시도할 경우, “/folder” 페이지로 이동하나요?
• [기본]비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지가 보이나요?
• [기본]이외의 로그인 시도의 경우 이메일, 비밀번호 input에 빨강색 테두리와 각각의 input아래에 “이메일을 확인해주세요.”, “비밀번호를 확인해주세요.” 빨강색 에러 메세지가 보이나요?
• [기본]회원가입 버튼 클릭 또는 Enter키 입력으로 회원가입 되나요?

심화

• [심화]눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 하나요?
• [심화]비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이나요?
• [심화]로그인, 회원가입 페이지에 공통적으로 사용하는 로직이 있다면, 반복하지 않고 공통된 로직을 모듈로 분리해 사용했나요?

주요 변경사항

스크린샷

멘토에게

• 로그인 버튼과 관련된 이벤트는 다 못했습니다.
• 눈 모양버튼을 몇번 누르면 이미지가 깨집니다.
• 입력박스 아래 span이 추가되면서 에러 메시지가 보이게 했는데 박스들의 위치가 조금씩 틀어지는 것 같습니다.
• html 파일에 하나의 javaScript 파일만 연결한다고 들었는데 어떻게 분리하고 묶어서 특정 하나를 연결시켜야할지 모르겠습니다.

[lunaticscode]

import { userEmail, resetErr, printErr } from "./signIn_email.js";

[lunaticscode]

resetErr, printErr 함수도 signIn_email.js 파일에서 export 되있는 상태이니 저렇게 적어주시고,

앞으로 js 파일명을 적으실때는 Camel Case, Snake Case 둘 중 하나로 통일해주세요.

[sooki88]

파일명 통일하겠습니다!

[lunaticscode]

굳이 두가지로 분리할 필요 없어 보입니다.

signInBtn.addEventListener( 'click', function(e) {
     e.preventDefault();
     signInChk();
});

[lunaticscode]

잘 생각해보시면 useEmail 값이 없을 때는 코드 자체를 실행시키지 않으면 됩니다.

그리고 regex 는 추가적으로 재선언이 일어나지 않는 변수이기 때문에 const 예약어로 선언해주세요.(+ 추가적으로 함수안에 있을 필요 없는 친구입니다.)

const regex = new RegExp('')
function emailChk() {
  if(!userEmail.value) return;

  if(!regex.test(userEmail.value)) {
    // .... 
  }
}

[sooki88]

아! return을 이렇게 사용할수도 있군요!

[lunaticscode]

• 눈 모양버튼을 몇번 누르면 이미지가 깨집니다.
  : 이건 멘토링 때 직접 화면으로 보면서 진행할게요.
• 입력박스 아래 span이 추가되면서 에러 메시지가 보이게 했는데 박스들의 위치가 조금씩 틀어지는 것 같습니다.
  : 얘도 마찬가지.
• html 파일에 하나의 javaScript 파일만 연결한다고 들었는데 어떻게 분리하고 묶어서 특정 하나를 연결시켜야할지 모르겠습니다.
  : 기본적으로 아래처럼 묶습니다.

     /utils (=> 각 파일에서 쓸 공통 js 코드)
          /validator.js 
          /error.js
     /signup
          /index.html
          /signup.js   
          /signup.css
     /signin
          /index.html
          /signin.js
          /signin.css