이번에는 지도를 렌더링 하기 위해 react-leaflet 을 설치 후 적용한다. 우선 MapPage 폴더와 MapPage.js를 생성한다. 그 후 해당 페이지로 이동하기 위해 App.js에 react-router-dom을 설치 후 적용한다. 참고: React 활용 - 1 : React-router-dom 페이지 네이게이션 만들기 (tistory.com) React 활용 - 1 : React-router-dom 페이지 네이게이션 만들기 리액트에서 페이지 이동을 하기 위해서는 router를 활용해야한다. rounter를 사용하기 위해서는 npm 으로 react-router-dom 를 먼저 설치해준다 npm i react-router-dom 그 후 이동할 화면을 먼저 생성한다. 처음 cookinghoil.t..

어떤 프로젝트를 하던 폴더구조를 잡는 것은 필수이고, 기본적인 사항이다. 이번에는 React에서 기본적인 폴더구조를 잡는 방법에 대해 간략하게 정리해 보겠다. my-react-app/ ├── public/ │ ├── index.html │ └── favicon.ico ├── src/ │ ├── assets/ │ │ ├── images/ │ │ └── css/ │ ├── components/ │ │ ├── App/ │ │ │ ├── App.js │ │ │ └── App.css │ │ ├── Header/ │ │ │ ├── Header.js │ │ │ └── Header.css │ │ └── ... │ ├── pages/ │ │ ├── HomePage/ │ │ │ ├── HomePage.js │ │ │ └─..

아래와 같은 방법으로 access token을 주고 받으며 통신 할 예정이다. 상황에 따라 java-java 바로 refirect 통신도 가능하다. 호출 가능한 api 정보는 아래 문서에서 확인 가능하다 https://marketplace.zoom.us/docs/api-reference/zoom-api/methods/#operation/users https://marketplace.zoom.us/docs/api-reference/zoom-api/methods/#operation/users marketplace.zoom.us 대표적으로 select, update 하나씩을 만들어보자 1. select 우선 view에서 아래와 같이 javascript 함수를 작성한다. function getUserInfo()..

이전장에 이어서 이번에는 코드 작성을 진행한다. 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..

개발개요 비대면 미팅이 많아지면서 회사 내부적으로 줌 유료 라이센스를 관리하고 있다. 8개의 라이센스를 이메일을 통해 접수 후 사용자 이메일 추가, 시간에 따른 라이센스 부여를 관리자가 수동으로 해주고 있다. 해당 수동 업무를 자동화 시키고자 줌 API 연동을 개발하기로 하였다. 해당 글에서는 기본적인 API 연동 및 select, delete, patch에 대한 예시 코드를 작성 예정이다. 우선 Zoom api 개발자 계정 / 앱을 등록 후 아래 링크로 접속하여 OAuth 앱을 생성한다. https://marketplace.zoom.us/develop/create App Marketplace marketplace.zoom.us 앱 이름 등 작성 후 생성을 하면 관리 화면으로 넘어간다. 해당 화면에서는 ..

이번에는 지난 시간의 소스를 활용하여 첨부한 이미지를 미리보기로 보는 기능을 만들어 보자. 우선 원리는 아래와 같다. 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,..