Programming/JavaScript52 [Leaflet] 시작하기 Quick Start Guide [Leaflet] 시작하기 Quick Start Guide http://leafletjs.com/examples/quick-start/ 에 있는 가이드 문서를 보면서 실습을 진행하겠습니다. Leaflet CSS, JS 추가 leaflet 사용을 위해서 css, js를 포함하는 기본 코드를 작성합니다. leaflet.html(또는 원하는 파일명)로 파일을 저장합니다. 지도 영역 추가 body 태그안에 맵을 표출할 영역을 div 태그로 생성합니다. 브라우저 전체에 표출되도록 높이를 100%로 하는 스타일을 추가하였습니다. 지도 생성 스크립트 vworld 에서 제공하는 타일맵 서비스를 이용합니다. (http://xdworld.vworld.kr:8080/2d/Base/201710/{z}/{x}/{y}.png)지.. 2018. 1. 13. Vue 에서 filter 사용 Vue 에서 filter 사용 201706120910 와 같은 문자열 형태일 경우 날짜 와 시간을 구분하여 표시하기 위해 필터를 사용함. javascript Vue.filter('date_to_day', function(date) { var re = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})/g; var r = re.exec(date); return r[1] + "-" + r[2] + "-" + r[3]; }); Vue.filter('date_to_time', function(date) { var re = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})/g; var r = re.exec(date); return r[4] + ":" + r[5]; }); html 등.. 2017. 6. 13. JSP list to javascript JSP list to javascript JSP 로 부터 넘어온 리스트 객체를 자바스크립트 리스트 객체로 변환합니다. var obj_list = [ { 'seq' : '${item.seq}' , 'type' : '${item.type}' , 'title' : '${item.title}' , 'content' : '${item.content}' , 'lon_x' : '${item.lon_x}' , 'lat_y' : '${item.lat_y}' } ${not loop.last ? ',' : ''} ]; 리스트를 이용하여 처리합니다. // 이벤트 목록 마커 생성 for (var i = 0, len = obj_list.length; i < len; i++) { var item = obj_list[i]; // c.. 2017. 5. 23. [Vue.js] input 값 길이 체크 [Vue.js] input 값 길이 체크 input 입력 데이터의 길이를 확인해서, 길이 초과시에 메시지를 출력한다. v-on:input 추가 vue 생성 methods 를 추가합니다. var vue_event_regist = new Vue({ el: '#title', methods: { title_typing : function(e){ this.max_length(e, 5, '제목', '#title'); }, max_length : function(e, len, title, id){ var val = e.target.value; if (val.length > len){ var msg = title + '의 최대 입력 길이는 ' + len + &#.. 2017. 4. 24. [Vue.js] v-for 에서 index 사용하기 [Vue.js] v-for 에서 index 사용하기 v-for 기본 사용 {{ item.message }} index 사용 {{ index }} - {{ item.message }} method 추가 methods: { chr: function(index){ return String.fromCharCode(65 + index); }, // 생략... } HTML 수정 A{{ item.buld_nm }} {{ chr(index) }}{{ item.buld_nm }} v-for 인덱스에 따라 다른 결과가 나오도록 함.인덱스 0 => `A` 1 => `B` 2 => `C` ... 출처 https://vuejs.org/v2/guide/list.html 2017. 4. 23. [javascript] Vue.js vs Angular.js 비교 [javascript] Vue.js vs Angular.js 비교 Modules / Components 모듈은 컨트롤러, 지시어 등과 같은 다른 엔티티를 포함하는 Angular의 컨테이너입니다. Vue에서는 대부분의 구성 요소를 포함합니다. Angular Modules angular.module('myModule', [...]); Vue components Vue.extend({ data: function(){ return {...}}, created: function(){...} }); directives 지시자 Vue에서는 지시어가 강력하지 않습니다. 그들은 더 집중된 것처럼 보인다. Angular에서는 지시어가 Vue에서 컴포넌트와 매우 흡사 한 많은 것들이 될 수 있습니다. Angular dire.. 2017. 3. 28. 이전 1 2 3 4 5 6 7 ··· 9 다음