KODA 로그인 페이지 구현

 

 

 

👆 로그인 구현 움짤 

 

 

 

 

 

KODA

 

 

 

 

총 4명이서 구성된 Team Koda ( FE : 2, BE : 2 ) 제작

그 중 맡았던 로그인 페이지(FE)를 기록합니다

 

로그인 (FE) 편

 

 

 

 

 

---

 

구현한 기능

 

 

 

• 로그인창에서 아이디 Input 3글자 && 비밀번호 input 3글자 이상 입력시 버튼 활성화
• 활성화 된 로그인 버튼 누를 시 서버와 통신 후 로컬 스토리지에 토큰 발급, 메인페이지로 넘어감

 

---

 

 

 

👆 구현한 코드

 

 

 

 

* 서베이툴은 한 명의 관리자만 원하셨으므로 굳이 회원가입 기능은 만들지 않았음! *

 

 

 

id, password 값을 state 하나로 객체에 담아서 관리했고 이 값들을 body에 담아보냈다

후에 response 값에서 adminToken이 있을 경우 token을 로컬스토리지에 저장했다.

 

버튼을 form 태그 안에 넣었기 때문에 e.preventDefault를 적어주었다

api 주소를 깃에 올리지 않기 위해 config.js 를 이용해 이를 ignore 목록에 넣고 사용했다

 

 

 

 

 

 

 

 

 

 

 

 

👇 KODA Project 회고록 링크

 

https://0119eunji.tistory.com/57?category=1055529 

KODA Project 회고록 및 위코드 수료 회고록