구글로 로그인 구현이 가장 간단하다. 백엔드적 부분은 앞에 소개한 네이버, 카카오와 같으니 앞단에 대해 불러오는 방법만 소개합니다. console.cloud.google.com/projectselector2/apis/dashboard?pli=1&supportedpurview=project Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 해당 페이지에 구글 로그인하여 접속한다. - 프로젝트 생성하기를 클릭후 뜨는 창에 프로젝트명 등을 적당히 적는다. - 사용자 인증 정보 > 동의 화면 구성 - 모든 사용자가 사용 가능하도록 외부 선택 - 적당한 이름, 본인 메일 적고서 저..

지난 장에 이어서 이번에는 백단 처리를 해보자 우선 DB에 카카오 로그인 여부를 기록할 컬럼을 만든다. 해당 컬럼에 카카오에서 보내는 개인 고유 id를 기록한다. DB작업은 해당 컬럼만 생성해주면 된다. 이제 코드를 작성해야한다. 먼저 지난장에 작성한 데이터를 보내는 아작스는 아래와 같다. function kakaoLoginPro(response){ var data = {id:response.id,email:response.kakao_account.email} $.ajax({ type : 'POST', url : '/user/kakaoLoginPro.do', data : data, dataType : 'json', success : function(data){ console.log(data) if(dat..

먼저 카카오 API 키 중 javascript 키를 입력하여 Kakao.init으로 카카오 api를 실행한다. api.properties파일에서 api 키를 받아와 전달하여 KaKao.init을 해준다. 이제 코드로 들어가서 이전 개발자 페이지에 등록한 주소로 요청되는 페이지에 카카오 버튼을 만든다. 카카오 api 기능을 쓰기 위해서 해당 페이지 상단에 아래 코드를 추가한다. 해당 코드가 먼저 선언되야지 카카오 api를 사용 가능하다. 그 후 kakaoLogin() 함수를 아래와 같이 구성한다. function kakaoLogin() { Kakao.Auth.login({ success: function (response) { Kakao.API.request({ url: '/v2/user/me', succ..

네이버 로그인에 이어서 이번에는 카카오 로그인 기능을 구현해보자 먼저 카카오 로그인은 네이버와 다르게 자바스크립트로 기능 구현이 가능하여 적용이 쉽다. developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 위 사이트에 접속하여 카카오 계정 로그인을 한다. 그 후 '내 애플리케이션' - '애플리케이션 추가하기'를 해준다. 이미지, 앱 이름, 사업자명을 적당히 적어준다. 위와 같이 4개의 키가 발급된다. 보안에 신경써주자 카카오 API는 어플리케이션 전용 네이티브, REST 통신 전용(ajax), javascript..

리액트를 사용하면 백엔드로 노드를 가장 많이 사용한다. 하지만 spring 을 이용하여 소통하는 방법을 알아보자. 먼저 axios 라이브러리를 설치해야한다. npm i axios --save axios 는 jquery의 ajax와 비슷한 역할을 해준다. 설치를 하였으면 지난 코드에 아래와 같이 작성한다. import React, { useState, useEffect } from 'react'; import axios from 'axios'; // 액시오스 function Test1() { const [id, setId] = useState(0); function stateTest() { setId(id+1) } useEffect( () => { alert("ok") }, [] ); function te..

리액트에는 Hook 이라는 개념이 있다. 그 중 대표적이며 필수적인 것이 useState, useEffect이다 먼저 useState 에 대한 이해가 전제가 되어야 리액트 진행이 가능하다. 리액트는 state, 즉 상태라는 개념이 있는데 이 state가 변경이 되면 페이지의 리로딩 없이 그 변경되는 부분만 렌더링 한다. 이번 전체 코드는 아래와 같다. import React, { useState, useEffect } from 'react'; function Test1() { const [id, setId] = useState(0); function stateTest() { setId(id+1) } useEffect( () => { alert("ok") }, [] ); } return ( test{id}..