/react-signup-form

A signup form in React

Primary LanguageTypeScript

회원가입 폼

🔗 데모

웹사이트의 기본인 회원가입 폼을 만들어보기

  • 복잡한 상태 관리
  • 정규표현식을 이용한 유효성 검사
  • 라우터를 사용해서 페이지 나누기

기술 스택

  • TypeScript 4.7.3
  • React 18.1.0
  • HTML5
  • CSS3

요구사항

필드

  • 이메일(필수)
    • 형식 검사
    • 중복 검사
  • 전화번호(필수)
    • 형식 검사
    • 중복 검사
  • 비밀번호(필수), 비밀번호 확인(필수)
    • 형식 검사: 최소 8자, 영어 대문자 최소 1자, 영어 소문자 최소 1자, 숫자 최소 1자
    • 비밀번호 확인이 일치하는지
  • 유저네임(필수)
    • 형식 검사
    • 중복 검사
  • 추천인 유저네임(선택)
    • 유효성 검사 (존재하는 값인지 확인)
  • 약관동의 2개(필수), 마케팅동의 1개(선택)
    • 동의는 모두 동의 기능이 있어야 됨

페이지

  • 메인(회원가입 버튼) /

  • 회원가입 폼 /signup

  • 가입 완료: 회원가입 축하 메시지(유저네임 님) /welcome

배운 점

  • 타입스크립트 기본 문법
  • 커스텀 훅을 만들어 쓸 수 있다는 것
  • 정규식 표현으로 유효성 검사
  • CSS 컨벤션 (BEM, SMACSS)

아쉬운 점

  • 일정이 촉박하여 기술 습득과 프로젝트 구현 시간을 제대로 배분하지 못한 것
  • 초기에 컴포넌트 구조 등 충분한 고민을 하지 못한 것