Sheet JS와 File-saver 사용 ReactJS | SheetJS Community Edition ReactJS | SheetJS Community Edition ReactJS is a JS library for building user interfaces. docs.sheetjs.com npm i --save https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz file-saver - npm (npmjs.com) file-saver An HTML5 saveAs() FileSaver implementation. Latest version: 2.0.5, last published: 2 years ago. Start using file-saver in your..

일을 하다보면 값을 일일히 쳐서 데이터를 밀어넣는 경우보다 엑셀을 이용해 일괄로 데이터를 등록해야하는 경우가 있다. 이번 포스트는 리액트에서 엑셀을 업로드해 엑셀 내 데이터를 간단하게 다뤄보는 글을 써보려고 한다. ReactJS | SheetJS Community Edition ReactJS | SheetJS Community Edition ReactJS is a JS library for building user interfaces. docs.sheetjs.com npm i --save https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz 0. 전체 코드 import React, { useState } from 'react'; import * as XLSX fro..

fetch란 promise 기반 ES6+에 추가된 javascript 내장 함수 별도의 라이브러리를 설치할 필요는 없다 모든 브라우저에서 호환되지는 않으며, 브라우저 버전이 낮을 경우 polyfill을 적용하여 사용해야 한다 구성 fetch(url, { method: 'GET' //통신방식, GET, POST, PUT, DELETE 등 mode: 'cors', // no-cors, cors, *same-origin cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached credentials: 'same-origin', // include, *same-origin, omit headers: { 'Content-Type': ..

Axios란 Promise 기반 HTTP 비동기 통신 라이브러리 운영환경에 따라 브라우저 간 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용 요청과 응답을 JSON형태로 자동 변경 라이브러리로, npm이나 기타 방법을 통한 별도 설치 필요 npm install axios bower install axios yarn add axios 구성 axios({ method: "", // 통신 방식 url: "", // 서버 headers: {} // 요청 헤더 설정 params: {}, // ?파라미터를 전달 responseType: '', }) .then(function (response) { setData(response.data); }); 구성옵션은 url이 필수값..

흔히 볼 수 있는 메뉴의 트리뷰는 대부분 하드코딩 되어있다 프로젝트 간, 권한별 메뉴조회등을 위해 DB에서 메뉴를 불러올 시, 트리뷰는 하드코딩이 불가 DB에서 불러온 데이터에 따라 트리뷰가 바뀔 수 있도록 컴포넌트 제작 트리뷰의 디자인은 deni-react-treeview를 사옹 npm으로 설치해도 좋고, 다른 라이브러리도 대부분 형태가 같기 때문에 원하는 라이브러리 설치 1. 트리뷰의 기본 형태 import React from 'react' import DeniReactTreeView from 'deni-react-treeview' const TreeView = () => { const fruitsAndVegetables = [ { id: 100, text: 'Fruits', children: [ {..

리액트의 페이징 처리 하단 페이지의 경우 웹페이지의 여러부분에서 공통으로 사용되는 기능이기 때문에, 컴포넌트로 만들어 재사용 페이지네이션 컴포넌트에 파라미터 전달 후, 페이지 버튼들을 리턴 백단(스프링부트), 페이지번호를 노출할 부모컴포넌트, 페이지번호를 리턴해주는 pagination컴포넌트 순으로 설명 1. 백단에서의 데이터 조회 @RequestMapping(value = "/sym/ccm/cde/SelectCcmCmmnDetailCodeList.do") @ResponseBody public HashMap selectCmmnDetailCodeList(@RequestBody CmmnDetailCodeVO searchVO) throws Exception { /** 페이지번호 클릭 시 searchVO에 이동..