Basic-류정훈-sprint4 #87
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
어떻게 구현해야할지 모르겠는 기능들은 대부분 인터넷에 검색하여 찾아보았는데 혹시 더 좋은 구현방법이 있는지 궁금합니다.처음 자바스크립트에 들어가면 어려울 수 있죠 ㅎㅎㅎ 리뷰 하다가 도움 될만한게 있으면 답변드리겠습니다 ! |
2, 4요소 모두 충족할때 로그인/회원가입 버튼이 활성화 되는 알고리즘은 생각한것을 투박하게 구현하였는데 이 또한 자스에서 제공하는 기본 함수등으로 구현이 가능한지 궁금합니다.마찬가지로 코드리뷰를 통해 답변드리겠습니다. 😉 |
커밋 타입도 한 번 고려해보세요 !tl;dr:커밋 메시지 형식 type: Subject
body
footer기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다. 메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다. |
| if (value==""){ | ||
| emailError.textContent = "이메일을 입력해 주세요"; | ||
| emailError.style.display = "block"; | ||
| emailInput.classList.add("errorborder"); | ||
| error.email =0; | ||
| }else if(!emailPattern.test(value)){ |
There was a problem hiding this comment.
혹시 아직 프리티어를 적용하지 않으셨나요 ?
| if (value==""){ | |
| emailError.textContent = "이메일을 입력해 주세요"; | |
| emailError.style.display = "block"; | |
| emailInput.classList.add("errorborder"); | |
| error.email =0; | |
| }else if(!emailPattern.test(value)){ | |
| if (value=="") { | |
| emailError.textContent = "이메일을 입력해 주세요"; | |
| emailError.style.display = "block"; | |
| emailInput.classList.add("errorborder"); | |
| error.email = 0; | |
| } else if(!emailPattern.test(value)) { |
사소한 줄바꿈, 띄어쓰기 등 코드를 작성하시다보면 자연스럽게 불규칙해지는 경우가 많아요.
이를 돕기 위해서 개발 커뮤니티에서는 개발 경험 향상을 위한 여러가지 도구들이 있는데요.
보편적으로 많이 사용되는 툴은 prettier입니다 !
Prettier: https://prettier.io/
prettier는 vscode plugin에서 install하고 실행할 수 있습니다 ! 🤗
macos 경우
option+shift+f
windows의 경우alt+shift+f
| }else{ | ||
| emailError.style.display="none" | ||
| emailInput.classList.remove("errorborder"); | ||
| error.email =1; |
There was a problem hiding this comment.
에러가 존재한다면 1 아니라면 0일까요?
| error.email =1; | |
| error.email = true; |
만약 그렇다면 Number 타입보다 Boolean 타입을 사용하는 것이 메모리 측면과 코드 의사 측면에서 더 유리할 것으로 사료됩니다 😇
| }else if(!emailPattern.test(value)){ | ||
| emailError.textContent = "잘못된 이메일 형식입니다."; | ||
| emailError.style.display = "block"; | ||
| emailInput.classList.add("errorborder"); |
There was a problem hiding this comment.
클래스 이름에 띄어쓰기가 명확하지 않은 것 같군요 ..!
| emailInput.classList.add("errorborder"); | |
| emailInput.classList.add("error-border"); |
네이밍 컨벤션을 한 번 살펴보면 좋을 것 같아요 ! 😉
| }); | ||
|
|
||
| function updateButtonState(){ | ||
| const validcheck = error.email * error.password; |
There was a problem hiding this comment.
오잉? 혹시 곱하기가 "두 조건이 참일 경우"를 의미하는걸까요?
만약 boolean으로 바뀐다면 다음과 같이 바꿀 수 있겠네요 !:
| const validcheck = error.email * error.password; | |
| const validcheck = error.email && error.password; |
| }); | ||
|
|
||
| function updateButtonState(){ | ||
| const validcheck = error.email * error.password; |
There was a problem hiding this comment.
또한 해당 변수도 마찬가지로 네이밍 컨벤션을 따르는게 좋을 것 같아요 !
| const validcheck = error.email * error.password; | |
| const validCheck = error.email && error.password; |
그리고 만약 boolean일 경우 is-, has-와 같이 의문으로 짓는 경우가 많습니다 !
정훈님과 같은 경우 isValidFormData와 같이 될 수 있겠네요 😉
There was a problem hiding this comment.
(심화/생각해보기) signup.js와 login.js... 중복된 로직이 있으면 점점 복잡해질 수 있습니다 ~! 😊
여러 페이지에서 비슷한 기능을 하는 코드들이 반복되고 있다면?
로그인, 회원가입 등 페이지마다 공통적인 유효성 검사나 동작이 존재하는 경우가 많습니다.
이러한 로직을 각 JS 파일에 그때그때 작성하게 되면 아래와 같은 문제가 생길 수 있어요:
- 로직 수정 시, 모든 파일을 수정해야 해요.
- 서로 약간씩 다른 방식으로 유사한 로직을 구현하게 되면 버그 발생 가능성이 증가합니다.
- 공통 로직의 변화가 전체 페이지에 ripple effect(연쇄 영향)를 줄 수 있어요.
이처럼 중복된 코드가 많아질수록, 전체 프로젝트의 유지보수 비용은 계속 높아지게 됩니다.
그렇다면 어떻게 할까?
그렇다면 어떻게 할 수 있을까요?
재사용이 필요한 로직은 별도 모듈로 분리해서 관리하고,
각 페이지는 해당 모듈을 가져와 사용하는 방식으로 구성해보는 건 어떨까요?
// validate.js
export function isValidEmail(email) { ... }
export function isValidPassword(password) { ... }// sign-in.js
import { isValidEmail } from './validate.js';There was a problem hiding this comment.
그럼 언제 분리 해야하는거지?
사실 이건 “경험”으로 익혀가는 부분이지만, 아래와 같은 신호가 있다면 분리를 고려해볼 수 있어요:
- "어? 이 함수 다른 데서도 쓸 것 같은데?"
- "이거 수정하려면 다른 JS 파일에도 가서 고쳐야 하네?"
- "이 기능이 특정 페이지에만 종속되지 않아!"
어떻게 하면 더 나은 설계를 할 수 있을까?”를 고민하는 건 아주 중요한 개발자의 태도예요.
정답은 없지만, 재사용성과 유지보수성이라는 기준을 계속 떠올리면서 코드를 분리하는 연습을 하다 보면,
더욱 확장성 있는 구조를 만들 수 있게 됩니다.
|
수고하셨습니다 정훈님 ~! 이번 미션도 정말 수고 많으셨어요 정훈님 😊😊😊 |
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게