개발/Javascript

Javascript로 Div 태그 드래그 이동 기능 구현

Openlayers로 map에 띄운 Overlay를 마우스 드래그로 이동하는 기능을 추가할 필요가 생겼습니다.아래 코드는 Overlay로 띄운 popup을 마우스 드래그로 이동시키는 Javascript 소스 입니다.const popupElement = document.getElementById('popup');let isDragging = false;let startPixel = null; // 드래그 시작 좌표popupElement.addEventListener('mousedown', (event) => { isDragging = true; startPixel = [event.clientX, event.clientY]; // 마우스 클릭 좌표(초기위치) popupElement.style..

[chartjs] 축 시작값, 최대값 설정 방법

chartjs를 사용해서 프론트에서 날짜별 건수를 chart로 보여주는데 아래와 같이 날짜별로 건수가 0건일때 -1(음수)가 y축에 보였습니다. 건수가 마이너스가 될수는 없기 때문에 시작 위치를 0으로 하기 위해서 beginAtZero: true 를 추가했습니다.시작 위치는 0으로 변경되었지만 y축에 0.5가 표시되는데 건수는 소수점이 나올수 없기 때문에 suggestedMax: 2를 추가해서 최대값을 설정했습니다.y축이 최대값까지 표현되고 건수가 존재할때는 최대값을 무시하고 그려집니다. y축 설정 소스yAxis: { grid: { display: false }, ticks: { maxTicksLimit: 4 } ,begi..

Axios 라이브러리 특징 및 사용법

axios는 JavaScript에서 사용되는 HTTP 클라이언트 라이브러리입니다. 이 라이브러리는 웹 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다. 주로 HTTP 요청을 만들고 응답을 처리하는 데 사용됩니다. 주요 기능으로는 다음과 같은 것들이 있습니다. 1. HTTP 요청 만들기 axios를 사용하여 GET, POST, PUT, DELETE 등의 다양한 HTTP 요청을 생성할 수 있습니다. 2. Promise 기반 API Axios는 Promise를 기반으로 하기 때문에 비동기적으로 HTTP 요청을 처리하고 응답을 기다릴 수 있습니다. 이는 `.then()` 및 `.catch()`를 사용하여 응답을 처리할 수 있음을 의미합니다. 3. HTTP 요청과 응답의 가독성 높이기 Axios는 요청..

Template literal(템플릿 리터럴) If문 사용

Template literal(템플릿 리터럴) : ES6 (ECMAScript 2015)에서 도입된 문자열을 더욱 간편하게 생성하고 조작할 수 있는 기능. 역따옴표(backtick) (`) 문자로 감싸진 문자열을 의미하고 이 안에 변수, 표현식, 다른 문자열을 쉽게 포함시킬 수 있다. 템플릿 리터럴의 주요 특징 1. 변수 삽입 템플릿 리터럴 내에서 ${변수} 형식을 사용하여 변수를 삽입할 수 있다. 이렇게 삽입된 변수는 실제 값으로 대체되어 문자열이 생성된다. const name = '철수'; const greeting = `제 이름은 ${name}입니다.`; // 제 이름은 철수입니다. 2. 다중 라인 문자열 다중 라인 문자열을 간편하게 작성할 수 있음. 일반적인 문자열에서는 줄바꿈을 위해 이스케이프 ..