javascript 기반의 Chart.js를 이용하여 한 캔버스(canvas)내에 2개 이상의 그래프를 그리려고 한다. 꺾은선(line)과, 바(bar) 두 가지 형태이다. 데이터는 axios를 이용하여 json 형태로 받아왔다. 음... 대충 아래와 같긴 한데,, 보기가 너무 불편하고 그러니, 요점만 작성하도록 하겠다. ■ 1. 데이터를 이루는 부분 ■ 2. chart.js 호출 이렇게 호출 시, canvas 가 동작한다. chart.js는 이쁘다..ㅎㅎ

FrontEnd/JavaScript 2021. 11. 30. 20:18

비동기 통신(AJAX, AXIOS)를 통해 데이터를 받아오고, 해당 데이터를 2회 매개 변수로 전달해주는 과정에서 데이터가 정순 -> 역순으로 변하였다. 그리고 데이터를 배열에 삽입 해주어야한다. 그래서 해당 데이터를 다시 정순으로 돌리려고 생각하다, 굳이 그럴 필요가 없다 느끼고, 반복문을 이용해서 루프가 돌 때마다 배열의 앞에 넣어주도록 하였다. ■ 배열의 앞에 요소를 넣는 법 unshift() 예시) ArrayData = [ ] for(i=0; i

FrontEnd/JavaScript 2021. 11. 30. 17:00

Javascript로 axios를 통해서 RESTful API로 받은 데이터를 Chart.js를 이용해 웹에 출력하려고 한다. 구현하고자하는 내용은 가장 기본적은 꺽은선(line) 그래프이며, type 변경을 통해서 해당 내용을 바로 변경할 수 있다. 일단 비동기 통신(axios)을 통해 성공했을 경우를 가정, then()

FrontEnd/JavaScript 2021. 11. 29. 17:51

JavaScript 비통기 통신(Ajax, Axios 등)으로 PHP에서 송신한 json 데이터를 수신하여 콘솔에 찍어보는 작업을 하도록 하겠습니다. 1. 비동기 통신 2. PHP 송신 3. Javascript 수신 및 출력 ■ 1. 비동기 통신 비동기 통신에는 여러 종류가 있지만 이 중에서 axios를 사용 Axios CDN 을 사용하였다. (편하게) get method로 api 주소를 호출한 모습이다. 성공시 "200" 성공과 함께 response가 출력된다. (지금 바로 하면 404에러가 뜰겁니다.) ■ 2. PHP 데이터 송신 그 다음으로 PHP에서 데이터를 출력하여 echo 해주면 된다.

FrontEnd/JavaScript 2021. 11. 29. 16:31

● 바닐라 자바스크립트로 ● 요소를 자식요소 맨 마지막에 추가를 한 뒤 ● 3초 뒤에 자동으로 사라지게 하기 예제 입니다. 해석해보자면, p 태그를 div 태그 내에 특정 이벤트로 지정해놓고( onsubmit 의 조건 같은 걸로 ), 해당 이벤트 함수가 호출되었다면 CreateErrorCodeElement가 실행되어 요소를 생성한 뒤, RemoveErrorCodeElement가 호출되어 3초로 설정된 setTimeout() 를 통해 인스턴스 함수로 생성한 요소를 제거 하는 겁니다. ☆ 저는 이 방법이 무한하게 반복 될 줄 알았건만, 안되더군요. 그래서 할 수 없이 미리 style을 지정해놓고 조건에 따라 className을 변경하는 것으로 변경하려고 합니다.

FrontEnd/JavaScript 2021. 11. 25. 15:06

다양한 오늘의 날짜를 출력하는 방법 중에서 20211122 의 포맷을 출력하는 방법 함수로 선언하기 function getTodayDate () { const todayDate = new Date() const year = todayDate.getFullYear() const months = todayDate.getMonth()+1 const days = todayDate.getDate() const resultDate = year + '' + months + '' + days return resultDate } // resultDate의 값이 반환됩니다. getTodayDate() 그냥 선언하기 const todayDate = new Date() const year = todayDate.getFullY..

FrontEnd/JavaScript 2021. 11. 22. 14:33

Vue.js 의 methods: { }, computed: { } 등에서 같은 scope에 있는 function(함수) 를 호출하려고 할 때 그냥 호출시 안되는 경우가 있다. "error 'function' is not defined" 이렇게 해당 function(함수)가 선언되지 않았다 라고 에러가 출력되기도 한다. 분명히 같은 methods: { } 안에 해당 내용을 출력했는데도 왜 안될까? 이는 Vue가 객체로 처리되기 때문이다. ■ 결론 그렇기 때문에 모두가 알고 있는, 'this.' 을 통해 함수를 호출해야한다. 이제 잘 출력되는 것을 볼 수 있다. 이상입니다.

FrontEnd/Vue.js 2021. 11. 22. 13:41

로컬 호스트(localhost) 에서 REST API를 이용, Axios 를 이용, Ajax를 이용하는데에 있어서 CORS 에러가 자주 발생한다. 이 방법은 localhost 에서 발생하는 CORS 오류를 막는 것이다. (만약 PUBLIC 으로 배포하였을 때에는 해당되지 않는다.) Moesif Origin & CORS Changer This plugin allows you to send cross-domain requests. You can also override Request Origin and CORS headers. chrome.google.com 구글 크롬 extension의 CORS Changer를 사용하면 단번에 해결이 된다. [ 다운로드 - 확장 - 새로고침 ] 이 세 단계로 모두 해결된다..

FrontEnd/Vue.js 2021. 11. 22. 09:33