728x90 반응형 front-end16 [Toast-UI Editor] 이미지 업로드 기능 변경 Toast UI Editor에서 이미지 업로드를 하면 base64 형식으로 에디터에 입력됩니다. base64 형식은 해상도가 올라갈수록 글자수가 어마어마하게 늘어나서, servlet의 max-file-size와 max-request-size를 초과할 수 있습니다. 그리고 그대로 DB에 저장하고 싶지 않겠죠? Toast UI Editor API 문서를 확인해 보면 다음과 같은 기능이 존재합니다. 다음은 addImageBlobHook으로 file에서 받아온 이미지 데이터를 업로드 후 url로 처리하는 로직입니다. const editor = new toastui.Editor({ el: document.querySelector(selectors), height: '300px', initialEditType: '.. 2023. 3. 20. [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. [SpringBoot] Thymeleaf layout dialect (thymeleaf 레이아웃 적용하기) thymeleaf layout SpringBoot에 thymeleaf 템플릿 엔진 레이아웃을 적용해보겠습니다. [SpringBoot] Thymeleaf 설정 및 Thymeleaf HTML Code(th element) 사용법 우선 pom.xml에 dependency를 추가해줍니다. nz.net.ultraq.thymeleaf thymeleaf-layout-dialect 2.4.1 이어서 templateEngine에 layout dialect를 추가해줍니다. @Bean @Description("Thymeleaf Template Engine") public SpringTemplateEngine templateEngine() { SpringTemplateEngine templateEngine = new Spri.. 2021. 1. 17. [SpringBoot] Thymeleaf 설정 및 Thymeleaf HTML Code(th element) 사용법 StringBoot + Thymeleaf Thymeleaf는 HTML, XML, Javascript, CSS 및 일반 텍스트를 처리할 수 있는 웹 및 독립형 환경에서 사용할 수 있는 Java 템플릿 엔진입니다. Thymeleaf는 html 파일을 가져와 파싱 해서 분석 후 정해진 위치에 데이터를 치환하여 웹 페이지를 생성합니다. 그러면 springboot에서 thymeleaf를 설정하는 방법에대해 알아보겠습니다. SpringBoot는 spring-boot-starter-thymeleaf dependency를 추가하여 Thymeleaf에 대한 자동 구성을 제공합니다. org.springframework.boot spring-boot-starter-thymeleaf 명시적인 구성은 필요하지 않지만, 기본적으.. 2021. 1. 17. [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. 이전 1 2 다음 728x90 반응형