invisible hand

Vue를 사용하여 개발할 경우 Request URL GET Query parameter를 전달해야 할 경우가 있다. 검색 조건이 2개 이상인 경우 예를 들어 http://localhost:8000/price?large=09&mid=01 위와 같은 URL를 만들어 서버를 호출해야 할 경우 아래 예제는 vuex와 axios를 사용하였다. axios 사용 관련 예제코드는 아래 글을 참고하면 좋을 것 같다. [dev] - 12. Vue3 + Nodejs 연동 12. Vue3 + Nodejs 연동 이번은 Vue3와 Nodejs와 연동하는 것에 대해 소개한다. Nodejs는 다른 블로그에서도 많이 소개를 하니 비슷하게 구축을 하면 될것이다. Nodejs 구축 및 Vue3 axios 설치 Vue3에서 Nodejs 와..

이번에는 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파일로 ..

vscode에서 vue을 개발하다 보면, export default (await import('vue')).defineComponent({} 위의 굵은 색으로 표시된 힌트가 보일 경우가 있다. 이 경우 defaultSettiongs.json 에서 vue.inlayHints.optionWrapper의 값을 false로 변경하면 된다. 하지만 맥의 경우 command + shift + p로 defaultSettions.json을 열어보면 readonly로 수정이 되지 않는다. 다음과 같이 따라하면 답답함을 해결할 수 있다. vscode 메뉴에서 code > Preferences > Setting을 선택하면 Settings 화면이 나타나고, vue.inlayHint 키워드로 찾으면 나타난다. 그 부분이 선택되..

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