웹개발/프론트관련 썸네일형 리스트형 [외부 JS] 달력 관련 JS (Fullcalendar) 데모 이렇게 나온 달력을 다양한 방식으로 컨트롤 할 수 있습니다. 다운 경로 https://fullcalendar.io/ 압축 해제 후 시연 화면 달력 관련 JS 로 FullCalendar.js를 소개 하려 합니다. Jquery 에서 제공하는 https://jqueryui.com/datepicker/ 도 나중에 보시면 좋을 것 같네요. JavaScript 구현부 데모를 받아보시게 되면 위와 같은 방식으로 옵션을 설정할 수 있습니다. 먼저 init은 화면이 보여질 때 캘린더의 기본 옵션을 지정해주는 곳입니다. 위에서 부터 천천히 훑어 내려가면 풀 캘린더를 보여줄 div id를 지정하는 곳 입니다. 저 calendar id를 가진 div에 캘린더가 보여지게 됩니다. 옵션 - themeSystem : 달력의 .. 더보기 [JSP] 나만의 커스텀 태그 만들어 효율적인 작업을 하자 많은 분들이 사용하고 계시는 JSTL처럼 JSP 상단에 선언하여 사용할 수 있는 자신만의 taglib 만드는 방법을 소개하려 합니다. 파일 구조 빨간색 박스로 쳐져 있는 파일들이 필요합니다. 우선, 함수를 만들 자바 클래스부터 생성을 해줍니다. 저는 geun 폴더 아래에 TableMakeTag.java로 생성했습니다. (이름은 자신이 알아보기 쉬운 이름으로 만들어주시면 됩니다.) TableMakeTag.java 파일을 생성하면 아래와 같은 화면이 나옵니다. TableMakeTag.java Tag를 만들기 위해서는 doTag()라는 함수를 사용해야 합니다. 그러기 위해 SimpleTagSupport 상속받아야 합니다. Maven 에서 SimpleTagSupport를 사용하기위해 pom.xml 에 아래 내용.. 더보기 [Javascript] 자바스크립트의 빈값 체크 (+숫자, 배열도 한꺼번에) 자바스크립트 빈값 체크 자바스크립트 빈 값들인 "", null, undefined, 0, NaN 가 false를 return 한다는 것을 알고 계셨나요!? 코드를 보며 설명을 드리고, 위 빈값들과 배열, 객체의 빈값을 한번에 체크할 수 있는 소스를 소개 하려 합니다. Javascript 이렇게 "" 과 null 그리고 undefined를 초기값으로 주고 if문 안에 넣게 되면 각각의 값들은 false를 return하게 되어 비어있다는 log를 확인할 수 있습니다. Console 이렇게 간단히 값을 체크하고자 할 때는 위의 코드를 사용하셔도 됩니다. 다만 ! 주의할 점들이 있습니다. 1) 숫자 0 같은 경우에 if문 안에서 false를 return하기에 아래와 같이 숫자 0이 원하는 값임에도 불구하고 fa.. 더보기 [JavaScript] 배열 다루기 (map, reduce, filter 등) (jQuery !== JavaScript) 스크립트에 크게 관심이 없으신 분들은 순수 Javscript를 보통 for문이나 if문에서만 사용하게 될텐데 이번에는 javascript로 간단한 배열들을 다뤄 보겠습니다. 1. Map 활용하기 예) 모든 배열의 요소 10자리수로 증가시키기 // for 문 사용var num = [2, 4, 6, 8];var result = []; for (var i = 0; i 더보기 [오픈소스] chartjs를 이용한 차트 오픈소스인 chartJS를 이용하여 차트를 표현해보려고 합니다! https://jsfiddle.net/ jsfiddle 은 html과 css, javascript를 웹에서 작성해서 바로 테스트할 수 있는 사이트입니다! ※ 유사한 사이트로는 https://codepen.io/pen/ : 여러 오픈소스들이 많이 존재합니다. 로그인을 하지 않고도 사용이 가능하며, 따로 소스를 저장하거나 공유하는 기능을 사용하기 위해서는 회원가입 후 사용하시면 됩니다! jsfiddle은 크게 4가지 영역으로 나뉩니다. 좌측 상단의 HTML 영역에는 이나 , 태그를 생략한채 태그 내에 들어갈 코드만 입력하면 됩니다. 우측 상단의 css입력창에는 css코드를 입력하고 좌측 하단의 js입력창에는 태그를 제외한 스크립트 코드를 작성하.. 더보기 [Ajax] AJAX 데이터 간단한 한글처리 (produces) ajax로 데이터를 넘길 시 간단한 한글처리 방법을 설명드립니다. 위의 코드처럼 화면단에서 ajax를 호출하면 컨트롤러에서는 이렇게 PrintWriter를 이용해서 화면에 내리고 response에 대한 한글처리를 따로 해주곤 합니다. ajax로 데이터를 넘길때마다 무조건 넣어야 하는 거슬리는 3줄을 줄일 수 있는 방법은 [이전] [이후] 코딩수가 확 줄었습니다. produces를 쓰시면 됩니다. 리턴타입을 지정해 줄 수 있으며 한글처리 옵션도 지원합니다. 리턴타입은 json, html 등 여러가지 다양한 타입으로 가능합니다. 리턴타입은 response에서 확인해 보실 수 있습니다. 스프링 3.2버전 부터 나온 이 리퀘스트 맵핑 옵션을 활용하면 고정적으로 들어가야하는 3줄의 코딩을 줄여 좋을것 같습니다. 더보기 이전 1 다음
