Intro a 링크를 통한 파일 다운로드를 제공 하고 있었는데, 개선이 필요했습니다. 전체 데이터를 poi를 활용해 엑셀 파일을 생성 한 뒤에 반출을 해 주는 과정인데, 데이터가 클 수록 파일을 작성하는데 워낙 시간이 오래 걸리다보니 기다리는동안 사용자 경험이 너무 좋지 않았습니다. 그래서 파일 다운로드 과정을 AJAX를 이용해 비동기로 요청하고, 요청을 기다리는 동안 waitMe 를 이용해 로딩바를 보여주는 식으로 개선을 하기로 했습니다. https://github.com/vadimsva/waitMe AJAX 이를 위해 jQuery AJAX를 활용해 코드를 구현 해 보았습니다. $('#export').on('click', function () { var wait = $(th..

HTML Web Storage 참고자료 : https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API 웹 스토리지를 이용하면 웹 어플리케이션은 데이터를 사용자의 브라우저에 내부적으로 저장 할 수 있습니다. HTML5 이전에는 어플리케이션의 데이터가 Cookie 에 저장되어야 했는데요, 그로 인해 매번의 서버에 대한 요청마다 포함되어야 했었습니다. 웹스토리지는 더 보안상 안전하며 훨씬 큰 데이터를 저장 할 수 있습니다. 심지어 웹사이트의 퍼포먼스에도 전혀 영향을 주지 않습니다 Cookie는 브라우저마다 최대 갯수와 최대 사이즈가 미묘하게 다르기는 하지만, 일단 최대 4096 bytes의 데이터를 저장 할 수 있습니다. 숫자가 커 보이지만 겨우 4kb..

Intro 오늘도 열심히 코딩하던 중, 자바스크립트에서 만든 key-value 쌍을 서버사이드에 어떻게 넘길지 고민 하는 일이 있었습니다. 자바스크립트에서는 Object 를 사용해 다른 언어에서의 Map 과 유사하게 사용 할 수 있기 때문에 딱히 Map을 사용 해 본 적이 아직까지는 없었는데요 org.springframework.boot.json.JsonParser 인터페이스를 확인해보면 JSON 데이터를 List 혹은 Map 으로 파싱할 수 있습니다. 그래서 Object 형태로 보내지 않고 Map 형태로 마샬링해서 보낸다면 다시 언마샬링 할 때도 좀 더 간단하지 않을까 하는 생각에 자바스크립트 진영에도 Map이 있는지와 어떻게 쓰는지에 대해 찾아보았습니다. https://betterprogramming..

Vue.js 사용 하기 3) postgreSQL 게시판에서 Modal 이용하기 에 이어지는 글 입니다. ​ 마지막으로 Vue를 활용해 게시판을 조금 더 "사용할 수 있음" 에 가깝게 수정 해 보았습니다. ​ 일단 개별 글의 "조회" 기능을 추가 하였습니다. 이에 따라 게시판 목록 에서는 삭제 버튼이 사라졌습니다. 각 글의 제목을 누르면 개별 글을 조회 할 수 있도록 하였습니다. ​ 수정 버튼을 누르면 게시글 수정이 가능합니다. 게시글 수정은 게시글 작성 모달을 그대로 재활용하며 상황에 따라 다르게 작동하도록 하여 코드의 양을 줄이고 변경에 용이하도록 하였습니다. ​ 게시글 작성을 보면 아시겠지만 위의 "수정"과 거의 동일합니다. ​ 서버쪽은 전혀 변한게 없고 vueboard.html 파일만 변경 하였습니..

Intro javascript를 사용하며 다른 페이지로 이동 하는 방법은 몇 가지가 있습니다. jQuery $(location).attr('href', 'https://shanepark.tistory.com'); Javascript window.location.href = 'https://shanepark.tistory.com'; 보통 아마 위의 두가지를 많이 사용하셨을 겁니다. 대다수의 상황에서 window.location.href 는 별 문제 없이 작동하지만, 해당 리다이렉트 방법을 사용하면 안되는 경우도 있을 수 있습니다. 아마 이 포스팅을 읽고 있는 분들도 많이들 겪어 보셨을 거라고 생각합니다. 그 상황을 한번 임의로 만들어 보겠습니다. window.lo..