invisible hand

이번에는 three.js optimization 예제 코드를 Vue3에 적용하여 실행해 보는 예제 코드를 공유한다. 물론 Vue와 Three.js의 입문 또는 초급자를 위한 예제이다. 개발을 잘하기 위해서는 기존에 있는 예제 코드를 열심히 작성하고 실행해 보아야 한다는게 개인 생각이다. 따라서 Vue와 Three.js를 잘하기 위해서는 많은 예제 코드를 가지고 놀아야 한다고 생각한다. 그럼 three.js optimization 예제를 Vue에 적용시켜보기로 한다. 기존 예제는 지구본에 인구 통계 데이터를 표현하는 것이다. https://threejs.org/manual/#ko/optimize-lots-of-objects 사이트에 해당 코드를 잘 설명하고 있으니 참고하길 바란다. 지난번 shadow 예제..

Vue 전문가라면 three.js의 예제 코드를 사용함에 그렇게 문제는 되지 않을 것이다. 하지만 초급 Vue 개발자라면 three.js를 사용할 때 당황할 수도 있다. 이번에는 초급 Vue개발자가 three.js 예제 코드를 사용할 때 팁이 될 만한 정보를 공유하고자 한다. 초급 Vue 개발자가 three.js로 개발시 기존 예제 코드 활용 방법 https://threejs.org/ 에 방문하면 다양한 정보를 얻을 것이다. Three.js – JavaScript 3D Library threejs.org 위 사이트에서 예제도 함께 얻을 수 있는 방법이 있다. Vue파일로 전환할 예제는 아래 캡처, 탱탱볼 예제이다. 위 출처 사이트에 들어가면 소스와 설명을 다 얻을 수 있으니 참고하면 된다. Vue파일로 ..

이전 블로그에서 Node.js를 통해 전국 시도 코로나 감염 데이터를 가지고 왔다. 이제 데이터처리를 해야하는데 데이터는 두개의 데이터로 분류된다. 1. D3.js 지도로 표현할 데이터 2. Chart.js에서 막대그래프로 표현할 데이터 메인 페이지에서 배너 팝업창 호출 Chart.js는 배너 팝업창으로 처리해야 하기 때문에 메인 페이지가 시작되면서 호출하면 된다. ... 팝업창에는 지역과 데이터가 표현되어야 하기때문에 지역 정보와 데이터를 전달한다. 그런데 코로나가 감소하는 것이 아니라 증가하는 것이로 보인다. CovidTrand.vue 에서 지역 데이터를 쿼리하고 데이터만 Barchart.vue에 넘겨 막대그래프를 그린다. 아래의 코드는 지역데이터를 선택했을 경우 다시 request를 보내고, 결과 ..

공공데이터에서 코로나 감염 데이터를 가져와 로컬 데이터베이스에 저장하였다. 그럼 다음은 우리가 해야할 일은 Vue3 + Node.js 연동이다. Vue3 + Nodejs 데이터 요청 Vue3에서 요청하는 데이터 셋은 하나가 아니고, 두 가지 데이터를 가져와야 한다. 1. 최근(어제) 코로나 감염 전국 시도별 데이터 2. 어제부터 10일전 트랜드를 보여줄 수 있는 데이터 따라서 Vue3 페이지가 시작될때 두번의 요청이 Nodejs로 전달되어야 한다. 두개의 데이터 셋은 아래의 그림과 같이 사용된다. Vue3 에서 요청 후 응답 받은 데이터는 아래와 같다. 이제 요청한 데이터가 제대로 전달되었다는 것을 확인하였다. Nodejs에 작성한 코드는 다음과 같다. router.get('/covidarea/:id',..

다시 코로나 감염자가 늘어나는 듯한 분위기이다. 이번에는 이전 만들어봤던 코로나감염 지도 및 현황을 표현하는 예제를 소개하고자 한다. 완료된 코드는 실행 결과는 아래 그림과 같다. 위 그림을 자세히 살펴보면 전국 코로나 감염자 수에 따른 시도별 색을 표현하는 것과 시도별 인구수를 표현한 것 최적화를 시키지 않았지만, 범례를 표시한 것 그리고 마지막 창하나를 더 띄워 감염자 수의 현황을 막대 그래프로 표현하였다. 또, 지도에서 시도를 클릭하였을 경우 지도의 색을 변경하는 것과 막대그래프에 표시되는 정보가 해당 지역의 데이터로 변경된다. 개발 전 준비 사항 날씨 지도 만들기를 했을 경우, 다음과 같은 항목을 추가로 준비해야한다. 1. 공공데이터 활용 신청 2. chartjs 추가 3. 공공데이터 저장 테이블..

이번은 Vue3와 Nodejs와 연동하는 것에 대해 소개한다. Nodejs는 다른 블로그에서도 많이 소개를 하니 비슷하게 구축을 하면 될것이다. Nodejs 구축 및 Vue3 axios 설치 Vue3에서 Nodejs 와 연동하기 위해 axios 패키지를 사용한다. npm install axios 설치가 완료되었다면, axios를 사용하여 api를 호출하면 된다. 이것도 방법이 여러가지가 있는데, 자신에 적합한 방법을 선택하여 사용하면 된다. axios.js 파일을 만들고 모듈화하여 사용하였다. 파일 내용은 다음과 같다. import axios from "axios"; import store from "./store"; const axiosClient = axios.create({ }) axiosClien..

vue3 + d3.js 에서 날씨 지도를 만들기위해 chatGPT에게 다음과 같이 질문을 하였다. 정말 자세한 코드와 설명을 응답해주었다. 하지만 돌아가지 않는 코드 ㅜㅜ bing에 물어봤더니... 자세한 정보에 필자의 블로그 주소가 나왔다. 어리둥절한 순간! 이런 코드를 작성한 적이 없는데 자세한 정보에 왜 필자의 블로그가 나오는 걸까? 위 코드는 data 가 없어서 제대로 실행되지 않는다. 눈으로 봐도 실행될 것 같이 않아 테스트를 하지 않았다. 어쩔수 없이 검색의 노동을 동원하여 날 코딩으로 지도 만들기를 구현하였다. 위 코드에서 import korea from '../../assets/mapjson/koreaarea.json'; import * as topojson from "https://cdn..

d3.js는 topojson이나 geojson을 활용하여 지도를 만들 수 있다. 이번에는 vue3 + d3.js로 날씨 지도를 만들어 보기로 한다. 위 사진과 같이 대한민국 지도 위에 시도별 날씨 정보를 보여주기로 한다. 시도별 날씨정보와 기상상태에 따라 이미지로 표현한다. 준비물 1. d3.js에서 사용할 지도파일 지도파일은 인터넷에서 공개되는 topojson이나 geojson 파일을 사용하거나, 공공데이터로 만들어진 Shape file(SHP) 파일을 구해 https://mapshaper.org/ 에서 topojson이나 geojson 파일로 변환하여 사용할 수 있다. 직접 변환해서 사용하고자 한다면, 파일의 좌표계를 확인하고 변환해야 한다.(좌표계 변환 및 확인으로 고생을 했음) 이런 것을 사용해서..

ChatGPT에서 Vue3 예제 코드 응답 시 this.$refs.컴포넌트를 사용하는 코드 예제를 제시할 경우가 있다. 이 경우 properties of undefined (reading '$refs') 에러가 발생 할 수 있는데, 그 이유는 대부분 setup() 에서 사용했기 때문이다. ref 속성을 사용하려면 컴포넌트 랜더링이 완료된 후 사용하면 된다. 따라서 mounted()에서 사용하면 에러는 해결된다.

ChatGPT를 활용하여 파이차트 예제 코드까지 완성하였으니, 이제는 애니메이션 파이 차트를 만들어 보기로 한다. 가장 먼저 다음과 같은 질문을 ChatGPT에 던진다. 그(그녀)가 제시한 코드는 아래와 같다. 이번에도 완성된 코드를 제시하였다. 지난 파이 차트 코드와 비교하니 arc.append('path') .attr('d', path) .attr('fill', d => color(d.data.label)) .transition() .duration(1000) .attrTween('d', function(d) { const i = d3.interpolate(d.startAngle + 0.1, d.endAngle); return function(t) { d.endAngle = i(t); return p..