Intro이미지에 워터마크를 추가하는 것은 저작권 보호나 브랜드 표시를 위해 필요한 작업이다. 예전에는 포토샵같은 이미지 편집 툴이 필요했지만, 이제는 자바스크립트만으로도 간단하게 워터마크를 추가할 수 있다. 이번 글에서는 HTML과 자바스크립트를 활용해 이미지를 웹 브라우저에서 직접 처리하고 워터마크를 삽입하는 방법을 알아본다.Canvas이번 워터마크 추가에 사용하는 기술은 HTML5의 다. canvas는 픽셀 단위로 이미지를 그리고 수정할 수 있는 도구이며, 다음과 같은 과정을 통해 워터마크를 삽입할 예정이다.를 생성하고, 이미지 파일을 불러와 그대로 그린다.텍스트나 워터마크 이미지를 원하는 위치에 추가한다.canvas의 결과를 다시 이미지로 변환한다.이를 통해 별도의 서버나 이미지 편집 프로그램 ..

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 파일만 변경 하였습니..