콩콩한 하루

await 는 자바스크립트에서 비동기 작업을 처리할 때 사용된다. async 함수내에서 사용되며 비동기 작업이 완료할때까지 함수의 실행을 일시적으로 중단한다. 동기식 처리 : 순차적 처리, 서버 Request 시 Response를 받아야지 다음단계로 진행가능 비동기식 처리 : 비순차적 처리, 작업의 완료여부와 관계없이 다른 작업을 실행할 수 있다. 예시: method:{ async testFunction(){ try{ const response = await fetch("https://testpage.com/data"); const data = await response.json() this.tempDataResult = data }catch(error){ console.log("에러에러에러에러에러") ..

Vue의 데이터 바인딩(v-model)을 사용해 사용자가 입력한 값을 vue데이터와 연결한다. 동시에 입력값에 따라 클래스를 동적으로 변경할 수 있다.(예:MinusStyle 클래스는 font-color:red, PlusStyle은 font-color:blue 라고 가정해보자) 클래스가 동적으로 변경되면 스타일이 데이터에 따라 조절되는 것을 확인 할 수 있다. 조건과 CLASS 적용 결과: 'PlusStyle' :(test_gap >= 0 ): 만약 test_gap 변수가 0 이상인 경우에는 'PlusStyle' 클래스가 적용되어 폰트색이 파란색으로 변경된다. 'MinusStyle' :(test_gap

isNaN() 함수는 숫자형인지 확인 가능한 자바스크립트 내장함수이다. 숫자로 변환가능한 경우 false를 반환하고 숫자로 변환할 수 없는 경우엔 true를 반환한다. 결과값 정리 : 숫자형 변환가능일때 false / 숫자형 변환불가일때 true 사용 예시: var test_data = 10 console.log(isNaN(test_data)) // test_data는 숫자형이기에 false를 반환함. ----------------------------------------------------------------------------------------------------------------------------------- console.log(isNaN(1234));//false(숫자형) c..

y축 최소값 : 0.9 부터 y축 최대값:1.2까지의 구역에 회색 배경색을 설정하였다. 특정 x축을 설정하고 싶으면 xMin,xMax값을 넣으면 됨 1.참조하기(plugin) 2.plugin적용(차트 초기 생성시) var ctx = document.getElementById('lineChart').getContext('2d'); myChart = new Chart(ctx, { type: 'bar', data: Chartdata, options: plugins: { annotation: { annotations: { box1: { drawTime: 'beforeDraw', type: 'box', yMin: 0.9,// yMax: 1.2, backgroundColor: 'rgba(234, 234, 234, ..

:disabled = 조건문을 혹은 function 호출로 비활성화 따진다 예1) 조건문 넣기 ::disabled="This.SelectedItem.Count>0" 선택된 Count항목이 0이상일때만 활성화 됨 예2)funcion을 호출 :disabled="TestFunction" vue: function: TestFunction: function(){ if(this.SelectedItem== null) return true; //비활성화 if(this.SelectedItem.Count== null) return true; //비활성화 if(this.SelectedItem.Count == 0) return true; //비활성화 return false; // 활성화 },

radio button checked 된 값 불러오기 $('input[name=radioButtonName]:checked').val() selectbox selected 된 값 불러오기 $("#selectedboxId option:selected").val()

//공식 var lon = Number(x); // var lat = Number(y); // var xx = lon * 20037508.34 / 180; // var yy = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / // 180); // yy = yy * 20037508.34 / 180; 구글좌표계 transform("EPSG:4326","EPSG:900913")

카카오맵이든 구글맵이든 API를 활용하면 보통 4단계로 나뉜다. 1단계:API 키 발급(API키는 지도를 불러올때 사용하는 고유식별키 정도로 인식하면 된다.) 구글맵 API 발급처:https://developers.google.com/maps?hl=ko 카카오 API 발급처:https://developers.kakao.com/ 2단계:API 스크립트 참조 구글맵 예: 3단계:View단(HTML)에서 지도들어갈 div 추가 구글맵 예: 4단계:자바스크립트 지도 function 추가 구글맵 예: function mapStart(){ var mapLatlng = new google.maps.LatLng(37.040957, 128.338503); // 좌표값(위경도) var mapOption = {//옵션 zo..

참고: http://bernii.github.io/gauge.js/ guege.js를 사용. 옵션에 따라 눈금의 설정,시침설정,그래프 모양설정 등등을 옵션으로 지정할 수 있다. HTML 0% javascript var opts = { angle: 0, // The span of the gauge arc lineWidth: 0.4, // The line thickness radiusScale: 1, // Relative radius pointer: { length: 0.6, // // Relative to gauge radius strokeWidth: 0.035, // The thickness color: '#000000' // Fill color }, staticLabels: { font: "10px s..

save함수를 탈때 validation체크를 해서 리턴값이 true이면 다음 단계로 진행 false이면 진행되지 않는다. //저장 함수 function save(param){ if (validation(param)) { if (!confirm("저장하시겠습니까??")) { return false; } } else { return false; } } //유효성 체크 function validation(param) { if (parseFloat(param)