[React/GraphQL/Prisma] 로그인 만들기 #4.FrontEnd React에GraphQl,Apollo 설정

전에 BackEnd에서 만든 회원가입과 로그인을 React로 가져오기 위해서 몇가지 설정을 해줘야 한다

설정하기 앞서 css를 초기화 하는 작업을 한다 yarn add로 패키지를 받는다

초기화하는 방법에는 많은 방법이 있지만 styled-reset 패키지 방법을 이용하면 쉽고 빠르게 할 수 있다

src에 GlobalStyles.js를 만들어서 styled-components에 createGlobalStyle과 styled-reset의 reset를 가져온다

createGlobalStyle 은 페이지의 전체적인 css를 설정할 수 있다

reset 은 css를 초기화 한다

코드를 보면 createGlobalStyle 안에 reset 을 넣은것을 볼 수있다

body에 배경색을 네이버 로그인 배경색을 넣어준다

위에서 만든 GlobalStyles를 App에 리턴해 준다

 

yarn start 로 확인해보면

배경색이 정상적으로 나온다

 

 

이어서 src안에 component폴더랑 Routes.js를 만들고 Routes폴더랑 Auth.js와 Main.js를 만든다

Routes.js는 화면이 바뀌는 것을 설정하는 파일이고

Auth.js, Main.js는 화면을 말한다

지금 Auth.js 와 Main.js는 기본적인 형태만 만들었다 다음 글에서 Auth.js는 SignUp.js 와 Login.js로 만들것이다

Routes.js 로 가서 위에 처럼 불러온다 

React는 태그(<></>)를 사용하는 코드에서는 다불러와야 한다

화면을 나타낼 Main과 Auth 역시 불러온다

로그인을 했을때는 Main와면이 나오고 로그아웃을 했을때는 Auth화면이 나온게 하는 코드이다

Switch는 Route를 여러개 넣었을때 하나씩 나오게 할 수 있다(위에서도 말했지만 Auth 는 Login과 SignUp으로 바꾼다)

Routes는 check을 받고 check이 참이면 로그인 거짓이면 로그아웃이 나오게 한다

자바스크립트는 PropTypes로 타입을 설정해줘야한다 check은 boolean으로 설정해준다

지금까지 만든 Routes를 내보내준다

이제 App.js로 가서 BackEnd에서 만들어 놓은 Query와 Mutation을 가져 올 수 있는 gql을 불러온다 

HashRouter를 Router이름으로 불러온다

쉽게 Query를 가져오는 useQuery를 불러온다

위에서 만든 Routes.js를 불러온다

BackEnd의 Query나 Mutation 뿐만아니라 클라이언트에서 쓰이는 코드를 만들 수 있다

여기서는 Routes에 쓰일 check을 client에 만든다 ( @client는 서버에 영향을 받지 않는 client전용일때 쓰인다 )

check는 아래 client에서 설정에서도 만들어야 한다

useQuery는 위에 형식으로 쓰인다 loading과 refetch기능도 있지만 여기서는 쓰이지 않는다

리턴을 불러온 Router 안에 아까 만든 Routes를 넣어준다

Routes에 check을 인자로 넣어준다

이 상태에서 yarn start를 하면

이런 오류가 뜨는데 client설정이 없다는 오류이다

client설정을 하기위해 src안에 Apollo폴더와 그 안에 Client.js를 만든다

ApolloClient를 불러온다

여기서도 defaults와 resolvers를 설정해야하는데 BackEnd에서 설정한거와 같은 방식이지만 여기서는 아주 작게 하기때문에

BackEnd의 미니미 버젼이라고 할 수 있다

check은 localStorage에 토큰이 있다면 참이나오고 토큰이 없으면 거짓을 반환하도록 설정한다

logUserIn은 토큰을 받고 그 토큰을 localStorage에 저장한다 

logUserOut은 localStorage에 토큰을 삭제하고 초기화면으로 보낸다

{cache}인자를 받는것을 여기서는 안쓰이니 없어도 무방하다

마지막으로 ApolloClient로 내보낸다

uri에는 서버의 주소를 넣어주고 clientState에는 위에서 만든것들을 넣어준다

client.js의 설정은 다 끝났고 이제 index.js로 와서 ApolloProvider로 페이지 전체를 감싸야한다

index.js에서는 초기값은 <App />으로만 되어있지만 <App />을 ApolloProvider로 감싸주면 전체를 감싸주는것이다

이제 서버를 열어서 확인해보면 토큰이 없으면 Auth가 나오고 토큰이 있으면 Main이 나온다

여기서 토큰은 정상작동을 확인하기위해 임의로 넣었습니다

 

다음에는 로그인화면이랑 회원가입화면을 만들겠습니다