[React/GraphQL/Prisma] 로그인 만들기 #6.마무리

전에 디자인 했던 NEVER에는 로그인에서 회원가입페이지로 이동하는 작업만이 가능합니다
이제 회원가입기능과 로그인기능을 넣겠습니다

apollo-boost에서 gql을 불러옵니다 gql은 백엔드에서 graphql로 작성한 mutation이나 query 코드를 가져오게 하는 코드입니다
import해서 불러 와도 되지만 vsc는 작성하면서 자동으로 불러와 줍니다

먼저 회원가입 코드를 불러오겠습니다
백엔드에서 만들때 회원가입을 하기위해 이메일,비밀번호,이름을 받아 생성하기 때문에 위에 방식으로 작성합니다
백엔드 코드와 비슷하면서 다릅니다 자세한 내용은 graphql에서 확인하세요

이제 저 코드를 사용하려면 useMutation을 사용합니다 query를 사용하려면 useQuery를 사용해야합니다

useMutation을 만들고 위에서만든 SIGNUP코드를 넣어줍니다
variables에 email,password,name을 각각 인풋의 value들을 넣어줍니다
만든 signUpMutation은 꼭 배열로 감싸주어야 합니다

회원가입후에 useHistory를 통해 로그인화면으로 보내야 하기 때문에 불러옵니다

이런식으로 history 를 만들고

이제 onSubmit함수를 만들어줍니다
맨 위에 preventDefault는 새로고침(?)뭐 이런걸 막아주는것인데 자세한내용은
https://www.w3schools.com/jsref/event_preventdefault.asp 여기서 확인하세요
먼저 mutation을 하기 때문에 try~catch로 묶어줍니다
그 안에 if로 인풋에 빈칸이 있으면 안되기 때문에 빈칸이 없을때 if로 비밀번호와 비밀번호 확인이 같은지도 확인하고
같을때 mutation을 실행하도록 합니다 백엔드에서 create는 참 거짓을 반환하기 때문에 if 로 create가 true일때 확인창과 history.push
로그인화면으로 보내는 작업을 합니다

 

회원가입을 다했고 이제 똑같은 방식으로 로그인을 만들면 됩니다
tokenlogin은 전에 만들었던 localStorage에 저장하는 mutation입니다
React에서 만들었기때문에 @client를 붙여줍니다

기억이 안나기 때문에 client.js에 가서 만들었던 logUserIn 확인합니다

회원가입과 같은 방법으로 useMutation을 활용합니다

토큰은 variables가 있지만 여기서 토큰을 받을 수 없기때문에 빼고 이런식으로 합니다

마지막으로 로그인화면의 onSubmit을 완성합니다
여기또한 preventDefault를 넣어주고 if로 빈칸이 비어있지 않다는 사실을 확인후 try~catch로 묶어줍니다
백엔드에서 만들었던 login은 토큰을 받기때문에 loginMutation에서 나온 토큰을 tokenLoginMutation에서 사용합니다
tokenLoginMutation에서 토큰을 넣어주고 넣어주면 localStorage에 토큰이 저장됩니다 App.js을 보면 토큰이 있으면 check이 true가 되고 check 이 true면 main으로 넘어가게 했기 때문에 저장되면 main route로 넘어갑니다

마지막으로 완성된 영상입니다
main은 물론 아무것도 꾸미지 않아 main 만 뜨는것이 정상입니다

https://github.com/bolonge/login-back 백엔드코드
https://github.com/bolonge/login-front 프론트엔드 코드