[김민찬] Sprint4

[itscold96]

배포 사이트

주소: https://panda-market-itscold96.netlify.app

요구사항

기본

로그인

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

심화

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

주요 변경사항

• 제작한 함수들에 JSDOC 추가
• 로그인, 회원가입에 쓰일 js 파일을 form.js과 password.js로 분리
• class에 따른 routing 기능 구현

스크린샷

멘토에게

• 클래스명으로 엘리먼트를 찾아 routing 기능을 넣어주는 방식으로 구현하였는데, 해당 방식이 좋은 방법인지 잘 모르겠습니다.
• 함수를 설명하기 위해 JSDOC을 사용하였는데, 이 부분이 코드 가독성에 도움이 되는 지 봐주셨으면 좋겠습니다.
• 반응형의 경우, html font-size로 전체를 줄이는 방식이 포함되어 있는데, 이로 인해 피그마 디자인과 차이가 나다보니,
  해당 부분을 없애는 것이 좋을 지 여쭤보고 싶습니다.
• constants 폴더에 있는 상수화는 이전 part1 멘토님과 상의하여,
  향후 스프린트 미션이 리액트에서 JSX를 사용하게 되면 적용시키는 것으로 하였습니다.
• part2 멘토님께 드리는 첫 PR이네요, part2 기간동안 잘 부탁드리겠습니다.

[arthurkimdev]

함수를 설명하기 위해 JSDOC을 사용하였는데, 이 부분이 코드 가독성에 도움이 되는 지 봐주셨으면 좋겠습니다.

-> 너무 좋습니다. 현업에서도 타입스크립트를 사용하지 않는 프로젝트에 특히 많이 사용해요.

[arthurkimdev]

공통된 로직 처리를 위해 showError 함수를 잘만드셨어요 👍
여기에 추가적으로 아래처럼 classList.toggle 사용해서 가독성을 향상 시킬 수 있습니다.
toggle 관련 API 문서는 아래에 남겨놓을게요.

const showError = (input, message) => {
  const inputWrapper = input.closest(`.${INPUT_WRAPPER}`);
  inputWrapper.classList.toggle('error', true);
  inputWrapper.classList.toggle('success', false);
  const errorElement = inputWrapper.querySelector('small');
  errorElement.innerText = message;
  validateSubmit();
};

https://developer.mozilla.org/ko/docs/Web/API/Element/classList

[arthurkimdev]

여기도 위에와 마찬가지로 classList.toggle을 사용해서 리팩토링 해볼 수 있겠죠!?

[arthurkimdev]

정규식 굳! 👍

[arthurkimdev]

아래처럼도 변경할 수 있겠네요!

const EMAIL_REGEX = /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/;

/**
 * 이메일 유효성 검사를 수행하는 함수
 *
 * @param {Event} event
 */
const validateEmail = (event) => {
  const email = event.target.value;

  if (EMAIL_REGEX.test(email)) {
    isValidEmail = true;
    showSuccess(event.target);
  } else {
    isValidEmail = false;
    showError(event.target, email === '' ? '이메일을 입력해주세요' : '잘못된 이메일 형식입니다');
  }
};

[arthurkimdev]

요소 값이 없을 경우도 있을 수 있기 때문에, addEventListenerIfExists 와 같은 공통 함수를 만들어서 랩핑해서 사용하는 방법도 예외처리를 할수 있는 방법입니다.

/**
 * 이벤트 리스너를 등록하는 함수
 *
 * @param {HTMLElement} element
 * @param {string} eventType
 * @param {Function} handler
 */
const addEventListenerIfExists = (element, eventType, handler) => {
  if (element) {
    element.addEventListener(eventType, handler);
  }
};

...
addEventListenerIfExists(inputEmail, 'focusout', validateEmail);
...

[arthurkimdev]

forEach 사용하여 아래처럼도 변경할 수 있겠어요.

passwordVisibilityIcons.forEach(icon => {
  icon.addEventListener('click', handleEyeClick);
});

[arthurkimdev]

클래스명으로 엘리먼트를 찾아 routing 기능을 넣어주는 방식으로 구현하였는데, 해당 방식이 좋은 방법인지 잘 모르겠습니다.

-> 음 클래스로 구현했다고해서 사실 좋다 / 나쁘다를 결정하기엔 어렵습니다만, 보통의 경우 클래스명은 주로 CSS 스타일링을 위해 많이 사용됩니다. 동일한 클래스를 스타일링과 기능(이벤트 핸들러) 모두에 사용하면 혼란을 초래할 수 있습니다. 예를들어 클래스 이름을 변경하면 스타일링뿐만 아니라 기능적인 부분도 변경해야 사이드가 발생하지 않는데, 이런 부분들을 놓칠 수 있기 때문이에요. (동료들과 함께 작업할 때 특히 그렇겠죠?)

그래서 데이터 속성을 사용하는 방법도 대안이될 수 있겠어요. 데이터 속성을 사용할 경우, 클래스명과 명확하게 역할이 분리되기 때문입니다. 어느 한 곳이 변경되도 사이드가 발생하지도 않죠. 데이터 속성으로도 한번 고민해봐주시면 좋을 것 같습니다.

[arthurkimdev]

예를들면, 데이터 속성은 data-* 방법으로 추가할 수 있어요.

 <button data-navigate="/" class="navigate">Home</button>

아래처럼 가져올 수 있구요.

const navigableElements = document.querySelectorAll('[data-navigate]');

navigableElements.forEach(el => {
  el.addEventListener('click', (event) => {
    const path = event.currentTarget.getAttribute('data-navigate');
    moveLocation(path);
  });
});

[arthurkimdev]

반응형의 경우, html font-size로 전체를 줄이는 방식이 포함되어 있는데, 이로 인해 피그마 디자인과 차이가 나다보니,
해당 부분을 없애는 것이 좋을 지 여쭤보고 싶습니다.

-> 해당부분은 지난번 멘토링 때 답변 드린걸로 대체하겠습니다~

[arthurkimdev]

민찬님 과제 제출하시느라 수고 많으셨습니다! 🙏