로춘남의 IT이야기

자바스크립트를 이용하면 변수라는것을 선언해주는데, 종류는 var, let, const가 있다. 이것들을 사용은 하고 있는데, 각각 무슨 차이점이 있는지 잘 모르는거 같아서 정리가 필요할것 같았다. 1. 변수 선언 방식 let, const의 경우는 2015부터 나왔던거 같고, 그전까지는 쭈욱 var를 사용했던것 같다. 우선 var는 변수 선언 방식에 단점을 가지고 있다. var test = 'java' console.log(test) // java var test = 'javascript' console.log(test) // javascript 변수를 재선언했음에도 불구하고, 에러가 나오지 않고 각각 다른값들이 출력되는것을 확인 할 수 있다. 테스트 삼아서 console.log를 통해 보는건 괜찮을 수 ..

지도 위에 무언가 이벤트를 꾸미고싶다면, 아마 오픈레이어스. Openlayers를 사용하는일이 많을 것이다. 내가 오픈레이어스를 처음 적용했던건 Map 위에 Layer 파일을 띄우는것이었다. OpenLayer는 예제가 잘 되어있어서 공식홈페이지에서 단계적으로 활용해도 좋다. 먼저 지도를 뛰우기 위해선 View를 설정해줘야한다. [1. View 설정] var view = new ol.View({ zoom : 14, // 초기화면 zoom level minZoom : 5, // 최소 zoom level maxZoom : 20, // 최대 zoom level projection : 'EPSG:4326', center : [127.0437, 37.6477] }); 지도가 보여지기 위한 View를 설정해준다. z..

오픈레이어스를 통해서 Map 위에 레이어를 생성했다. 기존에 만들어진 레이어를 Map 위에서 On/Off를 통해 나타났다가 사라졌다가를 반복했었는데, 기존에 만들어진 레이어가 아닌, 내가 클릭하는것에 따라 Map 위에 찍히는 점들이 있었다. 이 점들은 기존에 있던 레이어가 아니기때문에 Layer Off 기능을 클릭해도 사라지지가 않았다. 그래서 기존 기능에 추가적으로 Map 위에 있는 Layer들을 초기화 시키고자 refresh() 기능을 사용해봤다. 말 그대로 Map을 깨끗한 초기 상태로 바꿔주는법. 코드는 아주 간단하다. map.getLayers().forEach(layer => layer.getSource().refresh()); 이렇게 사용해주면 Map 위에 있던 지저분한 Layer들이 깨끗해지고..

자바스크립트 체크박스 Array 활용하기 //전체 Array에 넣기 var arr = []; $('input[name="test"]').each(function(index) { var bChecked = $(this).prop('checked'); var id = $(this).attr('id'); var value = $(this).val(); arr.push('[' + index + ']('+ bChecked + ')' + id + ':' + value); console.log(arr); }); //전체 Checked Array에 넣기 var arr = []; $('input[name="chckbxColors"]:checked').each(function(index) { var bChecked = $..

기본사이트 구상 : 최종 구현 시스템을 고려하여 프로토 타입 생성 확대, 축소 - 기본 http://openlayers.org/en/latest/examples/accessible.html#map 화면 이동 및 검색 목록 클릭시 이동 - http://openlayers.org/en/latest/examples/animation.html http://openlayers.org/en/latest/examples/center.html - http://openlayers.org/en/latest/examples/navigation-controls.html 마크표시 + 이동경로 - 기본 및 전제조건, 부가기능 기능 http://openlayers.org/en/latest/examples/draw-features...

Map 위에 Layer를 생성하고, Style를 변경해줄때 필요한 부분 var styles = [ new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#fc8d16', width: 6, }), }) ]; var featureSource = new ol.source.Vector({ }); var featureLayer = new ol.layer.Vector({ source: featureSource, //생성한 Source를 포함하여 layer 생성 style: styles, //style 적용 }); var multiPointFeature = new ol.Feature({ geometry: new ol.geom.MultiPoint(pnt) }); va..

JavaScript를 사용하다가 발견한 fetch 함수라는것에 대해 궁금해졌다. 찾아보니깐 fetch는 api를 불러오고, 정보를 내보내주는 함수라고 한다. fetch 함수에 쓰여지는 method는 get과 post가 있는데 설정을 따로 안해주면 기본적으로 get으로 설정된다. fetch는 서버와 비동기 요청방식중에 하나인데, 대표적인 비동기 요청방식중에 하나인 Ajax의 방식 중 하나이다. if(url) { fetch(url).then(function(response){return response.text();}).then(function(html){ document.getElementById('info').innerHTML = html; }); } 공부하다가 작성해본 코드인데, then 이라는 키워드..