본문 바로가기
728x90
반응형

front-end/script10

[C3.js] 실시간 라인 그래프 그리기 (Amazon CloudWatch Graph 벤치마킹) aws CloudWatch에 있는 그래프를 참고하여 실시간 라인 그래프를 그려보겠습니다. 우선 html에 그래프를 그릴 영역을 잡아줍니다. 위 영역에 그래프를 초기화해줍니다. 차트 라이브러리는 c3.js를 이용하겠습니다. 필요한 라이브러리는 c3.css, d3.js, c3.js입니다. (c3.js를 선택한 이유는 예전에 사용 경험이 있는 d3.js를 기반으로 만들어진 라이브러리로 간단하게 그래프를 그릴 수 있고, 이미 그려진 그래프에 값을 업데이트할 때 자연스럽게 그려지기 때문입니다.) $(function () { initGraph(); }); let lineGraph; function initGraph() { lineGraph = c3.generate({ bindto: '#load-graph', dat.. 2022. 6. 15.
[jQuery] form 또는 ajax post 요청 시 csrf token 설정 https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html Cross-Site Request Forgery Prevention - OWASP Cheat Sheet Series Cross-Site Request Forgery Prevention Cheat Sheet Introduction Cross-Site Request Forgery (CSRF) is a type of attack that occurs when a malicious web site, email, blog, instant message, or program causes a user's web browser to per.. 2021. 11. 4.
[javascript] 부모창과 자식창의 값 전달 window.opener window.open()을 이용하여 새창을 띄울 수 있으며, window.opener를 이용하여 부모창을 제어할 수 있습니다. 단, 도메인이 같아야 스크립트가 정상 작동합니다. 부모창 script const childOpenWindow; // 자식 창 오픈 function openWindow() { window.name = 'parentForm'; childOpenWindow = window.open(url, windowName, [windowFeatures]); } // 자식에게 값 전달 function sendChildText() { childOpenWindow.document.getElementById("text").value = document.getElementById("text").value;.. 2021. 7. 15.
[jQuery] input에 숫자만 입력하기 input에 숫자만 입력되도록 설정하는 방법을 소개하겠습니다. 첫 번째 방법은 input type을 number로 지정하는 방법입니다. 두 번째 방법은 text type일 때, ctrl+v나 마우스 우클릭하여 텍스트를 붙여 넣기 하더라도 숫자만 입력되도록 설정하는 방법입니다. or 공통화하여 사용할 땐 아래처럼 설정합니다. $(document).on("input", "[name=number1], [name=number2]", function() { this.value = this.value.replaceAll(/\D/g, ""); }); 그런데 위 방법은 갤럭시 삼성 브라우저에서는 작동하지 않습니다. (삼성 브라우저가 문제가 많음) 이와 같은 이슈도 발생할 수 있으니 뒷단에서 방어 로직을 추가해야 합니다. 2021. 3. 23.
[Javascript] html 화면 PDF다운로드 (jspdf.js, html2canvas.js) 필요한 js파일 다운로드합니다. jspdf : html, 이미지, canvas 객체를 pdf로 변환해주는 라이브러리 html2canvas : html 객체를 canvas로 변환해주는 라이브러리 pdf다운로드 [Reference] blog.naver.com/myh814/221553091221 https://devheedoo.github.io/posts/save-html-to-pdf/ 2021. 1. 18.
[javascript] 이미지 용량 줄이기 (이미지 리사이징) Compressor.js spring.servlet.multipart.max-file-size 설정하여 파일 업로드 용량 제한을 걸어두었는데, 프론트단에서 이미지 파일 용량 상관없이 이미지 파일 업로드를 하려고 합니다. 이미지 용량을 줄이기 위한 방법을 찾으려고 구글링을 했는데 열에 아홉은 아래 스크립트에 관한 글이었습니다. window.resize = (function () { function Resize(){ } Resize.prototype = { init: function(outputQuality) { this.outputQuality = (outputQuality === 'undefined' ? 1 : outputQuality); }, photo: function(file, maxSize, outputType, call.. 2020. 11. 13.
JSP에서 URL encode 하는 방법 (특수문자 UTF-8 인코딩) param의 값을 UTF-8인코딩하여 값을 넘겨달라는 요청을 받고서 encodeURI() 함수를 사용하여 처리를 했는데 +와 같은 특수문자는 변경이 되지 않았습니다. let url = "https://moonsiri.tistory.com?id="; let id = "dj2nd+s&k3j"; console.log(url+id); // https://moonsiri.tistory.com?id=dj2nd+s&k3j const encoded = url + encodeURI(id); console.log(encoded); // https://moonsiri.tistory.com?id=dj2nd+s&k3j encodeURI() 함수는 URI에서 특별한 뜻을 가진 문자(예약 문자)는 인코딩하지 않기 때문입니다. 예).. 2020. 11. 10.
[javascript] JSON 합치기 Object.assign(a, b) Object.assign 함수를 이용하여 두 개의 JSON을 병합할 수 있습니다. ​ var d = {a:1, b:2}; var c = {c:3}; Object.assign(d, c); // {a:1, b:2, c:3} 단, 같은 key 값을 가지고 있으면 뒤에 오는 JSON의 value값이 적용됩니다. var d = {a:1, b:2}; var c = {a:3, c:3}; Object.assign(d, c); // {a:3, b:2, c:3} 하지만 IE에서만 해당 기능이 작동하지 않습니다. IE.... 이런 점을 고려해서 상황에 맞게 사용하면 좋겠습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Obje.. 2020. 10. 9.
[javascript] 뒤로가기 이벤트 onpopstate onpopstate (뒤로 가기) 이벤트를 적용하면 window.history.back(); 시에도 작동됩니다. 게시물 목록에서 게시물 상세 페이지로 이동 한 뒤, 뒤로 가기 버튼으로 페이징 값과 조회 조건을 가져가고 싶을 때 onpopstate 이벤트를 사용하면 값을 넘길 수 있습니다. /* detail.jsp */ window.onpopstate = function(event) { history.pushState({pageNum:3, searchDt:'2019-05-07'}, null, '/board/list'); location.reload(); } history.pushState(null, null, null); /* list.jsp */ console.log(history.state); // {.. 2020. 10. 9.
[script] foreach문을 이용하여 json 데이터 key, value 값 꺼내기 Javascript var json = { 'NAME':'성춘향', 'GENDER':'F', 'AGE':'18세' }; for (key in json) { console.log('key:' + key + ' / ' + 'value:' + json[key]); } JQuery var json = { 'NAME':'성춘향', 'GENDER':'F', 'AGE':'18세' }; $.each(json, function(key, value) { console.log('key:' + key + ' / ' + 'value:' + value); }); 2020. 10. 9.
728x90
반응형