분류 전체보기(126)
-
Spring - 줌 OAuth API 연동하기 2
이전장에 이어서 이번에는 코드 작성을 진행한다. redirect_uri 인 아래 호출을 받는 컨트롤러 메서드를 spring에서 작성하여 access token을 받아야 한다. access token을 받는 부분은 문서에 아래와 같이 나와있다. 해당 규칙대로 spring 코드를 아래와 같이 작성한다. http://localhost/_new/support/reservation/zoomApi @RequestMapping(value="/zoomApi" , method = {RequestMethod.GET, RequestMethod.POST}) public String googleAsync(HttpServletRequest req,@RequestParam(required = false) String code,Mo..
2023.01.18 -
Spring - 줌 OAuth API 연동하기 1
개발개요 비대면 미팅이 많아지면서 회사 내부적으로 줌 유료 라이센스를 관리하고 있다. 8개의 라이센스를 이메일을 통해 접수 후 사용자 이메일 추가, 시간에 따른 라이센스 부여를 관리자가 수동으로 해주고 있다. 해당 수동 업무를 자동화 시키고자 줌 API 연동을 개발하기로 하였다. 해당 글에서는 기본적인 API 연동 및 select, delete, patch에 대한 예시 코드를 작성 예정이다. 우선 Zoom api 개발자 계정 / 앱을 등록 후 아래 링크로 접속하여 OAuth 앱을 생성한다. https://marketplace.zoom.us/develop/create App Marketplace marketplace.zoom.us 앱 이름 등 작성 후 생성을 하면 관리 화면으로 넘어간다. 해당 화면에서는 ..
2023.01.18 -
React 활용 - 6 : 첨부 이미지 파일 미리보기 (react 이미지 미리보기, react state 배열)
이번에는 지난 시간의 소스를 활용하여 첨부한 이미지를 미리보기로 보는 기능을 만들어 보자. 우선 원리는 아래와 같다. 1) 첨부 이미지를 버퍼 (base64) 형식으로 변환 2) base64 데이터를 state에 배열 형태로 저장 3) 저장 된 배열 state를 화면에 뿌려줌 base64 데이터를 저장 할 배열 state를 선언한다. const [imgBase64, setImgBase64] = useState([]); import React, { useState, useEffect } from 'react'; import axios from 'axios'; function FileData() { const [file, setFile] = useState(null);//파일 const [imgBase64,..
2022.10.13 -
React 활용 - 5 : Spring에 파일데이터 전송하기 (react 다중 파일)
이번 시간에는 react - spring 간 파일 데이터 전송을 구현해보자. 우선 파일 데이터를 보낼 FileData.js 를 Screen 폴더 아래 아래와 같이 만들어준다. FileData.js import React from 'react'; function FileData() { } return ( FileData fileData1: Send ); } export default FileData; file 데이터를 저장 할 state를 선언한다. import React, { useState, useEffect } from 'react'; import axios from 'axios'; function FileData() { const [file, setFile] = useState(null);//파일 ..
2022.10.11 -
React 활용 - 4 : axios 사용하여 Spring에 데이터 전송하기
이번에는 지난번에 입력받은 데이터를 spring으로 넘기는 작업을 하겠다. 우선 spring과 통신하기 위해 axios를 설치한다. npm install aixos 그 후 TextData.js에 aixos를 import 하고 Send() 함수 안에서 axios를 아래와 같이 선언한다. import React, { useState, useEffect } from 'react'; import axios from 'axios'; function TextData() { const [data1, setData1] = useState(''); const [data2, setData2] = useState(''); const updateData1 = e => setData1(e.target.value); const ..
2022.10.06 -
React 활용 - 3 : useState, input 사용하여 데이터 입력하기
이번에는 react 의 useState를 input 과 함께 활용하여 데이터 입력을 해보도록 하겠다. 우선 작업 페이지 TextData.js 를 아래와 같이 생성 후 메뉴에 추가한다. import React from 'react'; function TextData() { return ( TextData data1: data2: Send ); } export default TextData; 이제 TextData.js 에서 data1, data2 두개의 데이터를 받을 state를 useState로 선언한다. import React, { useState } from 'react'; function TextData() { const [data1, setData1] = useState(''); const [dat..
2022.09.30