invisible hand

d3.js로 라인 및 막대그래프를 사용할 때 x의 값이 날짜인 경우 scaleTime()을 사용한다. 예를 들어 데이터가 '2023-01-01' , '20230101' 등 날짜 표현은 다양하게 생성된다. 개발 시 하이픈을 제거한 '20230101'의 포맷을 많이 사용하는데, 이 경우 scaleTime()을 사용할 때 d3.timeParse()을 사용하여 포맷을 설정해줘야 한다. 다음 예시와 같이 사용하면 된다. const parseTime = d3.timeParse('%Y%m%d'); const x = d3.scaleTime() .range([0, width]) .domain( d3.extent(data, function (d) { return parseTime(d.saleDate);// 예시 }));..

mac에 설치된 mysql에 외부 PC에서 접속이 필요할 경우 몇가지 설정을 해야한다. 먼저 외부에서 접속하기 위해서는 root로 접속하기 보다는 user id를 새로 생성하여 접속하는 것이 안전하다. 다음과 같은 순서로 설정하면 된다. 1. root 계정으로 mysql에 접속 > mysql -u root -p 2. 외부 접속 계정 설정 > create user 'userid'@'%' identified by 'password'; 3. 계정에 권한 부여 > grant all on *.* to 'userid'@'%'; 4. 권한 적용 > flush privileges; 위와 같이 실행하면 mysql에서 외부 접속할 계정을 설정하였다. 외부 접속하려면 mysql에서 127.0.0.1 의 로컬 접속 뿐만 아니..

Vue 페이지를 호출할 경우 하나의 params 또는 여러개의 params를 전달해야 할 경우가 있다. 여러가지 방법이 있지만 개인적으로 사용한 방법을 공유한다. 예를 들어 분류 코드가 대/중/소 3가지로 분류되었을 경우 params 를 대/중/소 3개를 넘겨줘야 한다. Vue Router를 사용하여 대/중/소를 large/mid/small 로 넘겨준다고 가정할때 Code 로 호출하고 Vue Router 에는 { path: '/code/large/:lg/mid/:md/small/:sm', name: 'CodeVue', component: CodeVue }, 위와 같이 작성하면 된다. 물론 Router에는 CodeVue.vue 페이지를 import로 선언해야 한다. CodeVue.vue 페이지에서는 La..

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

mysql 데이터베이스를 사용하다, 테이블에 저장한 데이터타입이 사용하는 데이터타입과 달라 변환해야 할 경우가 있다. 1. 테이블에 char형으로 저장되어 있는 컬럼을 max(), min(), avg() 함수를 사용할 경우 원하지 않는 결과를 가져올 수 있는데, 이 경우 컬럼의 데이터타입을 int형으로 바꿔줘야 정확한 결과값을 얻을 수 있다. 2. 테이블의 데이터타입을 원하는 데이터타입으로 변환해야 할 경우 등등 위와 같은 경우 mysql cast() 함수를 사용하면 복잡한 문제를 해결할 수 있다. cast(value as datatype) => cast(기존컬럼명 as 변환할 데이터타입) 예시) int 형으로 변환 select cast(col1 as signed) from table; 예시) DATE ..

이번에는 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 키워드로 찾으면 나타난다. 그 부분이 선택되..

d3.js는 훌륭한 시각화 도구인 것은 확실하지만, 사용하기 어려운 단점이 있다. 버전 업그레이드가 되면서 과거의 예제 코드를 그대로 사용할 수 없다. 패키지에 포함된 함수들이 변경이 있었기 때문에 이전 버전 예제로 최신 버전에서 사용할 경우 예상하지 못하는 에러에 많은 시간이 소요된다. 이런 상황에서 시간을 줄였던 경험을 공유하고자 한다. 예전 버전에서 실행한 후 d3.js 최신 버전으로 적용 이전 버전의 예제 코드를 구했다면 자신이 작성하는 코드에 바로 적용하지 말고, 예제 코드를 실행하고 최신 버전으로 수정뒤 정확히 동작하는지 확인을 한다. 이 과정에서 예제 코드를 구했다고 하더라도 대부분 html, js 파일로만 존재한다. 이때 유용하게 확인할 수 있는 도구가 vscode live server 인..

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