javascript plugin (9) 썸네일형 리스트형 SheetJS 사용법 - SheetJS 엑셀 다운로드 - 삽질중인 개발자 - SheetJS 엑셀 다운로드 - 개발을 하다 보면 엑셀 파일로 다운로드할 수 있게 해야 하는 기능을 구현해야 하는 경우가 있다. 아마 가장 많이 나오는 경우가 JSON 형태의 데이터를 엑셀로 다운로드시켜주는 기능일 것이다. 이때 Javascript로 클라이언트 단에서 엑셀 다운로드를 구현하는데 이 때 사용되는 javascript 라이브러리가 SheetJs이다. SheetJS 라이브러리는 무료버전과 유료버전이 존재하는데 무료 버전에 디테일한 기능은 좀 부족하긴 해도 엑셀 데이터를 뽑아주는 기능은 문제가 없어 아주 괜찮은 라이브러리이다. 이 포스트에서는 SheetJS의 기능중 하나인 excel 파일 다운로드 기능에 대해서 포스팅할 것이다. IE6~IE9 ,IOS safari에서는 해당 기능이 정상 작동하.. SheetJS 사용법 - HTML table을 엑셀로 변환하기 - 삽질중인 개발자 - SheetJS HTML 테이블을 Excel 파일로 만들기 - 웹 개발을 하다보면 HTML 테이블에 그려진 화면을 엑셀 파일로 다운로드 하는 기능을 추가해달라는 요청이 종종 있다. 엑셀 다운로드 기능을 구현하는 방법에는 첫번째로 서버에서 엑셀을 만들어서 다운로드하게 해주는 방법이 있고 두번째로는 브라우저에서 엑셀 파일을 만들어서 다운 받게 하는 방법이 있다. 서버에서 엑셀 파일을 만들게 되면 I/O 작업이 있어 서버의 부하가 생기기에 보통 클라이언트쪽(javascript)에서 처리를 많이한다. 이때 사용하는 자바스크립트 라이브러리가 SheetJS 라는 라이브러리다. 이 SheetJS 라이브러리는 무료버전과 유료버전이 존재하는데 무료 버전에 디테일한 기능은 좀 부족하긴해도 엑셀 데이터를 뽑아주는 기능은 .. 검색어 자동완성 - typeahead 사용법(일반, ajax) - 삽질중인 개발자 - typeahead 사용법 정리 - typeahead는 검색어 자동완성 기능을 제공하는 자바스크립트 라이브러리다. jQuery에 있는 autocomplete 도 있는데 둘 다 사용해보니까 typeahead가 사용법이 간단해 괜찮은 거 같다. 우선 typeahead 를 사용하기 위해서는 링크에서 typeahead를 다운로드한다. 다운로드한 파일 중 사용하게 될 파일은 typeahead.bundle.js 이다. jQuery 기반 라이브러리라 jQuery가 필수다. typeahead는 따로 기본 CSS가 없어서 아래의 Style Sheet를 복붙 한다. 1. typeahead 기본 사용법 typeahead 는$.typeahead( 플러그인에 대한 설정, 결과 데이터에 대한 설정 )으로 옵션을 구분한다. 다른.. Summernote 에디터 툴바 수정 - 삽질중인 개발자 - 썸머노트 에디터 툴바 기능 수정 - summernote의 기본 옵션으로 에디터를 사용하려고 하면 폰트의 사이즈도 변경하지 못하고 문자의 색도 변경하지 못해서 바로 사용하기에는 약간 불편함이 존재한다. 그래서 이 기본 에디터 옵션을 조정하여 사용을 해야 한다. 써머 노트의 기본 사용법은 아래의 여기를 참조하자. 우선 기본 옵션을 사용하여 에디터를 로딩하면 위와 같은 화면이 나오는데 이 모습에서 아래와 같은 모습으로 변경할 것이다. 여기 써머노트 툴바 변경 링크를 참조 $('.summernote').summernote({ toolbar: [ // [groupName, [list of button]] ['fontname', ['fontname']], ['fontsize', ['fontsize']], ['s.. slick slider 사용법 및 옵션 (반응형 포함) - 삽질중인 개발자 - slick 슬라이더 사용법 및 옵션 정리 - slick slider는 반응형 웹을 지원하는 슬라이더 라이브러리다. 여러가지 슬라이더 라이브러리가 있지만 그 중에서 가장 좋은 라이브러리 같다. 1. slick 다운로드 및 js, css 파일 로드 slick 홈페이지의 오른쪽 상단에 get it now를 클릭 후 다운로드 기본적으로 slick slider는 jQuery 기반으로 만들어진 라이브러리라 jQuery가 필요하다. slick-theme.css 의 기본 다음 및 이전 화살표 버튼은 횐색바탕에 투명색으로 설정이 되어 있어 배경화면이 흰색인 경우 잘 안 보이기에 상황에 맞게 수정이 필요하다. 2. 기본 사용법 slick slider의 기본 HTML 구성은 아래의 코드처럼 div의 형태로 구성되어 있는.. summernote 이미지 업로드 구현 및 이미지 경로 설정 - 삽질중인 개발자 - summernote 이미지 업로드 구현 방법 - summernote는 base64로 인코딩 후 저장하는 방식이여서 이미지 파일 관리가 어렵다. 그래서 callback을 이용하여 이미지를 특정 경로에 업로드 후 고유한 url를 리턴하는 방식으로 구현한다. 이 과정에서 url을 통한 외부 리소스 접근을 위한 톰캣 설정도 해줘야 한다. spring boot 를 기준으로 설명된 글입니다. 1. summernote 세팅 및 이미지 파일 업로드 callback 함수 구현 써머노트에서는 몇개의 callback 함수를 지원한다. 그 중 이미지를 업로드할 때 사용할 callback 함수는 onImageUpload 란 함수이다. onPaste 함수(복붙에 대한 콜백) 는 - 기본값을 사용하면 복붙시 base64로 인코.. twbspagination ajax & totalPages 변경 방법 - 삽질중인 개발자 twbspaigination ajax & totalPages 변경 방법 twbspagination 을 이용하여 동적으로 총 페이지 수를 변경하면서 페이지네이션을 하려고 하면 onpageclick이 1회 호출되어 무한 호출이 되는 현상을 볼 수 있을 것이다. 이러한 현상때문에 totalPage 를 변경을 할 수 없어 동적으로 페이지 수를 변경할 수 없다. 이 현상을 해결하기 위해서는 약간의 로직이 필요하다. ajax 활용 방법 twbs 플러그인은 ajax를 사용하여 동적으로 페이지네이션 버튼 만들기 위해서는 $("#pagination-div").twbsPagination("changeTotalPages", 총 페이지, 변경되고 난 후 선택될 페이지 번호); 다음 함수를 사용해서 구현하기에는 클릭이벤트가 발.. Summernote 사용법 , 썸머노트 사용법 - 삽질중인 개발자 - 썸머노트사용법 정리 - 홈페이지에서 글을 쓰는 부분에 일반 텍스트 형태의 글 쓰기만 지원한다면 사용자가 사용하기 불편하다. 이러한 점 때문에 대부분의 홈페이지에서는 웹에디터를 지원한다. 수많은 웹 에디터 중 summernote 에디터는 오픈소스이면서 HTML5 기반의 깔끔한 UI와 가장 많이 쓰이는 기능이 구현되어 있다. summernote에서는 bootstrap4에 기반을 둔 버젼과 독립적으로 사용가능한 라이트 버전이 있다. ( 라이트 버전이 있어서 CSS가 겹치지 않고 사용이 가능한 점이 썸머노트의 강점이다.) 이 포스트는 라이트 버젼을 기반으로 작성할 것입니다. (bootstrap4 버젼은 다른 CSS와 충돌 가능성이 너무 많아서) Summernote 공식 홈페이지 Summernote - Sup.. 이전 1 2 다음
