[김수영] Sprint4 #59

swim-kim · 2024-08-30T17:18:28Z

요구사항

기본

로그인

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

심화

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

배포 주소

https://glistening-bavarois-79cc7f.netlify.app/login
https://glistening-bavarois-79cc7f.netlify.app/signup

…sion into Basic-김수영

…nd/10-Sprint-Mission into Basic-김수영-week4

GANGYIKIM

수영님 4번째 스프린트 미션 고생하셨습니다.
이전 리뷰 반영하신것도, commit 쪼개신것도 좋습니다.
아래는 전반적인 리뷰사항입니다.

동일한 사항에 대해서는 한번만 코멘트를 답니다. 비슷한 경우를 찾아서 변경해보세요~
변수명, 함수명에 대해 조금더 고민해보시면 좋겠습니다. button이 아니라 어떤 버튼인지, is로 시작하는 변수는 boolean값으로 한다던지, 지엽적인 변수는 사용하는 위치에 선언하신다던지 가독성을 위해 조금더 고민해보시면 더 좋을 것 같습니다.
auth.js파일 하나로 login, signup에서의 validation 로직을 같이 처리하셨는데, 공통되는 함수들은 따로 분리하고, login, signUp 로직을 분리하셔도 좋을 것 같습니다.

GANGYIKIM · 2024-09-02T02:39:27Z

login.html

@@ -64,6 +75,6 @@
        </div>
    </div>

-
+    <script src="script/auth.js"></script>    


P2:
HTML 문서 다운로드 후 JS가 다운로드 되게 하단에 배치하신 것 같은데

하단에 배치된 스크립트는 구문분석 순서상 추후에 다운로드 되게 만들어주지만 일반적으로 스크립트 태그가 위치되는 head 요소가 아니므로 가독성 측면에서 단점이 있고 이러한 동작은 스크립트 자체 속성을 통해 이끌어 낼 수 있으므로 script async, defer 속성 사용을 추천드립니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/script#defer
https://ko.javascript.info/script-async-defer

GANGYIKIM · 2024-09-02T02:47:20Z

script/auth.js

+// 처음에 비활성화 되도록
+submitButtonInvalidate();  


P3:
처음에 로그인, 회원가입 버튼이 비활성화되어 있길 원하시면
button에 disabled속성을 true로 해주시는게 더 좋을 것 같습니다.
자바스크립트로 처리하는 것보다 명시적이라 동작 파악에도 더 좋습니다.

GANGYIKIM · 2024-09-02T02:49:05Z

script/auth.js

+    if (isPasswordVisible === "text") {
+        passwordInput.type = "password";
+        visibilityIcon.src = "../img/btn_visibility_off.png";
+    } else {
+        passwordInput.type = "text";
+        visibilityIcon.src = "../img/btn_visibility_on.png";
+    }


P3:
elary return 문을 사용하셔도 좋겠습니다.

Suggested change

if (isPasswordVisible === "text") {

passwordInput.type = "password";

visibilityIcon.src = "../img/btn_visibility_off.png";

} else {

passwordInput.type = "text";

visibilityIcon.src = "../img/btn_visibility_on.png";

}

if (isPasswordVisible === "text") {

passwordInput.type = "password";

visibilityIcon.src = "../img/btn_visibility_off.png";

return;

}

passwordInput.type = "text";

visibilityIcon.src = "../img/btn_visibility_on.png";

이렇게도 작성 가능합니다.

passwordInput.type = isPasswordVisible ? "password" : "text"; visibilityIcon.src = isPasswordVisible? "../img/btn_visibility_off.png" : "../img/btn_visibility_on.png";

GANGYIKIM · 2024-09-02T02:50:33Z

script/auth.js

+    const button = event.currentTarget; 
+    const passwordInput = button.previousElementSibling;
+    const visibilityIcon = button;
+    const isPasswordVisible = passwordInput.type;


P1:
is로 시작하는 변수는 boolean값으로 하시는것이 좋습니다.

Suggested change

const isPasswordVisible = passwordInput.type;

const isPasswordVisible = passwordInput.type === 'text';

GANGYIKIM · 2024-09-02T02:53:21Z

script/auth.js

@@ -0,0 +1,165 @@
+const loginForm = document.getElementById('login-form');
+const signupForm = document.getElementById('signup-form');


P1:

해당 변수의 경우 submitButtonInvalidate 함수에서만 사용하므로 해당 함수 내부에서 선언해주세요.
전역으로 변수를 선언해서 사용하면 해당 변수의 범위가 너무 넓고, 나중에 코드 파악하기가 어려워집니다.

GANGYIKIM · 2024-09-02T02:54:39Z

script/auth.js

+if (passwordInput) {
+    passwordInput.addEventListener("focusout", checkPassword);
+}


P1:
이벤트를 연결하는 코드들이 함수 선언문 사이사이에 들어가 있어서 코드 파악이 어렵습니다.
가능하면 변수 선언 => 함수 선언 => 이벤트 바인딩문 과 같은 순서처럼 관련있는 코드끼리 기준을 정해서 묶어 작성하시는 것을 추천드립니다.

GANGYIKIM · 2024-09-02T04:05:24Z

script/auth.js

+function submitButtonInvalidate() {
+    if (signupForm) {
+        if (isEmailValidate && isPasswordValidate && isPasswordConfirmValidate && isNameValidate) {
+            signupButton.disabled = false;
+            window.location.href="/login.html";
+        } else {
+            signupButton.disabled = true;
+        }
+    } else if (loginForm) {
+        if (isEmailValidate && isPasswordValidate) {
+            loginButton.disabled = false;
+            window.location.href="/items.html";
+        } else {
+            loginButton.disabled = true;
+        }
+    }
+}


P2:
중첩 if 문은 코드파악하기 어렵게 만듭니다.
가능하면 아래와 같이 너무 중첩되지 않게 작성해주세요.

Suggested change

function submitButtonInvalidate() {

if (signupForm) {

if (isEmailValidate && isPasswordValidate && isPasswordConfirmValidate && isNameValidate) {

signupButton.disabled = false;

window.location.href="/login.html";

} else {

signupButton.disabled = true;

}

} else if (loginForm) {

if (isEmailValidate && isPasswordValidate) {

loginButton.disabled = false;

window.location.href="/items.html";

} else {

loginButton.disabled = true;

}

}

}

function initSignupForm() {

const isValid = isEmailValidate && isPasswordValidate && isPasswordConfirmValidate && isNameValidate;

// 이코드가 잘 이해가 안됩니다. 버튼의 disabled설정이 바뀌는건 input 값이 변경될때마다 check해서 값이 valid하면 disabled를 변경해줘야하고, 페이지 이동을 버튼 click 이벤트가 발생했을때 이동되야하는거 아닌가 싶네요.

if (isValid) {

signupButton.disabled = false;

window.location.href="/login.html";

return;

}

signupButton.disabled = true;

}

function initLoginForm() {

const isValid = isEmailValidate && isPasswordValidate

if (isValid) {

loginButton.disabled = false;

window.location.href="/items.html";

return;

}

loginButton.disabled = true;

}

// 조건 모두 충족 시 로그인, 회원가입 버튼 활성화

function submitButtonInvalidate() {

const loginForm = document.getElementById("login-form");

const signupForm = document.getElementById("signup-form");

if (signupForm) initSignupForm()

if (loginForm) initLoginForm()

}

swim-kim added 23 commits August 10, 2024 12:26

feat: 랜딩페이지

6b762c1

fixed untracked files

e366aaa

style: 불필요한 font 스타일 코드 수정

9da6ab9

refactor: 클래스 네이밍

87e6663

feat:header고정

1164120

feat: 로그인

b7c1878

feat:회원가입

373703f

fix:페이지 루트 수정

4186fb8

Merge branch 'Basic-김수영' of https://github.com/swim-kim/10-Sprint-Mis…

08b778c

…sion into Basic-김수영

refactor: 랜딩페이지 section ,footer

7fe1ea6

feat : tablet display

c21468a

feat: landing page mobile display

2af34b8

feat: auth page mobile display

a67c881

feat:줄바꿈 수정

8bf77b0

feat: meta tag

5a06e0b

feat:meta tag

5f9477c

chore: github action

b2e48d7

Merge branch 'Basic-김수영' of https://github.com/codeit-bootcamp-fronte…

698768b

…nd/10-Sprint-Mission into Basic-김수영-week4

feat : login, signup meta tag

c6f71c9

feat : login email,password validation

63bc13f

feat: signup email, password, nickname validation

12bc52d

feat : login, signup password visibility

d1d20c6

docs : 주석 수정

be1e7fe

swim-kim requested a review from GANGYIKIM August 30, 2024 17:19

swim-kim self-assigned this Aug 30, 2024

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

GANGYIKIM approved these changes Sep 2, 2024

View reviewed changes

GANGYIKIM merged commit 4038f2e into codeit-bootcamp-frontend:Basic-김수영 Sep 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[김수영] Sprint4 #59

[김수영] Sprint4 #59

swim-kim commented Aug 30, 2024 •

edited

Loading

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

		// 처음에 비활성화 되도록
		submitButtonInvalidate();

	const isPasswordVisible = passwordInput.type;
	const isPasswordVisible = passwordInput.type === 'text';

		@@ -0,0 +1,165 @@
		const loginForm = document.getElementById('login-form');
		const signupForm = document.getElementById('signup-form');

[김수영] Sprint4 #59

[김수영] Sprint4 #59

Conversation

swim-kim commented Aug 30, 2024 • edited Loading

요구사항

기본

심화

배포 주소

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

swim-kim commented Aug 30, 2024 •

edited

Loading