bPopup.js - JQuery 레이어 팝업 플러그인 사용하기 웹 개발을 하다보면 팝업을 호출해야 할 경우가 매우 많다.복잡한 기능을 수행하는 팝업 뿐 아니라, 상세 정보를 보여준다던가 혹은 단순히 사진 크게 보기 정도의 용도로도 팝업은 다양한 상황에서 필요하다.이 때, 매우 간단하게 모달 레이어 팝업을 구현할 수 있는 제이쿼리 플러그인이 있어서 사용해 보았다.바로 jquery.bpopup.js 플러그인이다.간단하게 bPopup.js를 사용하여 레이어 팝업을 만들어 보고, 몇몇 옵션들에 대한 테스트를 .. 프로그래밍 & IT/Spring & HTML 2017.03.24 18:06
dataTables row selection(행 선택) 구현 예제 강력한 Jquery Grid plugin인 dataTables에서 행 선택을 구현해 보자.row selection 기능을 구현하는 방법은 두 가지가 있다.행 선택에 대한 스크립트를 직접 구현하는 방법과, datatables 확장 플러그인을 사용하는 방법이다.확장 플러그인을 사용하게 되면 더 간단한 코드를 구현할 수 있고, 다양한 선택 옵션들을 쉽게 변경할 수 있지만 별도의 js와 css를 불러와야 하므로 기본보다 다소 무겁다.하지만 해당 플러그인의 .. 프로그래밍 & IT/Spring & HTML 2017.03.21 20:15
Thymeleaf Layout 환경에서 javascript 스크립트 사용하기 Spring boot 환경에서 뷰 리졸버로 thymeleaf를 사용하고 있다.thymeleaf가 제공하는 layout 기능을 사용해 편리하게 메뉴바와 content가 들어갈 공간 등을 잘 잡아 놓았다.[ thymeleaf layout 구성하기 : http://www.leafcats.com/9 ]이 환경에서 새로 발견한 유용한 플러그인 테스트를 위해 연습용 페이지에서 스크립트를 작성해 보았는데, 아예 스크립트가 작동을 하지 않았다.레이아웃의 .. 프로그래밍 & IT/Spring & HTML 2017.03.14 01:17
datatables Cannot read property 'length' of undefined 에러 해결 얼마 전 새로운 부서로 오면서 이 곳에서 사용중이던 시스템의 UI개선 프로젝트를 담당하게 되었다.기존 소스를 뜯어 보던 중 데이터 그리드를 그리는 부분에서 수많은 하드 코딩이 난무하는 것을 발견하였고, 그리드 디자인 자체도 마음에 들지 않았다.이 시스템의 그리드를 datatables로 뜯어 고치려고 일을 벌려놨는데, 막상 손을 대다 보니 생각보다 쉬운 일은 아니었다. 무엇보다 어떤 에러가 발생했을 때, 분명 예전에도 봤던 .. 프로그래밍 & IT/Spring & HTML 2017.03.09 19:36
HTML5 탄생 배경과 HTML5의 특징 불과 몇 년 전까지만 해도 '코딩' 이라는 것은 프로그래밍을 직업으로 하는 전문 개발자들의 영역이었다. 개발자가 아닌 일반적인 대중들에게 있어서 코딩은 마치 중문학과 학생에게 있어서의 상대성이론과 같이 "나와는 전혀 상관 없는 것" 으로 느껴졌을 것이다. (중문학과를 무시하는 것이 아니다. 그만큼 친숙하지 못하다는 뜻이다.)하지만 요즘 "코딩" 이라는 것은 몇 년 전보다는 확실히 우리 옆에 조금 가깝게 다가왔다.정부에서 프로그래밍 교육 의무.. 프로그래밍 & IT/Spring & HTML 2017.03.07 19:02
DataTables로 Spring 서버와 Ajax 통신 사용해 그리드 테이블 그리기 ajax를 사용하지 않더라도 dataTables로 테이블을 그리는 것은 가능하다.하지만 추후 대형 데이터를 고려 해 server side paging을 해야 할 필요성을 생각 했을 때, ajax통신을 활용하여 데이터를 주고 받는 것이 유리하다. 또한 그 밖에도 ajax사용해 값을 조회하면 전체 페이지가 리로드 되는 것에 대한 신경을 쓰지 않아도 된다.서버에서 사용자 정보를 가져와 datatables로 그리드를 그릴 것이다. 서버와의 통신은 ajax로.. 프로그래밍 & IT/Spring & HTML 2017.02.12 01:29
서버에서 넘겨준 List 데이터로 thymeleaf Grid 그리기 웹 개발을 하다보면 List 데이터로 View단에서 Grid를 만들어야 할 경우가 많다. 특히 비지니스성의 관리 화면일 경우에는 서버에서 값들을 조회해 그리드로 뿌리는 일이 절반이라고 해도 과언이 아니다.Spring boot로 서버를 구성하고, 뷰 리졸버로 thymeleaf(타임리프) 를 사용할 경우 이 작업이 매우 간단하게 이루어진다.(개인적으로 기존 jsp를 사용할 때나, 굳이 비동기로 처리할 이유가 없다면 제이쿼리 ajax를 사용하는 .. 프로그래밍 & IT/Spring & HTML 2017.02.06 20:57
Spring(spring boot)에서 Thymeleaf를 사용한 HTML로의 값 전달 최근 Spring boot가 나오고, Spring의 진입장벽이 현저하게 낮아지며 급속도로 확산되고 있는듯 싶다.Spring MVC로 서버 개발을 할 때, 화면 랜더링 처리를 담당하는 기술로는 주로 JSP를 표준으로 많이 사용해 왔다.그동안 몇몇 프로젝트를 하며 항상 jsp로 화면 랜더링을 해 왔는데, 요새는 이게 또 구식이란다.Spring boot에서는 기본적으로 JSP와 Thymeleaf(타임리프), Velocity 등을 지원 하는데, 이 중 Th.. 프로그래밍 & IT/Spring & HTML 2017.01.29 18:02
thymeleaf로 HTML 에서 Spring boot 서버단으로 값 전달하는 세가지 방법 thymeleaf 에서 Spring boot로 구동되는 서버단으로 값을 전달할 때에 다양한 방법이 있을 수 있다.그 중 생각나는 세가지 방법을 로그인 프로세스 예시를 통해 알아보도록 하자.1. 전통적인 html form submithtml form 태그로 감싸 포함된 항목들을 get 혹은 post 방식으로 submit하여, 서버의 컨트롤러에서 HttpServletRequest로 받는 방식이다.<form&nbs.. 프로그래밍 & IT/Spring & HTML 2017.01.29 18:01
thymeleaf에서 legacy html5 사용하기(spring boot 사용) Thymeleaf를 사용하며 가장 불편한 점은 이렇다.Thymeleaf가 결국 html을 well-formed XML로 변환하기 때문에 일반적인 습관으로 html을 작성할 때에 생각보다 많은 오류를 발생시킨다.(예를 들면 input이나 link, meta tag 등에서 닫힘 태그를 주지 않는 경우)이데 Thymeleaf는 Legacy HTML5 Mode를 지원 한다. (이 모드를 사용할 경우 제한되는 부분은 추후 다시 확인해 볼 필요가 있다.. 프로그래밍 & IT/Spring & HTML 2017.01.29 17:30
