본문 바로가기

Web108

[Javascript template] javascript template engine/자바스크립트 템플릿 엔진/maven test 환경 자바스크립트 템플릿 엔진 ajax로 요청하여 데이터를 가져오고 JSON 형태로 데이터를 받아 html 템플릿을 생성 및 분리하고 그 코드를 받아 html을 동적으로 생성하여 그려주고자 한다. 말이 어려운가? 그렇다면 이 자바스크립트 템플릿 엔진을 왜 사용하고자 했을까???? 라는 질문에 서부터 이 포스팅을 시작하려고 한다. 1. 왜 사용할까? 필자는 기존에 다음과 같이, AJAX 통신으로 DATA 응답을 받아 UI를 구성하는 html을 조각을 생성한 후 특정 영역에 삽입하는 식으로 Javascript를 통해 동적인 UI를 처리하고 있었다. 여기서 조금 걸리는 점(?) 은 DOM 조작에 있어 시간소비 및 UI의 공통적인 서비스가 쉽지 않다는 단점이 있으며 소스작성자가 아닌 사람의 view에서는 가독성 문제.. 2016. 9. 26.
[jQuery] form 객체 json 변환/ serializeArray() 위와 같이 form태그에 있는 객체들을 json형태로 보내고자 한다. 이럴 때 serializeArray()를 사용한다. form을 submit하기전 var arr = $("#frm_act_boardWrite").serializeArray(); console.log("",arr); 을 찍어 확인해보았다. arr = [ {name : ‘cmd’ , value : ‘111111111’}, {name : ‘brd_type’ , value : ‘22222222222’}, {name : ‘brd_cd’ , value : ‘3333333333’}, …… ]; 다음과 같이 Object형태의 배열로 변환이 되었음을 확인할 수 있다. 2016. 9. 20.
[Bootstrap] Bootstrap-2/부트스트랩/Bootstrap공부/Components/Button/버튼/dropdown/드롭다운 1. 버튼색상 변경ex) DEFAULT처럼 class를 지정하여 버튼 색깔을 변경할 수 있다.-기본버튼 : class="btn btn-default"-파랑색버튼 : class="btn btn-primary"-녹색버튼 : class="btn btn-success"-하늘색버튼 : class="btn btn-info"-노란버튼 : class="btn btn-warning"-빨간버튼 : class="btn btn-danger" 2. 버튼 크기 변경-큰 사이즈 버튼 : class="btn-lg" / “btn-group-lg”-작은 사이즈 버튼 : class="btn-sm" / “btn-group-sm”-가장 작은 사이즈 버튼 : class="btn-xs" / “btn-group-xs” 3. 버튼 그룹 설정-가로 .. 2016. 9. 7.
[Bootstrap] Bootstrap-1/부트스트랩이란?/Bootstrap공부/시작 1. Bootstrap 이란?- 프론트엔드 웹개발을 더 빠르고 쉽게 만들어 줍니다.- 기본적 CSS 만 알고 있으면 누구나 사용 가능한 쉬운 사용법을 갖추고 있습니다.- 웹표준을 완벽하게 준수하며 현재 가장 인기있는 HTML, CSS, JS 프레임워크 입니다.- 반응형 디자인이 쉽게 만들어 집니다. -IE9이하 버전에서는 기능지원에 제한이 있다.익스플로러보다는 그외 브라우저 (크롬,사파리 등등..) 에서 실행하길 권장한다. 2. 사용방법부트스트랩 사용방법은 jQuery와 동일하다.다운로드 받아서 include를 해주는 방법 or CDN 설정을 통해서 include 해주는 방법 다운로드 경로 :: http://getbootstrap.com/getting-started/#download-bootstrap.m.. 2016. 9. 7.
[jQuery] AJAX 참고_정리내용 출처 : http://hyeonstorage.tistory.com/65 좋은 내용이 있길래 AJAX 복습겸 OR 나중에 참고할겸 남겨놓는다. .serialize() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 직렬화 한다. / $("#name").serialize(); // id name form의 데이터를 직렬화한다. a=1&b=2 .serializeArray() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 배열로 직렬화 한다. / $("#name").serializeArray(); // id name form의 데이터를 배열로 직렬화한다. [ { name : "a", value : "1" }, { name : "c", value:"3"}] $.ajax() : ajax 비동.. 2016. 9. 6.
[Javascript] 페이징(paging) 공통 UI 소스 /페이징 화면 소스/페이징 자바스크립트 / paging ui [가정 조건]전체 데이터 수 : 27개페이지당 보여줄 데이터 수 : 10개페이지 그룹 범위 : 10 (1~10, 11~20 ,21~30…..)현재페이지 번호 : 1token명 : 편의 지정하시길 해당 소스는 test 소스이다. 실제 사용시에는 Server단에서 totalCnt수를 구하여 사용하셔야 합니다. (1) Paging 함수 호출 보통 필자는 ajax를 통해 가져온 data를 success부분에서다음과 같이 Paging 함수를호출하여 paging을 그립니다. 그리고 앞선 포스팅에 있는 Server단을 사용하시기 위해서는 countPerPage와 pageNo이라는 변수를 서버단으로 보내줘야 합니다. (http://mkil.tistory.com/227)따라서 필자는 보통 아래와 같이 사용합니다. ,ge.. 2016. 9. 6.

티스토리툴바