[김미진]week4

[mijin0928]

요구사항

기본

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

심화

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

주요 변경사항

• 3주차 위클리미션 수정사항 반영
• input 값 유효성 검사
• input 오류 메세지
• 로그인 버튼 클릭 시 input값 일치 여부 확인 후 페이지 이동
• 회원가입 버튼 클릭 시 가입된 이메일이 있을 경우 확인 후 페이지 이동
• 비밀번호 눈 클릭 시 이미지 변경 및 input type 변경

스크린샷

멘토에게

• lastElementChild나 firstElementChild 같은 구체적으로 요소를 선택하는 프로퍼티를 사용할 때 html구조가 바뀌면 js가 동작하지 않을 것 같은데 사용하지 않고 코드를 짜는 것이 좋을까요?
• 제가 생각한 방식은 form-box에 각각의 클래스를 추가(email, pw, pw-check)하여 추가한 클래스에 해당하는 경우에 이벤트가 동작되도록 구현하였는데 이렇게 하는게 좋은 방식인지 잘 모르겠습니다.
• 공통된 로직을 모듈로 분리해보려고 했는데 제가 모듈을 잘못한건지 이벤트리스너에 대한 오류가 발생하여 모듈을 하지 못했습니다. 어떻게 해야하나요?
• form-box로 이벤트를 제어하기 위해 form-box를 반복문으로 돌렸는데 반복문으로 돌리는 코드가 여러번 중복으로 작성이 되서 비효율적이라는 생각이 듭니다. 이를 개선하려면 어떻게 해야할까요?

[lunaticscode]

validate 함수는 formBox.forEach 외부에 있어야합니다. 이렇게 되면 el 갯수만큼 해당 함수가 재선언되기 때문에 불필요한 메모리 사용이 됩니다.

제일 좋은 방법은 해당 validate 함수를 utils.js 라는 파일을 만들어서 내부에 선언해주고, 해당 함수를 export 해주면 좋겠죠.

[lunaticscode]

서비스를 운영하는 입장에서 보면 현재 html 구조로 고정된다는 보장이 없습니다. 그렇다면 parentElement, lastElementChild와 같이 노드의 상대적인 구조를 파악하는 코드는 html 구조가 변경된다면 의도하지 않은 동작이 일어날 가능성이 높겠죠.

애초에 input에 대한 제어를 깔끔하게 하고싶다면, 각 input 태그에 공통적인 class 명을 달아주시면 됩니다.

[lunaticscode]

이 함수는 signup.js에서도 쓰이는걸로 보아 공통 함수로 다른 파일(ex. utils.js)에서 선언해주면 좋을 것 같네요.

[lunaticscode]

• lastElementChild나 firstElementChild 같은 구체적으로 요소를 선택하는 프로퍼티를 사용할 때 html구조가 바뀌면 js가 동작하지 않을 것 같은데 사용하지 않고 코드를 짜는 것이 좋을까요?
  : 네, 맞습니다. 내용은 코드리뷰 쪽 참고해주시면 됩니다.

• 제가 생각한 방식은 form-box에 각각의 클래스를 추가(email, pw, pw-check)하여 추가한 클래스에 해당하는 경우에 이벤트가 동작되도록 구현하였는데 이렇게 하는게 좋은 방식인지 잘 모르겠습니다.
  : 틀렸다고는 말할 수 없지만 첫번째 질문과 같은 맥락에서 결국 현재 코드는 form-box 내부의 input element를 찾아서 이벤트를 붙여주는 상황이라 기본적으로 input 태그를 한번 더 찾아야되는 로직이 들어가야 합니다. 원초적으로 핸들링하려고하는 주체는 input이라는 것을 한번 더 생각해주시면 좋습니다.

• 공통된 로직을 모듈로 분리해보려고 했는데 제가 모듈을 잘못한건지 이벤트리스너에 대한 오류가 발생하여 모듈을 하지 못했습니다. 어떻게 해야하나요?
  : 일단 현재 올라온 코드에서는 공통 파일이 보이지 않지만, 해당 파일을 쓰기 위해서는 type=module으로 선언된 스크립트에서만 호출 가능합니다. 그리고 vscode의 Go Live를 켜놓은 상태에서 실행해주시면 됩니다.

• form-box로 이벤트를 제어하기 위해 form-box를 반복문으로 돌렸는데 반복문으로 돌리는 코드가 여러번 중복으로 작성이 되서 비효율적이라는 생각이 듭니다. 이를 개선하려면 어떻게 해야할까요?
  : 현재 방식에서는 반복문을 어떻게든 써야하는 상황이지만, 반복문을 돌려서 element에 event listener를 붙이는 로직 자체는 공통 함수로 묵어낼 수 있습니다.