React) 로그인 기능 구현 (완)

이전에 로그인 API를 구현하고 이제는 컴포넌트들을 생성하여 API와 연결해줘 완성을 했다.

만드는 동안 발생했던 에러들과 내가 새로 알게된 것들과 함께 정리하는 시간을 갖아보려한다.

 

내가 공부한 로그인 방법의 API를 정리한 글에서 나와있듯이

데이터 입력 > 데이터 검토 > 유효성 검사(토큰확인) > 결과 와 같은 순서로 구성되어있으며,

위의 기능들을 하기 위한 장치들은 API에서 모두 만들어 놨으므로 이제는 이용하는 일만 남았다.

 

모듈에서는 액션, 액션생성함수, 리듀서, 초기State를 담아주고,

최상위 index에서는 store와 sagaMiddleware, localstorage를 관리해준다.

그리고 컨테이너에서 dispatch로 액션을 전달하여 State에 정보를 전달해준다.

 

데이터의 흐름은 페이지 안에 렌더링된 컴포넌트의 form태그에 데이터가 입력되면,

onSubmit이라는 미리 선언해둔 메서드를 이용해 컨테이너에서 모듈에 있는 액션함수와 리듀서에 도달한다.

로그인과 회원가입 기능은 모듈에서 redux-saga를 이용해서 프록시로 4000번 포트로 연결된 client로

데이터를 Post와 Get 동작에 전달하여 성공시 로딩 시작과 끝을 알 수 있게 state값을 할당하고,

요청에 성공했으면 요청한 데이터를 store에 할당해주며 동작한다.

 

나는 컨테이너와 스토어에서 꽤 어려움을 격었다.

가장 오래동안 해결 못한 에러는 REDUX_DEVTOOLS_EXTENSION is Lock 이라는 에러이다.

이 에러의 원인은 reduxjs/toolkit의 버전 업데이트로 인해 생긴 에러이다...

기존에는 middleware에 composeWithDevTools를 사용하려면

middleware: [composeWithDevTools(sagaMiddleware)] 형식으로 사용해야 했지만,

업데이트된 사용법은 middleware: [sagaMiddleware] 형식으로 사용해야한다.

이는 업데이트 됨에 따라 configureStore에서 자동으로

composeWithDevTools와 Thuck가 활성화된다. (설치 및 설정이 필요없다)

거의 3일을 에러를 잡는데에 사용했다....

 

 

에러는 아니지만 이번 공부를 통해 알게된 정보 몇가지가 있다.

 

1. react-router-dom이 v6로 업데이터 되며 withRouter가 삭제되고 history와 match, location은

각자 useNavigate, useParams, useLocation을 사용해줘야 한다.

 

2. redux-saga의 주요함수 all, put, call, takeLatest를 사용하며 각 함수에 대해 알 수 있었다.

    all: 배열 형태로 제너레이터 함수들을 넣어주면 함수들이 병행적으로 동시에 실행되며,

         전부 resolve될때 까지 기다린다.

    (ex. yield all( [ test1(), test2() ] → test1()과 test2()가 동시에 실행되며 모두 resolve될 때까지 기다림)

    

    put: 특정 액션을 disptach해준다.

    (ex. put( { type: 'ACTIONTYPE' } ) → ACTIONTYPE 액션을 dispatch한다) 

    

    call: 첫번째 파라미터는 함수를, 나머지 파라미터는 함수에 넣을 인수들을 사용해준다.

    (ex. call(delay, 1000) →

    

    takeLates: 기존에 진행중이던 작업이 있다면 취소하고 가장 마지막으로 실행된 작업만 수행한다.

    (ex. takeLatest( ACTIONTYPE, sagaFunction ) → ACTIONTYPE액션에 대해 기존 진행중이던

    작업중이던 작업을 취소처리하고 마지막으로 실행된 작업에 대해서만 sagaFunction을 실행한다.)

    takeLates는 이 프로젝트에서 로그인과 회원가입에서 버튼을 여러번 눌러 생기는 서버 요청이 

    많아지지 않도록 하기 위해 사용했다.

 

 

내가 겪었던 어려움과 알게된 정보는 여기까지이다.

코트는 깃링크를 올려 개시하는 방식으로 할것이다.

https://github.com/Gotkwondo/just_do_it/tree/main/ReactStudy/JWT

GitHub - Gotkwondo/just_do_it: My first repository project

 

이로써 JWT를 이용한 로그인/회원가입 기능을 구현하는 것이 끝이났다.

물론 실제 현장에서 하는 방식과는 다르겠지만,

어렵기만 했던 로그인/회원가입 방식을 알게되는 시간이였다.

 

부족한 점은 추후 보안할 예정이다.