TIL 68일차 | 브랜디 기업 협업 13일차

• 12:00 | 위코드 출근

셀러 등록/수정 페이지와 회원가입 페이지를 Redux를 이용해서 구현하려고 했는데

컴포넌트간의 구조가 복잡하지 않아서 굳이 Redux를 쓸 필요가 없다고 판단하고 사용하지 않기로 했다.

Redux를 써보긴 써보고싶어서 로그인 상태를 다룰 때 사용해 볼 예정이다.

Today

• SignUp 페이지

  • SignUp 페이지 정규식 Validation 판별 기능 추가
  • Input 컴포넌트 Validation 관련 기능 추가
  • Validation 컴포넌트 Validation 관련 기능 추가
  • Input과 Validation을 담은 Container Component 추가
  • Input과 Validation에서 받는 props의 값이 겹쳐서 컴포넌트로 묶었음
  • Validaiton이 없는 Input일 경우 validationText값으로 ‘none’을 준다.

Input Validation 체크 시작 과정

• 처음에는 에러가 아예 안 뜬다.
• input 값에 입력을 시작하면 입력을 확인하는 변수의 값이 true가 된다.
• focus가 빠지면 포커스를 빠졌는지 유무를 확인하는 변수의 값이 true가 된다.
• input, focus 확인 하는 두 변수 모두 true가 되면 validation 체크를 시작한다.

• 필요한 변수

  • 입력 변수가 true인지 확인
  • focus 변수가 true인지 확인(onBlur)
  • input안에 값이 있는지 확인
  • 정규식 맞는지 확인