환경 Framework : spring javascript : ES6 환경 목적 도표 등 그려진 화면을 pdf 로 저장 혹은 출력하는 요구사항 반영 문서 https://html2canvas.hertzen.com/ html2canvas - Screenshots with JavaScript Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture html2canvas.hertzen.com https://artskydj.github.io/jsPDF/docs/jsPDF.html jsPDF - Documentation Fill the current path using the nonzero wind..

환경 Tool: Intellij Framework : Spring Language : ES6,JQuery DB : ORACLE 목적 input 태그에 자동완성 기능 구현 데이터는 ORACLE DB 의 값 조회 AutoComplete 에 커스텀 Class 적용방법 사용 라이브러리 UI-JQuery AutoComplete https://jqueryui.com/autocomplete/#content Autocomplete | jQuery UI Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocom..

환경 Spring ES6 목적 input type = "file" 에 엑셀파일 업로드 하여 해당 엑셀의 데이터 추출 후 api 전송을 위한 json 데이터 화 사용 라이브러리 Sheet.js 설치 및 적용은 다음 포스트 참고 https://yn971106.tistory.com/146 [Sheet.js]_Sheet.js 설치 및 적용 환경 javascript : ES6 환경 제약 IE 를 제외한 브라우저에서는 거의 사용 가능 목적 input 태그의 type= file 에 엑셀파일을 업로드 , 데이터 수집에 특화된 라이브러리 설치 설치 공식사이트 https://sheetj yn971106.tistory.com HTML 이런 input 박스에 엑셀파일을 다운로드 하기 위한 script 작성 script 1. ..

환경 javascript : ES6 환경 제약 IE 를 제외한 브라우저에서는 거의 사용 가능 목적 input 태그의 type= file 에 엑셀파일을 업로드 , 데이터 수집에 특화된 라이브러리 설치 설치 공식사이트 https://sheetjs.com/ SheetJS SheetJS Tools for Excel Spreadsheets sheetjs.com 다운로드 https://cdn.sheetjs.com/ https://cdn.sheetjs.com/ cdn.sheetjs.com 해당 사이트에서 https://cdn.sheetjs.com/xlsx-0.18.10/package/dist/xlsx.full.min.js 로 접속하여 마우스 우클릭 -> 다른이름 저장 저장된 파일을 프로젝트에 집어넣고 해당 경로로 s..

목적 동적으로 클라이언트의 날자 데이터를 받고, 해당 월의 윤달 등이 고려된 상황에서 해당 달의 평일 ( 월, 화, 수, 목, 금) 의 수를 구하고 해당 달의 주말 ( 토, 일) 의 수를 구하는 방법 해결 Moment.js 를 사용하여 구현 가능 설치 다음 포스트 참고 https://yn971106.tistory.com/136 [Moment.js]_JS 날짜 라이브러리 Moment.js 라이브러리란? 자바스크립트 날짜관련 라이브러리 중 가장 많이 사용했었던 라이브러리 입니다. 너무 큰 사이즈 차지 등의 문제로 더이상 업데이트는 하지 않는 라이브러리 입니다. 하 yn971106.tistory.com 코드 1. 시작, 끝일 선언 moment 가 설치되어 있는 환경에서 startOf 메소드와 endOf 메소드..

Moment.js 라이브러리란? 자바스크립트 날짜관련 라이브러리 중 가장 많이 사용했었던 라이브러리 입니다. 너무 큰 사이즈 차지 등의 문제로 더이상 업데이트는 하지 않는 라이브러리 입니다. 하지만 오래된 프로젝트, 혹은 간간히 사용되기 때문에 정리해 보았습니다. 공식 사이트:https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", ..

JSTL 이란? 보통 JSTL + EL 을 포함해 부릅니다. 자바서버 페이지 표준 태그 라이브러리(JavaServer Pages Standart Tag Library) java EE 기반의 웹 애플리케이션 개발 플랫폰을 위한 컴포넌트 모음입니다. jsp 페이지 내에서 자바 코드를 사용하지 않고 로직을 내장하는 효율적인 방법을 제공합니다. 표준화된 태그 셋을 사용해서 자바 코드가 복잡하게 얽히는 것 보다 유지보수와 응용면에서 뛰어납니다. jsp 코드 내 HTML 부분에 이전 방식인 스크립틀릿 과 같은 , , 등을 ${test}, 와 같이 가독성이 좋게 만들어 줍니다. 사용방법 JSTL 은 라이브러이기 때문에 상단에 추가해 줘야 합니다. tag 로 c를 사용하고 uri에는 해당 주소를 넣어줍니다. JSTL ..

지도차트 그리기 Apache Echarts 를 이용하여 여러가지 차트를 생성 할 수 있습니다. 이번에는 Echarts 를 이용하여 지도차트를 생성하는 방법을 정리해보았습니다. Apache Echarts 설치 및 정보는 다음 포스트 참고 https://yn971106.tistory.com/119 [Echarts]_1.Apache ECharts 설치,사용준비 프론트를 개발하면서 차트는 굉장히 많이 사용됩니다. 그 중 프로젝트를 진행하면서 사용한 Apache Echarts 를 간단하게 다뤄보겠습니다. 공식 사이트 : https://echarts.apache.org/en/index.html Apache ECharts.. yn971106.tistory.com 1. 지도 생성을 위한 JSON 파일 추출 우선 Ech..

Echart 설치 및 준비는 다음 포스트 참고 https://yn971106.tistory.com/119 [Echarts]_1.Apache ECharts 설치,사용준비 프론트를 개발하면서 차트는 굉장히 많이 사용됩니다. 그 중 프로젝트를 진행하면서 사용한 Apache Echarts 를 간단하게 다뤄보겠습니다. 공식 사이트 : https://echarts.apache.org/en/index.html Apache ECharts.. yn971106.tistory.com 이번에는 Echarts 의 series 의 type 속성과 상관없이 통상적으로 사용되는 옵션 몇가지를 공부해 보았습니다. 1.legend : 범례 구성 요소. 범례 구성 요소는 다른 시리즈의 기호, 색상 및 이름을 보여줍니다. 범례를 클릭하여 ..

프론트를 개발하면서 차트는 굉장히 많이 사용됩니다. 그 중 프로젝트를 진행하면서 사용한 Apache Echarts 를 간단하게 다뤄보겠습니다. 공식 사이트 : https://echarts.apache.org/en/index.html Apache ECharts ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization You are welcomed to cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentatio..