[김성주] sprint4

[626-ju]

https://panda-sprint4.netlify.app/login/

요구사항

기본

login

• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
• Input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
• 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다

sign-up

• 이메일 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 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다.
• 활성화된 ‘회원가입’ 버튼을 누르면 로그인 페이지로 이동합니다

심화

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

주요 변경사항

스크린샷

---

멘토에게

-모듈 사용, 유지 보수를 고려한 코드를 작성하는 게 아직은 많이 어색한 것 같습니다.
처음에 [생각나는 대로 하드 코딩 -> 토대로 개선] 이런 식으로 작업을 진행했는데,(이런 방법은 별로 추천 안 하시는지도 궁금합니다!)
이러다 보니 처음 짠 틀에서 벗어나기 힘든 것 같습니다.
solid나 결합도 응집도 이런 개념들을 코드에 적용시키는 것도 막막하구요.

구체적인 예시를 들면 이번엔 이런 부분들이 막막했습니다.
1)기능별로 나누다 보니
2) 나눈 함수들이 공통으로 사용할 객체가 만들어짐
3) 너무 많은 함수가 해당 객체를 직접적으로 접근하네?
4) 음... 파라미터로 넘겨주자!
5) 너무 많은 곳에서 같은 파라미터가 사용되니까 보기에도 지저분하고 추적이 어지러워😵 어쩌지

연습을 하고 익숙해지는 데에 정답은 없겠지만
혹시 추천해 주실만한 ✨접근 방법(생각 흐름) 혹은 공부 방법✨이 있을까요?
어떤 방법으로 연습을 해야 좀 더 양질의 고민을 하면서 공부할 수 있을지 궁금합니다.

코멘트 주신 대로 좀 더 고민하며 작성할 수 있도록 연습하겠습니다. 감사합니다.

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

수고하셨습니다!
전체적으로 코드 퀄리티도 좋고 잘하셨는데,
유지보수를 고려해 코드의 의도를 더 명확하게 파악하게만들고 간결하게 할 수 있는 몇가지 제안을 드려봤어요. 코멘트 참고해보시고 다듬어보시면 좋을것같네요 👍

주요 리뷰 포인트

• 유지보수를 고려한 개발

[addiescode-sj]

함수를 적절한 단위의 작업으로 나누고 모듈화하신 시도 너무 좋습니다! 👍

여기서 더 개선해보자면,
login 파일에 사용된 네이밍과 구조를 아래 예시와 같이 좀 더 페이지&이벤트 기반으로 바꿔보는건 어떨까요?

// Initialize form validation
const signInValidationState = createValidState({ emailInput, passwordInput }, ruleObj)

initValidation(signInValidationState);

[addiescode-sj]

aria-checked도 js로 잘 토글해주고계시네요! 굳굳 👍

[addiescode-sj]

다만 현재 이 함수는 DOM에 의존적이라 따로 로직만 테스트하기도 어렵고, 재사용성하기 어렵습니다.
아래 예시처럼 토글 로직은 DOM에 의존하지않게끔 분리해보면 어떨까요?

function togglePasswordVisibility(input, toggleBtn) {
  const isPassword = input.type === "password";
  input.type = isPassword ? "text" : "password";
  toggleBtn.classList.toggle(VISIBLE_CLASS, isPassword);
}

[addiescode-sj]

그리고 이런 초기화를 담당하는 함수의 경우에도, 위처럼 토글 로직을 분리한 형태에 맞춰 리팩토링하게되면

export function initPasswordVisibility({ visibilityPw, visibilityPwCheck }) {
  if (!visibilityPw) return;

  const passwordInput = visibilityPw.previousElementSibling;
  if (!passwordInput || passwordInput.type !== "password") return;

  // 비밀번호 토글 이벤트 설정
  visibilityPw.addEventListener("click", () => {
    togglePasswordVisibility(passwordInput, visibilityPw);
  });

  // 비밀번호 확인 토글 이벤트 설정
  if (visibilityPwCheck) {
    const passwordCheckInput = visibilityPwCheck.previousElementSibling;
    if (passwordCheckInput && passwordCheckInput.type === "password") {
      visibilityPwCheck.addEventListener("click", () => {
        togglePasswordCheckVisibility(passwordCheckInput, visibilityPwCheck);
      });
    }
  }
}

이렇게 토글 로직을 언제 사용해야할지에 대한 사용 의도와 시점이 좀 더 명확해질수있겠죠?

[addiescode-sj]

if (!visibilityPw) return; 과 같이 조건에 맞지않는 경우 다음 줄을 실행하지않고 바로 리턴하는 기법을 early return이라고합니다.

early return을 잘 사용하면, 예외 상황을 먼저 처리하게끔 만들어 핵심 로직에 더욱 집중할수있게 만들어줄수있어 디버깅이 용이해지는 장점이 있고, 성능적으로도 불필요한 연산을 줄일 수 있어 메모리 사용량 또한 감소된답니다 👍

[addiescode-sj]

이 파일에서도 토글 로직과 UI를 분리해 코드를 더 간결하게 만들었던것처럼 개선할만한 여지가 있는지 한번 더 고민해볼까요? :)

[addiescode-sj]

질문에 대한 답변

멘토에게

-모듈 사용, 유지 보수를 고려한 코드를 작성하는 게 아직은 많이 어색한 것 같습니다. 처음에 [생각나는 대로 하드 코딩 -> 토대로 개선] 이런 식으로 작업을 진행했는데,(이런 방법은 별로 추천 안 하시는지도 궁금합니다!) 이러다 보니 처음 짠 틀에서 벗어나기 힘든 것 같습니다. solid나 결합도 응집도 이런 개념들을 코드에 적용시키는 것도 막막하구요.

구체적인 예시를 들면 이번엔 이런 부분들이 막막했습니다. 1)기능별로 나누다 보니 2) 나눈 함수들이 공통으로 사용할 객체가 만들어짐 3) 너무 많은 함수가 해당 객체를 직접적으로 접근하네? 4) 음... 파라미터로 넘겨주자! 5) 너무 많은 곳에서 같은 파라미터가 사용되니까 보기에도 지저분하고 추적이 어지러워😵 어쩌지

연습을 하고 익숙해지는 데에 정답은 없겠지만 혹시 추천해 주실만한 ✨접근 방법(생각 흐름) 혹은 공부 방법✨이 있을까요? 어떤 방법으로 연습을 해야 좀 더 양질의 고민을 하면서 공부할 수 있을지 궁금합니다.

코멘트 주신 대로 좀 더 고민하며 작성할 수 있도록 연습하겠습니다. 감사합니다.

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

저도 데드라인을 지키기위해 자유롭게 코딩 -> 어느정도의 여유 시간을 만들고 리팩토링 및 개선하는 방식으로 코딩합니다. 실제 업무를 할때는 이런 유연한 업무 태도를 좋게 생각하는편이라, 전혀 문제가 될만한 방식은 아닙니다 :)

너무 많은 함수가 해당 객체를 직접적으로 접근하네? 4) 음... 파라미터로 넘겨주자! => 객체를 접근하는건 일반적으로 매우 빠르고, 자주 접근한다해서 성능 병목이 되는 경우는 매우 드뭅니다. 따라서 성능보다는 코드 품질 측면에서 파라미터로 전달한다는것은 더 명확한 의존성을 보여주게 만들 순 있지만 필수는 아닙니다. 좋은 고민을 하셨네요 👍

커뮤니케이션을 위해 개발 지식이 없는 사람이 코드를 봤을때도 이해할수있을만큼 좋은 코드 퀄리티를 준수할수있게 지속적으로 고민하고 노력해보시면 좋을것같아요! (내가 작성한 함수/변수/클래스/컴포넌트가 어느 시점에서 언제 쓰여지는지가 명확한 의도를 가지고있으며, 예측 가능한 결과를 가지고있고, 안정성있게 실행될 수 있고, 코드의 흐름 또한 잘 읽히는지 지속적으로 판단하며 개선해보는 습관이 이걸 자연스럽게 체화될수있게 만든다고 생각합니다 ㅎㅎ)

여기서 나아가 프로젝트의 특성/ 발전 방향을 생각했을때 현재 작성된 코드에 어떤 문제가 있을 수 있고, 더 효율적이고 좋은 방법은 없는지 개선해보시는것도 좋습니다. 프론트엔드 개발자로써 프로덕트와 UX에 대한 심도 있는 이해를 할 수 있다면, 향후 이 소프트웨어가 어떻게 개선될 수 있는지, 지금은 어떤것이 우선적으로 지켜져야하는지 판단하는것도 수월해지겠죠? :)

어떤 고민을 해야하는지를 알면 어떤 문제가 있는지 보이기마련이고, 문제를 파악해야 문제를 해결할수있다고 생각합니다.
제 개인적인 소견으로 중요하게 보는걸 말씀드려봤는데 도움이 됐으면 좋겠네요 :)