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..

목적 Timer와 같이 일정 주기를 기준으로 계속 함수가 실행되도록 하기. 함수가 반복 될 때 반복된 주기별로 원하는 파라미터 전송 하기 해결 방안 setInterval 사용 혹은 중첩 setTimeout 사용하기 % 를 사용하여 각 반복구간 구별하기 개념 setTimeout : 일정시간(지정한) 이 지난 후에 지정된 함수를 한번 실행 param 1 : function param 2 : time (밀리초) param 3~ : param1 의 function 에 전달할 parameter 지정 1.기본사용 function test(){ console.log("hi"); } setTimeout(test,5000); 2. 파라미터 전달 function test(name){ console.log(name+" 님 ..

목적 : DB Framework 인 Mybatis 를 사용하면서 자주 쓰이는 choose 문과 if문의 차이점과 개념 숙지 환경 DB : MariaDB FrameWork : Mybatis 개념 통상적인 else if 와 같은 사용법입니다. 태그 의 경우 조건이 true 곳에서 멈추고 해당 쿼리만 실행 후 choose 문을 빠져나옵니다. 모든 을 통과하여도 true가 나오지 않을 경우 마지막의 쿼리를 실행합니다. 는 생략 할 수 있습니다. 예제 select * from table1 where bno = #{num} AND (OPEN_DT LIKE CONCAT('%',#{opendate},'%')) (PUT_DT LIKE CONCAT('%',#{putdate},'%')) (OPEN_DT LIKE CONCAT..

스프링 컨트롤러를 작성하면서 사용한 파라미터 정리입니다. 1. @HttpServletRequest / @HttpServletResponse / @ServletRequest / @ServletResponse @RequestMapping("/test") String test1(HttpServletRequest request) { String a = request.getParameter("a"); System.out.println("a : " + a); return "data"; } HTTP 에서 URL 요청시 전송한 값, 쿠키 ,세션, 헤더 등 클라이언트 정보를 가져올때 사용 웹브라우저 사용자인 클라이언트 -> 서버로 요청- > 서버에서 HttpServletRequest 를 생성, 서블릿에게 전달 받아올때 ..

서브쿼리 : 하나의 메인 쿼리 문장 안에 포함된 다른 쿼리 - 메인쿼리를 실행하기 전에 모든 서브쿼리가 한번 실행됨 서브쿼리는 조회 쿼리의 기본 형태인 select from where 의 3가지 위치에서 사용가능합니다 또한 위치에 따라서 종류가 나뉘어 집니다. 1] select - 스칼라 서브쿼리 select 절 안에 쿼리가 있는 경우 스칼라 서브쿼리라고 부릅니다 스칼라 서브쿼리는 반드시 단일 행 혹은 단일 값으로 이루어져야 합니다. 서브쿼리로 실행된 값을 메인쿼리에서 집어오기 때문입니다. 스칼라 서브쿼리를 복잡하게 작성할 경우 ( JOIN 과 같은 ) 심각한 기능저하가 일어날 수 있어 사용을 자제합니다. 2] from - 인라인 뷰 서브쿼리 from 절 안에 쿼리가 있는 경우이며, 해당 쿼리는 반드시 ..

TABLE 1] TABLE 2] TABLE 3] 이런 3가지 테이블이 있다고 가정합니다. UNION : 쿼리의 결과를 합칩니다. 단 중복된 쿼리가 있으면 한가지만 출력합니다. select bno , date from 테이블 1번 where 조건문 기입 union select bno , date from 테이블 2번 where 조건문 기입 union select bno , date from 테이블 3번 where 조건문 기입 단 중복을 검사하는데 시간이 걸려 중복을 제거하지 않는 UNION ALL 보다는 속도가 느립니다. 결과 : UNION ALL : UNION 과 같으나, 중복이 있어도 제거하지 않고 전부 합해서 보여줍니다. select bno , date from 테이블 1번 where 조건문 기입 u..

클로저 : 함수가 선언 되었을 때의 렉시컬 환경 클로저를 이해하기 전에 먼저 스코프의 개념에 대해 알아야 합니다. 스코프는 함수를 호출 할 때 정해지는 것이 아니라 어디에 선언되었는지에 따라 나뉘게 됩니다. 코드를 보면서 이해해 보겠습니다. pagination 이라는 함수 안에 increase, decrease , status 라는 3가지 내부 함수가 선언되어 있습니다. 내부함수 입장에서 바라보면, pagination 함수는 외부함수 입니다. 함수가 실행되었을 때 관점에서 바라보면, 1] 내부함수가 호출된다. -> 해당 컨텍스트가 실행 컨텍스트 스택에 쌓임 2] 변수 객체, 스코프 체인, this 객체가 결정 3] 스코프 체인이 바인딩 될 때 전역 스코프 -> pagination 스코프 -> 자기 자신을..

목적 : 오늘 날자 구하기, 오늘 날자로부터 7일 뒤 날자 구하기, 년,월 이 지나도 정상적으로 작동 유지 문제점 : 년 월 일 을 나눠서 "-" 를 붙이면서 각각의 종류가 최대치를 넘기는 경우의 수를 예상하지 못하여 33일 등 말도 안되는 날자가 출력된 점 수정 let day = date.getDate() +7; 해결: let date = new Date(); date.setDate(date.getDate() +7); let year = date.getFullYear(); let month = date.getMonth() +1; let day = date.getDate(); let stringDate = year+"-"+month+"-"+day; date 객체를 생성한 뒤. setDate 를 사용해서 ..

목적 : 뒤로가기 버튼 구현 문제점 : 글 작성 -> 목록 -> 뒤로가기 버튼 클릭시 작성 페이지로 이동함과 동시에 값이 남아있는 점 history.back() 을 사용했을 때 로딩 되는 페이지에서 해당 url 로 인한 진입인지, back으로 돌아온 페이지 인지 감지하여 함수를 동작시킬 수 있습니다. window.onpageshow = function(event){ if(event.persisted || (window.performance && window.performance.navigation.type == 2)){ service.onLoadPage(); } } 해당 함수가 시작됨 -> back으로 돌아옴 -> 미리 지정한 로딩함수 등을 설정하여 값을 초기화 하는 방식으로 동작하게 하여, back버튼..

공식문서 :https://jqueryvalidation.org/ 프로그램을 짜면서 데이터 검증은 필수적입니다. JQuery 플러그인 중 validate 검증 플러그인을 사용했습니다. JQuery 플러그인이기 때문에 순서는 jquery부터 받아와야 합니다. 그 후에 vaildate 스크립트가 옵니다. 만약 커스텀해서 사용한다면 해당 경로를 스크립트 합니다. ※경로는 해당 파일 위치입니다. script 에서 등록버튼과 같은 이벤트 작동시 아래와 같은 양식을 사용합니다. #frmRequest => form 데이터 ($('#frmRequest').valid()) 해당 jsp 파일의 script 단 에서 바로 검증을 해서 메시지를 출력 할 수 있습니다. let validator = $('#frmRequest')...

사용 언어 : ES6 ,JQuery 목적] li 의 class 명이 Open 혹은 Put 2가지의 ul li 리스트가 있습니다. 그중 Open이 먼저 선택시 선택된 값 은 Put 리스트에서 선택할 수 없게 하는것이 목표입니다. 구조 : div -> ul -> li 의 구조] 화면] 문제 코드] $("#tpOpenDtYmd, #tpPutDtYmd").on("change",function (e) { $(".Open").on("click", function () { if (!($(".Put").children(".selectedhour").text() == '')) { let text = $(".Put").children(".selectedhour").text(); let hour = text.slice(0,..