invisible hand

Nodejs 와 연동이 되었다면 다음 코드를 통해 화면에 날씨 정보를 표현할 수 있을 것이다. 먼저 request 시 Nodejs에서는 데이터 위치 정보도 같이 전달해야 한다. 전달되는 정보는 다음과 같다. 지역정보가 함께 전달되어야 지도위 정보를 바탕으로 위치를 찾을 수 있기 때문이다. 중요한 코드는 다음과 같다. setup() { const store = useStore(); store.dispatch("getWeatherInfo"); return { mapdata: computed(() => store.state.weather.data), loading: computed(() => store.state.weather.loading), }; }, 이것은 Nodejs에 request를 요청하는 코드이다..

이번은 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..

이제 지도 파일을 이용해 시도별 대한민국 지도를 화면에 표현했다. 다음은 공공데이터에서 날씨를 가져오는 부분인데 전체 흐름도는 다음과 같다. 이번은 전체 흐름에 대해서만 설명하고 다음부터 코드와 관련되어 설명하고자 한다. 물론 Vue에서 공공데이터를 바로 가져와 처리할 수 있지만, 외부 데이터 수집 처리부를 따로 분리하여 예제 코드를 만들어 보기로 한다. 처리할 부분은 다음과 같다. 1. Vue + Nodejs 연동 2. Nodejs + DB 연동 3. python + DB 연동 + 공공데이터 연동 구글을 검색하면 각각의 연동과 관련된 예제 코드들이 많아 어려움은 없다. python + DB 연동 + 공공데이터 연동 공공데이터 신청을 하게되면 활용한 API에 대한 샘플 소스를 제공한다. 샘플 소스를 그대..

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로 Three.js 라이브러리를 사용하여 움직이는 박스를 만드는 것이다. ChatGPT를 계속 사용하면서 느끼는 것이지만, 가장 중요한 것은 '질문을 어떻게 하느냐?' 이에 따라 응답의 질이 결정되는 듯하다. 아직 초보인 나는 질문을 잘 못하는 것 같다. ChatGPT에 적당한 질문을 한다. 응답과 함께 다음과 같은 예제 코드를 제공하였다. 눈으로 보면 코드의 오류는 없어 보이는 듯 하다. 그대로 복붙을 하고 실행해 보니 다음과 같은 에러가 발생했다. properties of undefined (reading '$refs') 간단히 말하면 $refs를 setup()에서 사용했기 때문이다. 뭐 그럴 수 있지... 수정한 후 다행히 에러는 발생하지 않았지만, 아무것도 나타나지 않는..

이번은 Python을 사용한 라인 차트 예제 코드를 만들고자 한다. ChatGPT에 다음과 같은 질문을 한다. import matplotlib.pyplot as plt import numpy as np import matplotlib.animation as animation # 애니메이션을 위한 플롯 생성 fig, ax = plt.subplots() x = np.arange(0, 2*np.pi, 0.01) line, = ax.plot(x, np.sin(x)) # 애니메이션 함수 def animate(i): line.set_ydata(np.sin(x + i/10.0)) return line, # 애니메이션 생성 ani = animation.FuncAnimation(fig, animate, np.arange..

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..

이번은 ChatGPT를 활용하여 Vue3 + D3.js 파이 차트 예제 코드를 만들어 보기로 한다. ChatGPT에게 다음과 같은 질문을 한다. ChatGPT가 제시한 코드는 다음과 같다. 이번 응답은 고맙게도 까지 완성했다. 과연 실행 결과는?... width, height 가 0이라 파이 차트를 그리지 못한다. ㅠㅠ 저 C는 왜 나온 걸까? 일단 그것을 알려고 하고 싶지 않다. 그럼 파이 차트를 그려보자 // const svgWidth = +svgContainer.attr('width'); // const svgHeight = +svgContainer.attr('height'); const svgWidth = 400 const svgHeight = 400 그리긴 그렸지만, 오 C 그래서 chatGPT..