Posts

React로 로그인 form 만들기

이번에는 React를 이용해 로그인 form을 만들어보자.

컴포넌트 구조 설계

• 이름, 비밀번호, 비밀번호 확인 Input Control을 담당하는 FormInput 컴포넌트가 있고, 이러한 FormInput 컴포넌트로 구성된 Form 컴포넌트를 구성했다.
• 그리고 From 컴포넌트와 Sibling으로 fontSize를 제어하는 FontControlBox 컴포넌트를 구성했다.
• 그리고 가입하기를 누르면 아이디, 비밀번호를 확인하는 모달인 Modal 컴포넌트가 있다.

state 관리 설계

• 최상위 App 컴포넌트의 자식으로...

Vanilla JS로 로그인 form 만들기

순수 자바스크립트를 이용해 로그인 form을 만들어보자.

과제 조건

• autofocus
  • 페이지가 로드 된 시점에 ID 입력 창에 Focus하기
• 유효성 검사 로직
  • ID, 비밀번호, 비밀번호 확인 필드에 대한 유효성 검사를 수행
  • 유효성 검사 시점
    • input focus out 시 해당 input의 유효성을 검사
    • 가입하기 버튼을 눌렀을 때 모든 필드의 유효성을 검사
  ...