invisible hand

iot의 발전은 시작되었고, 미래를 위해 이 기술을 학습하는 것은 개발자입장에서 좋은 위치를 가지고 있는 것이라고 판단된다. 전문가는 아니지만, 나만의 iot 장비를 만들어 보기로 한다. 미세먼지, 이산화탄소 등 공기질 측정기는 어떤 센서를 사용하느냐에 따라 가격이 차이가 심하다. ESP32 + SHT30 + PM 2008M + SenseAir S8 + OELD 0.96를 사용한 공기질 측정기 다음과 같은 기능을 할 수 있는 공기질 측정기를 만들고자 한다. 1. 온도 습도 측정이 가능해야 한다. 2. 미세먼지 측정이 가능해야 한다. 3. 이산화탄소 측정이 가능해야 한다. 4. 측정값이 확인 가능해야 한다. 5. IoT 세상이니 측정된 정보를 외부로 보낼 수 있으면 좋겠다. 위 기능을 만족하기 위해 선정한..

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를 나름대로 사용했다. 개발을 위해 사용도 해보고, 글쓰기에도 사용도 해보고 여러 방면에서 테스트를 해봤다. 결론은 나름 쓸만하다는 것이다. 정말 잘 쓰기 위해서는 다음과 같은 내용이 알아두면 편리할 것이다. 1. 사용하고자 하는 분야의 사전 지식이 있어야 가치 있게 활용할 수 있다. ChatGPT가 완벽하게 응답할 것이라는 기대는 버리는 것이 좋다. 대부분의 응답이 비정상이지는 않지만, 그렇다고 100% 맞는 답을 주는 것이 아니다. 따라서 사전 지식이 부족하다면 기존 검색을 통해 사전 지식을 확보하는 것이 보다 효과적으로 사용할 수 있을 것이다. 2. 질문을 잘해야 한다. 영어를 잘한다면 영어로 질문하는 것이 보다 효과적이다. 그렇지 않다면 추상적인 질문보다는 구체적인 질문을 하는..

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