개발일지, 개인 또는 단체 포트폴리오 등
https://stackoverflow.com/questions/16086162/handle-file-download-from-ajax-post 스프링을 통해 바이너리 파일을 다운로드하는 기능을 AJAX로 구현하려 했는데 서버에서는 용량이 1.5MB인 파일이 다운로드 될 때는 3MB로 부풀려져서 다운로드 되는 문제가 있었습니다. 파일이 깨진것이며 복구 불가능한 상태였습니다. 결론부터 말하면 XMLHttpRequest의 responseType 을 blob으로 설정해야 하며 JQuery AJAX 기능은 오류가 지속적으로 발생하므로 자바스크립트 기본 XMLHttpRequest를 사용하는 것을 추천합니다. var xhr 더보기…
자바스크립트에서 setInterval(function, millisecond)는 일정 시간(ms) 마다 함수를 실행하는 기능입니다. 예를 들어 millisecond를 1000으로 정하면 1초마다 함수를 반복 실행합니다. 참고로 0초(최초 setInterval이 실행되는 시점)에서는 실행되게 하려면 millisecond를 0으로 지정해야 합니다. 만약 1000로 설정했다면, 0초에는 아무 액션도 취하지 않고 있다가 1초 이후부터 실행 부분을 반복하게 됩니다. 실행되고 있는 인터벌 함수를 중지시키려면 clearInterval([인터벌 더보기…
axios 홈페이지: https://github.com/axios/axios 사용법 axios는 Promise 기반의 AJAX 라이브러리입니다. 기본 형태는 다음과 같습니다. axios.get(‘/user’, { params: { ID: ‘anyvalue’ } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }) .finally(function () { // always executed }); axios.get 뿐만 아니라 post, delete, put, patch 등 리퀘스트 종류에 따라 사용할 수 있습니다. 더보기…
<a> 요소를 만들어서 클릭 이벤트를 트리거시켜 다운로드 하는 방식입니다. var canvas = document.getElementById(“somewhere”) canvas.toBlob(function(blob) { var a = document.createElement(“a”) document.body.appendChild(a) a.style = “display: none” blob.type = “octet-stream” var url = URL.createObjectURL(blob) a.href = url a.download = “filename” a.click() window.URL.revokeObjectURL(url) }
컨트롤러 (일부) @RequestMapping(value = “/url”, method = RequestMethod.POST) public String insert(MultipartHttpServletRequest request, HttpSession session, ModelMap model) throws Exception { String rootPath = session.getServletContext().getRealPath(“/”); System.out.println(“imageFile ” + request + ” ” + request.getParameter(“imgFile”) + ” ” + rootPath + ” “); Iterator<String> itr = request.getFileNames(); if(itr.hasNext()){ List<MultipartFile> mpf = request.getFiles(itr.next().toString()); for(int 더보기…
Node.js: 설치, 코드 실행 (Windows 기준) Node.js: Webpack 설치하기 (Webpack 4 버전 기준) Node.js: Webpack 4 추가 설정 (CSS, HTML, dev-server) require(‘./static/css/main.css’) // CSS 로딩 방법 console.log(“WELCOME”) // 기본 Babel만으로 동작 const funcEx = () => { alert(‘arrow’) } funcEx() // Promise 등은 Pollyfill을 필요로 한다. function msgAfterTimeout (msg, 더보기…
$.parseXML(string)은 스트링 형식으로 된 xml을 자바스크립트 객체로 파싱하는 역할을 한다. 이게 중요한게 아니고 크롬을 비롯한 기타 브라우저에서는 저걸 그냥 사용해도 이상이 없는데 인터넷 익스플로러에서만 발생하는 오류가 있다. <script> function xmlDocGenerator(tagName){ var xml = document.implementation.createDocument(“”, “”, null); var topNode = xml.createElement(tagName) xml.appendChild(topNode) return xml.cloneNode(true); } var xmlHeader = xmlDocGenerator(“elm:customTag”) xmlHeader = 더보기…
select ~ option의 선택된 값 읽기 $(“select option:selected”).val() // 또는 .text() 체크박스 체크되어있는지 알아내기 $(“#specific-checkbox).is(“:checked”) JQuery 전용 포맷 DOM을 일반용으로 변경 $(“#element-id”).get(0) 여러개의 같은 요소로 이루어진 리스트에서 한 칸 아래/위(다음/이전)으로 이동 $(“.each-div.active”).next().after($(“.each-div.active”)) $(“.each-div.active”).prev().before($(“.each-div.active”)) 해당 요소에 부여된 이벤트 트리거 $(“#element-id”).on(“click”, function(){…}) // 이벤트 부여 $(“#element-id”).trigger(“click”) // 해당 요소를 클릭했을 때의 이벤트 더보기…
이전 글: Vue.js: 기초 사용 방법 + 예제: 이름으로 보는 운세 요구사항: Home, Portfolio, Guestbook 3개의 메뉴로 된 홈페이지를 만들되 각 메뉴는 Vue.js의 컴포넌트를 사용하여 작성하시오. <!DOCTYPE html> <html lang=”ko”> <head> <meta charset=”UTF-8″> <title>Homepage</title> <link rel=”stylesheet” href=”[부트스트랩-cdn-주소]”> </head> <body class=container> <nav id=”home-nav” class=”navbar navbar-expand-lg navbar-dark bg-dark”> <a class=”navbar-brand” href=”#”>{{ title 더보기…
[예제 사이트 가기] 이 예제는 예전에 만들었던 건데요 위와 같은 포맷의 일본 노래 가사를 이용해 학습 세트를 만드는 예제입니다. Quizlet(www.quizlet.com)은 플래시카드 학습 사이트인데, 카드 만들기 기능을 이용해 일본어 가사를 복붙하면 퀴즐렛에서 입력할 수 있는 포맷으로 바뀌며 이것을 이용해 퀴즐렛 문답세트를 만들 수 있습니다. 한국어로 해석된 일본 노래 가사들은 대개 [일본어 더보기…