carsumin devlog 🍀

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector Document.querySelector() - Web API | MDNDocument.querySelector() 는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.developer.mozilla.org Document.querySelector()선택자 첫번째 요소(element) 반환, 일치하는 요소가 없으면 null 반환깊이 우선(depth-first) 전위 순회(pre-order) -> 첫번째 요소부터 시작해 자식 노드의 수를 기준으로 순회document.querySelector(selec..

문제가 발생한 부분 map.on('singleclick', (evt) => { const r_name = ''; if(map.hasFeatureAtPixel(evt.pixel)) { map.forEachFeatureAtPixel(evt.pixel, feature => { r_name = feature.getProperties().r_name; console.log(feature.getProperties().r_name); }); } const coordinate = evt.coordinate; ..

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch Fetch API 사용하기 - Web API | MDNFetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를developer.mozilla.org fetch API 란? JavaScript에서 네트워크 요청을 수행하기 위해 사용하는 API직관적이고 사용하기 쉬움비동기적으로 HTTP 요청을 보냄 주요 특징 1. Promise 기반fetch는 Promise를 반환하기 때문에 비동기 처리를 할 때 'then', 'catch..

하이차트 (HighCharts)순수 자바스크립트로 작성된 차트 라이브러리    하이차트 라이브러리를 사용하기 위해서 script 추가 필요 div 태그에 id를 할당해서 차트가 들어갈 영역을 만들어줌  $(document).ready(function() {//임의의 dataset 객체 생성 (A-Z)const dataObj = {};for(let i=65; i', pointFormat: '{point.x}' } } }, series: seriesData }); //line chart let chart = new Highcharts.Chart({ chart: { renderTo: 'container_line', m..

Ajax란?Ajax는 Asynchronous JavaScript and XML의 약자로, 비동기적으로 데이터를 서버로부터 가져옴즉, 페이지를 새로고침없이 동적으로 업데이트할 수 있는 웹개발 기술웹 페이지에서 사용자의 입력이나 클릭 등의 이벤트가 발생하면, 페이지를 새로 고치지 않고 서버로부터 필요한 데이터를 비동기적으로 가져와서 페이지의 일부분만 업데이트 할 수 있음비동기 통신데이터를 서버로부터 가져오거나 전송할 때, 페이지를 새로고침하지 않고 백그라운드에서 데이터를 주고받을 수 있는 방식응답이 병렬로 처리되기 때문에 응답이 올때까지 기다리지 않고 다른 작업을 할 수 있음일반적으로 Ajax 요청이나 WebSocket과 같은 실시간 통신에 사용Ajax의 기본 문법 (jQuery)$.ajax({  url: ..