🐜 Mine 애플리케이션 프로젝트 - 로그인 기능 구현

🐜 Mine 애플리케이션 프로젝트 - 로그인 기능 구현

코드숨에서 배운 것을 기반으로 프로젝트에 적용해보겠습니다.
이번에는 로그인 기능을 구현해보려고 합니다.

(1) 로그인 페이지 만들기

그림과 같이 로그인 페이지를 만들어봅시다.

이메일과 패스워드를 입력할 input과 로그인 버튼을 만들어 보겠습니다.
아래와 같이 코드를 작성해보았습니다.

① input 입력값이 변경되도록 onChange 이벤트를 등록하자.

  ☑️ 이메일 변경 함수 : handelChangeEmail

 ☑️ 패스워드 변경 함수 : handelChangePassword

이메일과 패스워드 변경 함수를 만들어 주도록 하겠습니다.
아래와 같이 changEmail , changePassword 액션을 만들어 주도록 하겠습니다.

② 리듀서 및 액션 정의하기

  - reducer.js    

 - actions.js    

(2) 로그인 요청 액션 만들기

그 다음으로 로그인 버튼을 클릭하면 서버에서 로그인 요청을 보내는 액션을 만들어 보도록 하겠습니다.

① requestLogin 액션을 만들자

아래와 같이 액션을 만들어 주려면

서버에 요청을 보내야 합니다.

참조: 요청메서드

POST 메소드를 사용해서 이메일과 패스워드를 바디에 실어서 요청을 보내면 DB에서 똑같은 회원 정보가 존재하는지 확인을 하고 똑같은 정보가 존재하면 토큰을 발행해줍니다.

로그인을 하기 위해서는 토큰이 필요합니다.

이런 원리를 알았으니 서버를 연동해서 우리가 필요한 데이터(토큰)를 가져오도록 해야합니다.

(3) api 연동하기

api 호출하는 함수를 아래와 같이 만들어 주었습니다.
서버에서 토큰을 생성해오도록 하였습니다.

그리고 아래와 같이 로그인 요청 액션에 코드를 추가해줍니다.

이렇게 발급받은 토큰을 저장해서 사용해야합니다.
아래 그림처럼 localStorage에 저장을 해서 사용하도록 하겠습니다.

(4) accessToken 저장하기

아래와 같이 로컬스토리지에 토큰을 저장하고, 토큰이 필요한 곳에서 꺼내서 사용할 수 있도록 리덕스에 저장해주었습니다.

이제 로그인이 잘 작동되는지 확인해보겠습니다.
먼저 유효하지 않는 이메일과 패스워드를 넣어보았습니다.

accessToken이 undefined 인 것을 확인 할 수 있습니다.

이제 진짜로 잘 작동하는지 확인해보겠습니다.
로그인이 성공하였습니다.
그리고 accessToken이 발행 된 것을 확인할 수 있습니다.

이제 로그인 기능 구현도 완성해보았습니다 👏👏👏👏👏