[김주은] sprint5

[marie1016]

멘토에게

• 미션4의 코드리뷰를 반영하여 수정하였습니다.

• 공통으로 사용하는 부분은 common.js 파일에 작성하였습니다.

• 이메일 유효성 확인 부분에서
  값이 없을 경우 "이메일을 입력해주세요" 에러 메세지가 보이고
  이메일 형식에 맞지 않는 경우 "잘못된 이메일 형식입니다" 에러 메세지가 보이도록 해서
  3개 조건으로 else를 쓰지 않고 return 하여 조건문을 작성하였는데 잘 작성한 건지 모르겠습니다.

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

[Taero-Kim]

p4;
잘하셨어요! 이메일 값에 따라 해당 email input이 유효한지 true, false 불리언 형태로 잘 리턴하고 계시네요!

여기서 조금 더 개선 시켜보자면
단순 true, false를 리턴할 수도 있지만, 어떤 부분에서 valid하지 않은지의 정보도 같이 리턴하면 활용도가 높을 것 같아요!

ex)

const validateEmailInputValue = (inputValue) => {
  if (inputValue === "") return { isValid: false, errorType: 'emptyValue' }; 
  if (!VALID_EMAIL_PATTERN.test(inputValue)) return { isValid: false, errorType: 'invalidPattern' }; 

  return { isValid: true, errorType: null }
};

이렇게 함수를 작성한 경우 아래처럼 활용도 가능할 것 같아요!

const { isValid, errorType } = validateEmailInputValue(email.value);

// 이메일이 유효한 경우
if (isValid) {...}

// 이메일 값이 비어있는 경우
if (errorType === 'emptyValue') {...}

// 그 외의 경우
...

[Taero-Kim]

고생하셨습니다, 주은님!!
변수명 변경 및 조건문 개선을 하니, 전반적으로 가독성이 좋아졌어요!
또 공통적으로 사용되는 함수들을 common.js로 분리하여, 유틸화 하신 점 잘하셨어요!

직관적인 변수명, 깔끔한 조건문, 공통적으로 사용되는 함수의 모듈화
현재 진행하고 있는 리액트 프로젝트에서도 위와 같은 원칙들은 같아요!

컴포넌트 자체도 함수이고, 그 컴포넌트 내에서도 여러 변수와 또 다른 함수들이 사용되며
이것들을 어떻게 하면 더 직관적으로 잘 읽히게 코드를 작성할까
요런 포인트들을 잊지 말고 계속 의식하면서 코드를 작성하시면 더 좋은 퀄리티의 코드를 작성하실 수 있을 거에요!