FE, BE 상호작용
프론트엔드
백엔드
이메일 주소
유효성: 정규식 (복붙)
비밀번호
유효성: 영문, 숫자 포함 8-16자
(B) 로그인
클릭이벤트
서버에서 {이메일: XXX, 비밀번호: XXX}받기 → DB로 전송 → 유무 확인
회원가입
회원가입 페이지로 이동
비밀번호 찾기
비밀번호 찾기 페이지로 이동
(B) 구글 로그인
FE - 공통 기능
모든 속성 폼 안에 넣어두고 <input name=”어쩌구” required> : 이래야 빈값 있으면 버튼 눌러도 전송 안 됨.
input value가 없는 상태
focus ⇒ 빨간색 문구 + 빨간색 밑줄
input value가 있는 상태
유효성 만족 O, focus ⇒ 밑줄만 굵게
유효성 만족 X, focus ⇒ 빨간색 문구 + 빨간색 밑줄
버튼 : 커서 pointer
구현할 것
FE
클릭하면 로그인 데이터 DB로 전송
BE
DB에 사용자 정보가 있는지 확인
자격증명이 된 경우 JWT 토큰 생성
진행 과정
FE
사용자가 아이디와 비밀번호를 입력한다.
폼의 값이 서버로 전송된다.
BE
서버로 전송된 폼의 값을 DB에서 찾는다.
DB에 회원정보가 있는 경우 JWT 토큰을 보낸다.
FE
서버에서 받은 JWT 토큰을 localStorage에 저장한다. (이 토큰은 HTTP 헤더에 포함됨)
로그인이 성공하면 '로그인이 성공했습니다' alert 창이 뜸.
구글 소셜 로그인
아직 모름!