[최재호] sprint4 #126
There are no files selected for viewing
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| export function ErrorCheck(code, data = "") { | ||
| const messageStyle = { | ||
| color: "red", | ||
| fontSize: "20px", | ||
| marginTop: "1px", | ||
| display: "block", | ||
| } | ||
|
|
||
| const inputBorder = "2px solid red" | ||
|
|
||
| if (code == "email") { | ||
|
Collaborator
There was a problem hiding this comment. if문 중첩이 있어서 가독성이 많이 떨어지고, 하나의 함수가 관여하는일이 너무 많아서 유지보수가 어려워보입니다. 이 두가지를 해결하기위해서는 함수가 단일 책임을 가질수있도록 분리해보시는게 좋습니다. 우선 이런 방식은 어떨까요? // 공통 스타일 정의
const errorStyle = {
color: "red",
fontSize: "20px",
marginTop: "1px",
display: "block",
};
const successStyle = {
color: "",
fontSize: "",
marginTop: "",
};
const errorBorder = "2px solid red";
const successBorder = "";
// 유효성 검사 함수들
const validateEmail = (email) => {
if (!email) {
return {
error: true,
message: "이메일을 입력해주세요",
};
}
const regex = /^((?!\.)[\w\-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/;
const isValid = regex.test(email);
return {
error: !isValid,
message: isValid ? "" : "잘못된 이메일 형식 입니다.",
};
};
const validatePassword = (password) => {
if (!password) {
return {
error: true,
message: "비밀번호를 입력해주세요.",
};
}
const isValid = password.length > 8;
return {
error: !isValid,
message: isValid ? "" : "비밀번호를 8자 이상 입력해주세요.",
};
};
const validateNickname = (nickname) => {
const isValid = nickname.length >= 1;
return {
error: !isValid,
message: isValid ? "" : "닉네임을 입력해주세요.",
};
};
const validatePasswordCheck = (passwords) => {
const isValid = passwords.password1 === passwords.password2;
return {
error: !isValid,
message: isValid ? "" : "비밀번호가 일치하지 않습니다",
};
};
// 메인 함수
export function checkError(code, data = "") {
let validationResult;
switch (code) {
case "email":
validationResult = validateEmail(data);
break;
case "password":
validationResult = validatePassword(data);
break;
case "nickname":
validationResult = validateNickname(data);
break;
case "passwordCheck":
validationResult = validatePasswordCheck(data);
break;
default:
return {
error: false,
message: "",
messageStyle: successStyle,
inputBorder: successBorder,
};
}
return {
error: validationResult.error,
message: validationResult.message,
messageStyle: validationResult.error ? errorStyle : successStyle,
inputBorder: validationResult.error ? errorBorder : successBorder,
};
}
Collaborator
There was a problem hiding this comment. 이렇게 함수가 한번에 하나의 일을 할 수 있게끔 쪼개고 보니, 그렇다면 유효성 검사를 수행할때 재사용을 고려해 좀 더 통합적으로 관리될수있도록 만들어볼까요? 코드 예시를 들어드릴게요!
// validation.js - 검증 로직
export const validators = {
email: (value) => {
if (!value) return { isValid: false, message: '이메일을 입력해주세요' };
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
return { isValid: false, message: '올바른 이메일 형식이 아닙니다' };
}
return { isValid: true, message: '' };
},
nickname: (value) => {
if (!value) return { isValid: false, message: '닉네임을 입력해주세요' };
return { isValid: true, message: '' };
},
password: (value) => {
if (!value) return { isValid: false, message: '비밀번호를 입력해주세요' };
if (value.length < 8) {
return { isValid: false, message: '비밀번호는 8자 이상이어야 합니다' };
}
return { isValid: true, message: '' };
},
passwordCheck: (value, formValues) => {
if (!value) return { isValid: true, message: '' }; // 빈 값은 허용
if (value !== formValues.password) {
return { isValid: false, message: '비밀번호가 일치하지 않습니다' };
}
return { isValid: true, message: '' };
}
};
Collaborator
There was a problem hiding this comment. 이 방식은 이렇게 validation을 통합적으로 담당하는 객체를 만들고, checkError 함수에서는 이런식으로 사용해준다면 export function checkError(type, data = "") {
const validator = validators[type];
if (!validator) {
return {
error: false,
message: "",
messageStyle: successStyle,
inputBorder: successBorder,
};
}
const result = validator(data);
return {
error: !result.isValid,
message: result.message,
messageStyle: !result.isValid ? errorStyle : successStyle,
inputBorder: !result.isValid ? errorBorder : successBorder,
};
}개별적으로 다른 유효성 검사를 수행하던 함수들을 없애주고, switch case문도 사용하지않게 되니까 코드양이 훨씬 줄어들고, 읽기 수월해지고, 수정 및 확장에 용이해지고, 코드가 간결해지겠죠? |
||
| if (data.length <= 0) { | ||
| return { | ||
| error: true, | ||
| message: "이메일을 입력해주세요", | ||
| messageStyle, | ||
| inputBorder, | ||
| } | ||
| } else { | ||
| const regex = /^((?!\.)[\w\-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/ | ||
| const check = regex.test(data) | ||
| return check | ||
| ? { | ||
| error: false, | ||
| message: "", | ||
| messageStyle: { | ||
| color: "", | ||
| funtSize: "", | ||
| marginTop: "", | ||
| }, | ||
| inputBorder: "", | ||
| } | ||
| : { | ||
| error: true, | ||
| message: "잘못된 이메일 형식 입니다.", | ||
| messageStyle, | ||
| inputBorder, | ||
| } | ||
| } | ||
| } else if (code == "password") { | ||
| if (data.length <= 0) { | ||
| return { | ||
| error: true, | ||
| message: "비밀번호를 입력해주세요.", | ||
| messageStyle, | ||
| inputBorder, | ||
| } | ||
| } else { | ||
| return data.length > 8 | ||
| ? { | ||
| error: false, | ||
| message: "", | ||
| messageStyle: { | ||
| color: "", | ||
| funtSize: "", | ||
| marginTop: "", | ||
| }, | ||
| inputBorder: "", | ||
| } | ||
| : { | ||
| error: true, | ||
| message: "비밀번호를 8자 이상 입력해주세요.", | ||
| messageStyle, | ||
| inputBorder, | ||
| } | ||
| } | ||
| } else if (code == "nickname") { | ||
| return data.length >= 1 | ||
| ? { | ||
| error: false, | ||
| message: "", | ||
| messageStyle: { | ||
| color: "", | ||
| funtSize: "", | ||
| marginTop: "", | ||
| }, | ||
| inputBorder: "", | ||
| } | ||
| : { | ||
| error: true, | ||
| message: "닉네임을 입력해주세요.", | ||
| messageStyle, | ||
| inputBorder, | ||
| } | ||
| } else if (code == "passwordCheck") { | ||
| console.log(data) | ||
|
|
||
| return data["password1"] === data["password2"] | ||
| ? { | ||
| error: false, | ||
| message: "", | ||
| messageStyle: { | ||
| color: "", | ||
| funtSize: "", | ||
| marginTop: "", | ||
| }, | ||
| inputBorder: "", | ||
| } | ||
| : { | ||
| error: true, | ||
| message: "비밀번호가 일치하지 않습니다", | ||
| messageStyle, | ||
| inputBorder, | ||
| } | ||
| } | ||
| } | ||
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>item</title> | ||
| </head> | ||
| <body> | ||
| <h1>item page</h1> | ||
| </body> | ||
| </html> |
This file contains hidden or 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
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import { ErrorCheck } from "./error.js" | ||
| const loginButton = document.querySelector(".signup-button") | ||
| loginButton.disabled = true | ||
| loginButton.style.backgroundColor = "#9CA3AF" | ||
| let loginOk = false | ||
| let passwordOk = false | ||
|
|
||
| const emailInput = document.querySelector("#email-field") | ||
| const passwordLabel = document.querySelector('label[for="password"]') | ||
|
|
||
| const warningMessage1 = document.createElement("span") | ||
|
|
||
| passwordLabel.parentNode.insertBefore(warningMessage1, passwordLabel) | ||
|
|
||
| emailInput.addEventListener("focusout", (e) => { | ||
|
Collaborator
There was a problem hiding this comment. 이 함수도 위에서 얘기했던것처럼 하나의 함수가 너무 많은 일을 담당하고있어요.
세가지 함수로 작업을 쪼개서 리팩토링해볼까요? |
||
| const result = ErrorCheck("email", e.target.value) | ||
| console.log("passwordInput result : ", result) | ||
|
|
||
| if (result.error) { | ||
| warningMessage1.style.color = result.messageStyle.color | ||
| warningMessage1.style.fontSize = result.messageStyle.fontSize | ||
| warningMessage1.style.marginTop = result.messageStyle.marginTop | ||
| warningMessage1.style.display = result.messageStyle.display | ||
| emailInput.style.border = result.inputBorder | ||
| emailInput.style.marginBottom = 0 | ||
| warningMessage1.textContent = result.message | ||
| loginOk = false | ||
| loginButton.disabled = true | ||
| loginButton.style.backgroundColor = "#9CA3AF" | ||
| } else { | ||
| warningMessage1.style.color = result.messageStyle.color | ||
| warningMessage1.style.fontSize = result.messageStyle.fontSize | ||
| warningMessage1.style.marginTop = result.messageStyle.marginTop | ||
| warningMessage1.style.display = result.messageStyle.display | ||
| emailInput.style.border = result.inputBorder | ||
| warningMessage1.textContent = result.message | ||
| loginOk = true | ||
|
|
||
| if (loginOk && passwordOk) { | ||
| loginButton.disabled = false | ||
| loginButton.style.backgroundColor = "#3692FF" | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| const passwordInput = document.querySelector("#password-field") | ||
| const inputWrapper = document.querySelector(".input-wrapper") | ||
|
|
||
| const warningMessage2 = document.createElement("span") | ||
|
|
||
| inputWrapper.appendChild(warningMessage2, passwordLabel) | ||
|
|
||
| passwordInput.addEventListener("focusout", (e) => { | ||
| const result = ErrorCheck("password", e.target.value) | ||
| console.log("passwordInput result : ", result) | ||
|
|
||
| if (result.error) { | ||
| warningMessage2.style.color = result.messageStyle.color | ||
| warningMessage2.style.fontSize = result.messageStyle.fontSize | ||
| warningMessage2.style.marginTop = result.messageStyle.marginTop | ||
| warningMessage2.style.display = result.messageStyle.display | ||
| passwordInput.style.border = result.inputBorder | ||
| passwordInput.style.marginBottom = 0 | ||
| warningMessage2.textContent = result.message | ||
| passwordOk = false | ||
| loginButton.disabled = true | ||
| loginButton.style.backgroundColor = "#9CA3AF" | ||
| } else { | ||
| warningMessage2.style.color = result.messageStyle.color | ||
| warningMessage2.style.fontSize = result.messageStyle.fontSize | ||
| warningMessage2.style.marginTop = result.messageStyle.marginTop | ||
| warningMessage2.style.display = result.messageStyle.display | ||
| passwordInput.style.border = result.inputBorder | ||
| warningMessage2.textContent = result.message | ||
| passwordOk = true | ||
|
|
||
| if (loginOk && passwordOk) { | ||
| loginButton.disabled = false | ||
| loginButton.style.backgroundColor = "#3692FF" | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| const passwordEyeInput = document.querySelector("#password-field") | ||
| const eyeIconWrapper = document.querySelector(".icon-eye") | ||
| const eyeIcon = document.querySelector("#eye-icon") | ||
| const togglePasswordSpan = document.querySelector(".toggle-password") | ||
| togglePasswordSpan.style.display = "none" | ||
|
|
||
| eyeIconWrapper.addEventListener("click", () => { | ||
| const isPasswordVisible = passwordEyeInput.type === "text" | ||
|
|
||
| if (isPasswordVisible) { | ||
| // 비밀번호 감추기 | ||
| passwordEyeInput.type = "password" | ||
| eyeIcon.style.display = "block" | ||
| togglePasswordSpan.style.display = "none" | ||
| } else { | ||
| // 비밀번호 보이기 | ||
| passwordEyeInput.type = "text" | ||
| eyeIcon.style.display = "none" | ||
| togglePasswordSpan.style.display = "inline" // span은 inline | ||
| } | ||
| }) | ||
This file contains hidden or 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
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
일반적으로 함수 네이밍은 파스칼케이스를 사용하지않고, 동사로 시작합니다 :)
아래 아티클 참고해보시면 도움이 되실것같아요!
참고