Conversation
| // login page eye Icon control | ||
| function pwShow() { | ||
| var elem = document.getElementById("eyeChange"); | ||
| var passwordInput = document.getElementById("userPassword"); | ||
| const elem = document.getElementById("eyeChange"); |
There was a problem hiding this comment.
elem 라는 변수명 대신 eyeChangeElement 또는 eyeChangeButton, eyeChange 같이 네이밍을 구체적으로 해주시면
추후 작업하실 때나 협업하실 때 어떤 기능인지 한눈에 보여 좋습니다
| @@ -42,8 +53,8 @@ function pwShow() { | |||
| } | |||
| } | |||
| function pwCheckShow() { | |||
| var elem = document.getElementById("eyeChangeCheck"); | |||
| var passwordInput = document.getElementById("pwCheck"); | |||
| const elem = document.getElementById("eyeChangeCheck"); | |||
There was a problem hiding this comment.
이부분도 마찬가지로 변수명을 구체적으로 고민해보세요!
| let emailError = document.getElementById('errorEmail'); | ||
|
|
||
| // 에러 메시지 요소가 없으면 생성 | ||
| if (!emailError) { |
There was a problem hiding this comment.
에러 요소를 추가해주는 방식도 있지만
html 을 자바스크립트에서 동적으로 생성하지 않아도 되는 경우에는 필요한 html 들을 미리 작업해놓고
숨김 상태로 처리한 후 상황이 발생했을 때 보여지도록 처리하는게 더 깔끔하게 처리 할 수 있어 보입니다!
|
|
||
| // 비밀번호 유효성 검사 | ||
| function validatePassword() { | ||
| const passwordInput = document.getElementById('userPassword'); |
There was a problem hiding this comment.
이부분도 에러가 표기되는 영역을 html 로 미리 생성해두고 처리해주시면 좋을거 같습니다!
| } | ||
|
|
||
| // 닉네임 입력 시 검사 함수 호출 | ||
| document.getElementById('userNickname').addEventListener('input', validateNickname); |
There was a problem hiding this comment.
js 에서 이벤트 리스너를 추가해주셔도 되지만 간단한 input 레벨들을 관리할 땐
html 속성을 이용하여 함수로 처리해주시면 더 가독성있고 깔끔하게 처리 가능합니다.
| const isPasswordValid = validatePassword(); | ||
| const isPasswordConfirmValid = validatePasswordConfirm(); | ||
|
|
||
| if (isEmailValid && isNicknameValid && isPasswordValid && isPasswordConfirmValid) { |
There was a problem hiding this comment.
각 함수의 결과를 통해 유효성 검증을 해주시는 부분은 좋습니다!
추가로 제안드리고 싶은 부분은
각 검증을 하는 함수들인 validateEmail, validae... 에서 성공과 실패에 대해 명시적으로 boolean 값을 리턴해주시면 좋겠습니다
예를들어 유효성체크가 성공한 경우 validateEmail() 에서 true , 실패한 경우 false 를 명시적으로 반환처리를 해주시면 결과값을 토대로 유효성을 체크한다는 것을 알 수 있을거 같습니다.
현재는 타입이 없어서 동작하는데 이상이 없지만 추후 type 을 배우실거기 때문에 미리미리 습관을 들여놓으시는걸 권장드립니다.
|
이번 스프린트도 수고 많으셨습니다 주영님! 아직 마무리 안된 부분들은 내일까지 꼭 올려주세요 |
kirinnim
added
미완성🫠
✨ Sprint mission 1&2 ✨
🌐 라이브 사이트 확인하기 🌐
😃기본요구사항 바로가기
공통 | 로그인페이지 | 회원가입페이지
😳심화요구사항 바로가기
공통 | 랜딩페이지 | 로그인, 회원가입 페이지 공통
📔참고사항/멘토링
주요변경사항 | 스크린샷 | 🔥멘토에게🔥
요구사항
기본 요구사항
공통
로그인, 회원가입 페이지 공통
빨강색 에러 메세지를 보입니다.
아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
const USER_DATA = [ { email: '[email protected]', password: "codeit101!" }, { email: '[email protected]', password: "codeit202!" }, { email: '[email protected]', password: "codeit303!" }, { email: '[email protected]', password: "codeit404!" }, { email: '[email protected]', password: "codeit505!" }, { email: '[email protected]', password: "codeit606!" }, ];로그인페이지
- 만약 입력한 이메일이 데이터베이스(USER_DATA)에 없거나, 이메일은 일치하지만 비밀번호가 틀린 경우, '비밀번호가 일치하지 않습니다.'라는 메시지를 alert로 표시합니다
- 만약 입력한 이메일이 데이터베이스에 존재하고, 비밀번호도 일치할 경우, “/items”로 이동합니다.
회원가입 페이지
그 후에는 다음 조건에 따라 회원가입 가능 여부를 alert로 알려주세요.
- 입력한 이메일이 이미 데이터베이스(USER_DATA)에 존재하는 경우, '사용 중인 이메일입니다'라는 메시지를 alert로 표시합니다.
- 입력한 이메일이 데이터베이스(USER_DATA)에 없는 경우, 회원가입이 성공적으로 처리되었으므로 로그인 페이지(”/login”)로 이동합니다.
심화 요구사항
공통
랜딩 페이지 메타 태그를 설정합니다.
랜딩페이지
- PC: 1200px 이상
- Tablet: 744px 이상 ~ 1199px 이하
- Mobile: 375px 이상 ~ 743px 이하
- 375px 미만 사이즈의 디자인은 고려하지 않습니다.
(이때 가로가 커지는 비율에 맞춰 세로도 커져야 합니다.)
SNS 아이콘들이 있는 영역의 사이 간격이 커집니다.
로그인, 회원가입 페이지 공통
기본 상태는 비밀번호 숨김으로 설정합니다.
기타참고사항
주요 변경사항
스크린샷
멘토에게