728x90 반응형 리액트31 구글 로그인 결과를 저장하는 REST API 제작 리액트에서 구글 OAuth2 API를 이용해서 받아온 로그인 정보를 저장하는 스프링부트 기반의 REST API를 만드는 과정입니다. 리액트에서 구글 OAuth2 API를 이용하는 방법은 "리액트 구글 OAuth2 API를 이용한 로그인"을 참조하세요. #1 Spring Initializr 사이트에서 프로젝트 정보와 의존성을 추가 후 GENERATE 버튼 클릭 https://start.spring.io/ #2 다운로드 받은 googlelogin.zip 파일을 압축 해제 #3 이클립스에서 프로젝트 임포트 #4 Entity 클래스 생성 저장할 데이터 구조를 정의한 Entity 클래스를 생성 package com.example.googlelogin.entity; import javax.persistence.Co.. 2020. 5. 20. 리액트 구글 OAuth2 API를 이용한 로그인 구현 #1 프로젝트 생성 c:\react> npx create-react-app login #2 Visual Studio 프로젝트 추가 #3 Login.js 파일 생성 컴포넌트가 마운트되면 구글 SDK를 가져와서 auth2 기능을 초기화한다. OAuth 클라이언트 생성 및 클라이언트 ID 확인 방법은 "GCP OAuth 클라이언트 생성"을 참조하세요. import React, { Component } from 'react'; class Login extends Component { constructor() { super(); this.state = { token: '' }; } // #1 컴포넌트 마운트 직후 호출 componentDidMount() { this.googleSDK(); } // #4 로그인 기.. 2020. 5. 20. 리액트 fetch() 함수를 이용한 데이터 조회 및 테이블 컴포넌트를 이용한 출력 #1 프로젝트 생성 C:\> npx create-react-app react #2 SearchGithub.js 파일 생성 fetch() 함수를 이용해서 깃허브 검색 결과를 받아와서 테이블 형태로 화면에 출력 import React, { useState } from 'react'; import './App.css'; function SearchGithub() { const [data, setData] = useState([]); const [keyword, setKeyword] = useState(''); const fetchData = () => { const url = `https://api.github.com/search/repositories?q=${keyword}`; fetch(url) .then.. 2020. 5. 19. 이전 1 ··· 5 6 7 8 다음 728x90 반응형
