[김희진] sprint4 #58

devmanta · 2024-08-30T07:12:38Z

요구사항

기본

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

심화

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

devmanta · 2024-09-02T04:26:48Z

src/login.js

+  const emailErrorMsg = getEmailErrorMsg(emailInput.value);
+  isEmailValid = !emailErrorMsg;
+  setErrorMessage(emailError, emailErrorMsg ?? '');
+  updateErrorDisplay(emailInput, emailError, !!emailErrorMsg);


gpt추천으로 이렇게 쓰긴했는데, !! 이렇게 하면 boolean으로만 바꿔주는 용도 인것으로 생각되어지는데요..
조건문에서 truthy여부만 판단하믄거라면 사용안하는게 나을까요?

boolean 타입으로 변환하고 싶을 때 이렇게 사용하니 사용법 자체는 괜찮습니다.
다만 isEmailValid라는 boolean 변수가 이미 잇으니 이것을 활용하는게 더 가독성측면에서 좋을 것 같습니다.

updateErrorDisplay(emailInput, emailError, !isEmailValid);

GANGYIKIM

희진님 이번 스프린트 미션 고생하셨습니다.
JS를 사용한 첫 미션이었는데 잘 작성해주셔서 읽기 편했습니다.
아래는 리뷰한 파일에 대한 전반적인 리뷰 사항입니다.
참고해주세요~

동일한 사항에 대해서는 한번만 코멘트를 답니다. 비슷한 경우를 찾아서 변경해보세요~
최대한 반복을 피해서 재사용하려고 하신것이 느껴집니다. login, signUp 관련 js를 분리하신 것도 좋습니다. 다만 더 공통화해서 사용할 수 잇는 부분이 보이니 한번 고민해보시면 좋을 것 같습니다.
특정 함수에서만 사용된다면 지역변수로 선언하시는것이 코드파악에 더 좋을 것 같습니다.

GANGYIKIM · 2024-09-02T07:23:13Z

login/index.html

-              <input id="password" type="password" name="password" class="form__input" placeholder="비밀번호를 입력해주세요" />
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="visible-icon">
+              <input id="password" type="password" name="password" class="form-input" placeholder="비밀번호를 입력해주세요" />
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="invisible-icon" aria-label="비밀번호 보기">


P2:
aria-label은 상호작용이 가능한 요소에 어떤 요소인지 설명하는 속성입니다.
해당 요소는 상호작용이 가능하니 아래처럼 하면 더 좋을 것 같습니다.

Suggested change

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="invisible-icon" aria-label="비밀번호 보기">

// button 상태에 따라 JS로 aria-label을 바꿔주면 좋을 것 같습니다.

<button type='button' "invisible-icon" aria-label="비밀번호 보기">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-description='눈 감은 아이콘'> ... </svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-description='눈 뜬 아이콘'> ... </svg>

</button>

GANGYIKIM · 2024-09-02T07:30:07Z

src/validationConstants.js

P3:
상수는 대문자로 작성하시는 것을 권해드립니다.
제 취향이기도하지만 일반적인 경우에도 권장되는 방식입니다~

https://google.github.io/styleguide/javascriptguide.xml?showone=Constants#Constants

GANGYIKIM · 2024-09-02T07:42:43Z

src/validationConstants.js

+export const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
+export const emptyEmailMsg = '이메일을 입력해주세요.';
+export const invalidEmailMsg = '잘못된 이메일 형식입니다.';
+export const emptyNicknameMsg = '닉네임을 입력해주세요.';
+export const emptyPasswordMsg = '비밀번호를 입력해주세요.';
+export const invalidPasswordLengthMsg = '비밀번호를 8자 이상 입력해주세요.';
+export const passwordNotMatch = '비밀번호가 일치하지 않습니다..';
+export const passwordMinLength = 8;


P3:
관련된 친구들끼리 묶어도 좋을 것 같습니다.

export const passwordMinLength = 8; export const ERROR_MESSAGES = { EMPTY_EMAIL: '이메일을 입력해주세요.', INVALID_EMAIL: '잘못된 이메일 형식입니다.', EMPTY_NICKNAME: '닉네임을 입력해주세요.', EMPTY_PASSWORD: '비밀번호를 입력해주세요.', INVALID_PASSWORD_LENGTH: '비밀번호를 8자 이상 입력해주세요.', PASSWORD_NOT_MATCH: '비밀번호가 일치하지 않습니다..', // 아련한 에러 문구네요~ }

GANGYIKIM · 2024-09-02T07:44:51Z

src/login.js

@@ -0,0 +1,87 @@
+import { getEmailErrorMsg, getPasswordErrorMsg, getNicknameErrorMsg } from './validationErrorMessage.js';


P1:
사용하지 않는 것은 지워주세요.

Suggested change

import { getEmailErrorMsg, getPasswordErrorMsg, getNicknameErrorMsg } from './validationErrorMessage.js';

import { getEmailErrorMsg, getPasswordErrorMsg } from './validationErrorMessage.js';

GANGYIKIM · 2024-09-02T07:47:11Z

src/login.js

+
+// Elements
+const emailInput = document.querySelector('#email');
+const emailError = document.querySelector('#email + .input-validation-error');


P1:
지금으로는 크게 헷갈리지 않지만 기존의 변수명인 emailError의 경우 에러 메시지인지 에러 메시지가 나올 태그인지 알기어렵습니다.
아래처럼 좀 더 명확하게 명명해주시면 좋을 것 같습니다.
(제가 네이밍에는 크게 자신이 없어서 참고만해주세요~)

Suggested change

const emailError = document.querySelector('#email + .input-validation-error');

const emailErrorContainer = document.querySelector('#email + .input-validation-error');

GANGYIKIM · 2024-09-02T07:52:15Z

src/login.js

+  if (showError) {
+    inputElement.classList.add('error');
+    errorElement.style.visibility = 'visible';
+  } else {
+    inputElement.classList.remove('error');
+    errorElement.style.visibility = 'hidden';
+  }


P3:
아래 코드도 동일 동작합니다.

Suggested change

if (showError) {

inputElement.classList.add('error');

errorElement.style.visibility = 'visible';

} else {

inputElement.classList.remove('error');

errorElement.style.visibility = 'hidden';

}

if (showError) {

inputElement.classList.add('error');

errorElement.style.visibility = 'visible';

return;

}

inputElement.classList.remove('error');

errorElement.style.visibility = 'hidden';

GANGYIKIM · 2024-09-02T07:56:39Z

src/login.js

+visibleIcon.addEventListener('click', togglePasswordVisibility);
+invisibleIcon.addEventListener('click', togglePasswordVisibility);
+
+const form = document.querySelector('.form-login');


P1:
변수 선언문은 최상단에 두는 것이 코드파악에 더 좋을 것 같습니다

GANGYIKIM · 2024-09-02T08:02:18Z

src/login.js

+  const emailErrorMsg = getEmailErrorMsg(emailInput.value);
+  isEmailValid = !emailErrorMsg;
+  setErrorMessage(emailError, emailErrorMsg ?? '');
+  updateErrorDisplay(emailInput, emailError, !!emailErrorMsg);


boolean 타입으로 변환하고 싶을 때 이렇게 사용하니 사용법 자체는 괜찮습니다.
다만 isEmailValid라는 boolean 변수가 이미 잇으니 이것을 활용하는게 더 가독성측면에서 좋을 것 같습니다.

updateErrorDisplay(emailInput, emailError, !isEmailValid);

GANGYIKIM · 2024-09-02T08:04:31Z

src/signup.js

P2:
login.js와 겹치는 로직들이 많은 것 같습니다.
가능하면 반복 사용 되는 친구들은 분리해서 작성해주세요.
그래야 어떤 로직을 공유하고, 어떤 로직은 아닌지 파악하기 쉽습니다.

ex: updateErrorDisplay, setErrorMessage

GANGYIKIM · 2024-09-02T08:05:25Z

src/validationErrorMessage.js

P3:
유효성을 검사하고 관련 에러 메시지를 반환하는 함수끼리 묶어두신거 좋습니다 👍

devmanta added 12 commits August 29, 2024 11:30

fix: remove mobile footer margin left, add mobile min width

2c6eb9e

feat: add login validation

53960bc

feat: add show password toggle for login page

ef31dc8

fix: falsy to nullish

ef61144

refactor: rename validationjs to validationConstants

f882fe6

refactor: change icon png to svg

19c8b9c

feat: add signup verification

b03f641

refactor: rename password-verification to password-match

001e2e3

feat: add nickname validation, remove unused class

c276216

refactor: make validation function as module

8e4a65e

fix: svg file

b5003f9

refactor: import js file as absolute path

f5b9e7c

devmanta self-assigned this Aug 30, 2024

devmanta added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Aug 30, 2024

feat: add empty password validation

77669ac

GANGYIKIM self-requested a review September 2, 2024 02:25

devmanta commented Sep 2, 2024

View reviewed changes

GANGYIKIM approved these changes Sep 2, 2024

View reviewed changes

GANGYIKIM merged commit 3430052 into codeit-bootcamp-frontend:Basic-김희진 Sep 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[김희진] sprint4 #58

[김희진] sprint4 #58

devmanta commented Aug 30, 2024

devmanta Sep 2, 2024

GANGYIKIM Sep 2, 2024

GANGYIKIM left a comment

GANGYIKIM Sep 2, 2024

GANGYIKIM Sep 2, 2024

GANGYIKIM Sep 2, 2024

GANGYIKIM Sep 2, 2024

GANGYIKIM Sep 2, 2024

GANGYIKIM Sep 2, 2024

GANGYIKIM Sep 2, 2024

GANGYIKIM Sep 2, 2024

GANGYIKIM Sep 2, 2024

GANGYIKIM Sep 2, 2024

-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="invisible-icon" aria-label="비밀번호 보기">
+              // button 상태에 따라 JS로 aria-label을 바꿔주면 좋을 것 같습니다.
+              <button type='button' "invisible-icon" aria-label="비밀번호 보기">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-description='눈 감은 아이콘'> ... </svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-description='눈 뜬 아이콘'> ... </svg>
+              </button>

		@@ -0,0 +1,87 @@
		import { getEmailErrorMsg, getPasswordErrorMsg, getNicknameErrorMsg } from './validationErrorMessage.js';

	const emailError = document.querySelector('#email + .input-validation-error');
	const emailErrorContainer = document.querySelector('#email + .input-validation-error');

[김희진] sprint4 #58

[김희진] sprint4 #58

Conversation

devmanta commented Aug 30, 2024

요구사항

기본

로그인

회원가입

심화

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GANGYIKIM left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment