로그인

[minjeongHEO]

✅ TODO

• [X] 로그인 페이지 레이아웃 작업
• [x] useNavigate를 사용하여 페이지 링크
  • [x] 회원가입 클릭 시 회원가입 페이지
  • [x] 로그인 성공 시 인덱스 페이지
• [x] 기획서에 있는 기본적인 유효성 검사
  • [x] 아이디 최소 6자리 ~ 최대 16자리 검사
  • [x] 비밀번호 최소 6자리 ~ 최대 16자리 검사
• [x] 아이디, 비밀번호 미입력 시 로그인 버튼 비활성화
• [x] 아이디, 비밀번호 유효성 검사 넘어가면 로그인 버튼 활성화
• [x] 로그인 API 사용해서 로그인 처리
• [x] 로그인 현황(아이디, 닉네임) ~sessionStorage~에 저장해놓기
• [x] input 태그 포커스 애니메이션
• [ ] 타이핑 할 때마다 유효성 검사
• [ ] 비밀번호 보이기(눈)
• [ ] 비밀번호 *로 변환
• [ ] input태그 입력할 때, 아닐 때 bg색상 구분하기
• [ ] input 태그 잘못 입력했을 때 red
• [ ] localStorage에 토큰 정보 저장

  🛠 Refactoring

• [ ] 오류처리가 잘되는지 확인 오류를 일부러 발생시키고(언제 오류가 나지?) 여기서 던진 오류를 어디서 잡아서 처리하는지까지 확인
• [ ] useState대신 useRef사용해보기 ref 를 사용해서 리렌더링도 안되고, 상태관리도 되게 하는 방법. (state를 쓰는 것도 많이 하긴 함)
• [x] 숫자들(6,12) 변수화 시키기
• [x] 중복되는 조건을 함수로 사용하여 처리
• [ ] alert사용 하지 않기 alert은 잘 안쓰는 UX. 코드의 동작을 블럭킹하는 코드고, 사용자가 클릭해야해서 사용성에도 좋지 않음.
• [x] fetchLogin()의 result값을 true로 변경
• [x] localStorage에 로그인 정보 저장

✏️ 기능 설명

js에서 localStorage.setItem()을 할 때, localStorage는 js의 오브젝트를 저장할 수 없다. object -> string 바꿔 localstorage에 저장해야한다. localstorage에 string으로 변환시켜주지 않고 setItem을 했을 경우

📕 참고할만한 자료(선택)

https://studyingych.tistory.com/28 https://sanghye.tistory.com/14