분류 전체보기(126)
-
Spring - Ajax 사용하여 이미지 , 파일 업로드 구현하기 (feat. AWS S3)
Ajax를 이용하여 이미지 및 파일을 업로드 하는 방법을 알아보도록 하겠습니다. 본 글에서 이미지 저장은 로컬 저장소가 아닌 AWS S3 를 이용하여 저장을 합니다. 먼저 ajax에서 이미지 입력을 받아서 백엔드(스프링)으로 넘겨줘야 합니다. 이때 formData 라는 객체를 사용하게 됩니다. var formData = new FormData(); 해당 객체를 통해 파일 및 일반 데이터(텍스트)를 아작스에 담아서 넘길 수 있습니다. public class testDto { private String test1; private String test2; private MultipartFile[] test3; public String getTest1() { return test1; } public void s..
2021.05.17 -
React - 페이지간 데이터 이동하기 (feat. 모달창 만들기)
리액트를 하면 서로 다른 js 파일끼리 스테이트나 데이터를 주고 받아야 하는 경우가 있다. 이럴 경우에 어떻게 작성하면 될지 알아보고, 리액트에서 모달창을 만들어 보자. 먼저 불러올 화면, 이동할 화면을 만든다. 이전 장에 이어서 test3.js 파일을 만들었고 아래와 같다. import React, { useState, useEffect,useCallback } from 'react'; function Test3({setModal,testdata}) { console.log(testdata) return ( {testdata.map((item,index,a)=>{ console.log(a) return ({index}{item.NICKNAME}) })} close ); } export default T..
2021.05.12 -
Spring - 구글 로그인 구현하기 -2
이제 코드로 들어가서 페이지 상단에 다음과 같이 추가한다. 저 부분에 이전에 발급 받은 클라이언트 ID 를 붙여넣는다. 위 코드를 넣으면 자동으로 api 사용이 가능하다. 이제 구글 로그인 버튼을 원하는 곳에 아래와 같이 만든다. Google Login g-signin2 를 찾아서 자동으로 버튼을 만들어 준다. 이제 onSignIn()의 정의를 아래와 같이 해준다. function onSignIn(){ var auth2 = gapi.auth2.getAuthInstance() if(auth2.isSignedIn.get()){ var profile = auth2.currentUser.get().getBasicProfile(); googleLoginPro(profile) console.log('ID: ' + ..
2021.05.12 -
Spring - 구글 로그인 구현하기 -1
구글로 로그인 구현이 가장 간단하다. 백엔드적 부분은 앞에 소개한 네이버, 카카오와 같으니 앞단에 대해 불러오는 방법만 소개합니다. console.cloud.google.com/projectselector2/apis/dashboard?pli=1&supportedpurview=project Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 해당 페이지에 구글 로그인하여 접속한다. - 프로젝트 생성하기를 클릭후 뜨는 창에 프로젝트명 등을 적당히 적는다. - 사용자 인증 정보 > 동의 화면 구성 - 모든 사용자가 사용 가능하도록 외부 선택 - 적당한 이름, 본인 메일 적고서 저..
2021.05.11 -
Spring - 카카오톡 로그인 기능 구현 하기 -3
지난 장에 이어서 이번에는 백단 처리를 해보자 우선 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..
2021.05.11 -
Spring - 카카오톡 로그인 기능 구현 하기 -2
먼저 카카오 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..
2021.05.10