Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
seongseonko
added
매운맛🔥
…ekly-Mission into part1-고성선-week4
yujo11
approved these changes
Nov 14, 2023
There was a problem hiding this comment.
workflow는 직접 작성하신건가요 오... 👍 👍 👍
Comment on lines
+1
to
+6
| //사용중인 유저 데이터 | ||
| const userData = [ | ||
| { email: "[email protected]", password: "codeit101" }, | ||
| { email: "[email protected]", password: "dksdkffuwna1" }, | ||
| ]; | ||
| export default userData; |
There was a problem hiding this comment.
이렇게 모아서 관리하니 좋네요 ㅎㅎ 👍 👍 👍 💯
Comment on lines
+2
to
+5
| const userData = [ | ||
| { email: "[email protected]", password: "codeit101" }, | ||
| { email: "[email protected]", password: "dksdkffuwna1" }, | ||
| ]; |
There was a problem hiding this comment.
일반적으로 상수값을 쓸 때는 일반 변수와 다르게 PASCAL_CASE 등을 사용해서 상수임을 명확하게 드러내는걸 권장하는데요. 참고 하시면 좋을거 같네용 ㅎㅎ
Suggested change
| const userData = [ | |
| { email: "[email protected]", password: "codeit101" }, | |
| { email: "[email protected]", password: "dksdkffuwna1" }, | |
| ]; | |
| const USER_DATA = [ | |
| { email: "[email protected]", password: "codeit101" }, | |
| { email: "[email protected]", password: "dksdkffuwna1" }, | |
| ]; |
Comment on lines
+2
to
+5
|
|
||
| function createTag(target, message) { | ||
| //태그 생성 | ||
| if (target.nextSibling) { |
There was a problem hiding this comment.
형제요소 등을 기준으로 요소를 찾거나 조건문을 거는 경우에는 구조의 변경에 굉장히 취약하고, 코드를 읽을 때 가독성도 떨어지는데요. 다른 방법을 고민해보시면 좋을거 같습니다!
| function passwordCheck(e) { | ||
| //패스워드 확인 함수 | ||
| if (e.type === "focusout" || (e.type === "keyup" && e.key === "Enter")) { | ||
| let input = e.target; |
Comment on lines
+6
to
+8
| function emailCheck(e) { | ||
| //이메일 확인 함수 | ||
| if (e.type === "focusout" || (e.type === "keyup" && e.key === "Enter")) { |
There was a problem hiding this comment.
이런 식으로 구조분해할당을 이용해보셔도 좋을거 같습니다
Suggested change
| function emailCheck(e) { | |
| //이메일 확인 함수 | |
| if (e.type === "focusout" || (e.type === "keyup" && e.key === "Enter")) { | |
| function emailCheck({ type, key }) { | |
| //이메일 확인 함수 | |
| if (type === "focusout" || (type === "keyup" && key === "Enter")) { |
Comment on lines
+40
to
+50
| if (emailEnable && passwordEnable) { | ||
| if (user === undefined) { | ||
| createTag(inputEmail, "존재하지 않는 이메일 입니다."); | ||
| e.preventDefault(); | ||
| } else if (user.password !== inputPassword.value) { | ||
| createTag(inputPassword, "비밀번호가 틀렸습니다."); | ||
| e.preventDefault(); | ||
| } | ||
| } else { | ||
| e.preventDefault(); | ||
| } |
| function passwordOpen() { | ||
| //패스워드 보이게 안보이게 하는 기능 추가 | ||
| const icon = | ||
| eyeIcon[0].getAttribute("src") === "./images/eye_off.svg" |
There was a problem hiding this comment.
배경지식 없이 코드를 읽는 입장에서는 eyeIcon의 0번째 인덱스에 어떤 값이 들어있는지 알기가 어려운데요. 더 좋은 방법은 없을까요?
| ) { | ||
| createTag(input, "비밀번호를 입력해주세요"); | ||
| } else if ( | ||
| input.value.length < 9 || |
There was a problem hiding this comment.
9와 같은 매직 넘버는 아무런 정보도 전달할 수 없기 때문에 적절하게 상수화해서 사용하는걸 추천드리고 싶습니다!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
[기본]이메일 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키 입력으로 회원가입 되나요?
[x][기본]이메일, 비밀번호 input에 에러 관련 디자인을 Components 영역의 에러 케이스로 적용했나요?
심화
[심화]눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 하나요?
[심화]비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이나요?
[심화]로그인, 회원가입 페이지에 공통적으로 사용하는 로직이 있다면, 반복하지 않고 공통된 로직을 모듈로 분리해 사용했나요?
기본
주요 변경사항
https://seongseonko.netlify.app/
로그인 테스트용 아이디 [email protected] // codeit101 입니당
스크린샷
멘토에게
-휴.. 완성..