0. 기능 설명전..

해당 기능은 Kakao, Naver, Google Open API를 사용해 소셜로그인을 구현했습니다.

본 내용은 아래 내용을 정리했습니다

1. React에서 소셜로그인 API를 호출하는 방법
2. 사용자 정보를 불러오는 API를 호출하는 방법

전달사항

1. API를 호출하는 URL의 경우 현재 localhost로 되어 있는 경우가 종종있는데 테스트 과정에서 들어간 값으로 추후에 .env 파일을 사용해 암호화 해야 합니다.
2. 해당 과정은 Access Token은 메모리에 저장, Refresh Token은 쿠키에 저장하여 Spring Boot에서 쿠키에 Refresh Token을 저장하도록 하였으며 Access Token은 callback API의 반환값으로 전달받아 Javascript의 변수(메모리)에 저장하도록 설계하였습니다. 이때 전달 방식으로 쿼리 파라미터를 사용하였습니다.

1. 사용한 라이브러리

본 내용에서는 React의 react-router-dom 라이브러리를 사용해 홈페이지를 관리했기 때문에 아래 과정을 따라주세요

로컬 환경에서 실행할 경우

npm install react-router-dom

프로젝트 코드 추가