반응형

보이지 않는 손 5

6. ChatGPT 로 Vue 3 + Three.js 움직이는 박스 예제 코드 만들기

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

dev 2023.02.09

4. ChatGPT로 Vue 3 + D3.js 애니메이션 파이 차트 만들기

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

dev 2023.02.06

3. ChatGPT로 만드는 Vue 3 + D3 파이 차트

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

dev 2023.02.05

2. ChatGPT Vue 3 + D3 라인 차트에 애니메이션 효과 넣기

ChatGPT에서 제시한 예제 코드로 Vue 3에서 D3 라인 차트를 만들어 보았다. 2023.02.03 - [D3] - 1. ChatGPT 를 이용한 Vue3 + D3.js Line Chart 예제 코드 만들기 1. ChatGPT 를 이용한 Vue3 + D3.js Line Chart 예제 코드 만들기 차트 라이브러리를 활용하여 데이터 시각화 (Chart)를 해보려고 한다. 필자의 레벨은 HTML+CSS+JavaScript 등 전부 초급이다. 초급 중에 왕 초급... 데이터 시각화 사이트를 만들기 위해 여러 개발 도구 datapuzzler.tistory.com 개인적으로 생각하는 D3의 강점은 애니메이션 효과를 넣어 동적으로 시각화 할 수 있다는 것이다. ChatGPT 제시한 예제 코드를 바탕으로 라인 ..

dev 2023.02.05

1. ChatGPT 를 이용한 Vue3 + D3.js Line Chart 예제 코드 만들기

차트 라이브러리를 활용하여 데이터 시각화 (Chart)를 해보려고 한다. 필자의 레벨은 HTML+CSS+JavaScript 등 전부 초급이다. 초급 중에 왕 초급... 데이터 시각화 사이트를 만들기 위해 여러 개발 도구를 검색한 결과 Vue3 + D3.js를 사용하기로 결정했다. D3.js는 대표적인 데이터 시각화 프레임워크로 알려져 있지만, 여러 단점이 존재하고 있다. 인터넷 검색을 해보면 단점에 대해 많이 나오니 생략을 한다. https://d3js.org/ D3.js - Data-Driven Documents D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS. d3js.org 위 공식페이지에 설치 방법 및 각종 예제를 제..

dev 2023.02.03
반응형