d3.js 예제 코드를 vscode live server를 사용하여 확인하기

d3.js는 훌륭한 시각화 도구인 것은 확실하지만, 사용하기 어려운 단점이 있다. 

 

버전 업그레이드가 되면서 과거의 예제 코드를 그대로 사용할 수 없다.

 

패키지에 포함된 함수들이 변경이 있었기 때문에 이전 버전 예제로 최신 버전에서 사용할 경우

예상하지 못하는 에러에 많은 시간이 소요된다.

 

이런 상황에서 시간을 줄였던 경험을 공유하고자 한다.

 

예전 버전에서 실행한 후 d3.js 최신 버전으로 적용

이전 버전의 예제 코드를 구했다면 자신이 작성하는 코드에 바로 적용하지 말고,

예제 코드를 실행하고 최신 버전으로 수정뒤 정확히 동작하는지 확인을 한다.

 

이 과정에서 예제 코드를 구했다고 하더라도  대부분 html, js 파일로만 존재한다.

 

이때 유용하게 확인할 수 있는 도구가 vscode live server 인 듯하다. 

 

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

 

위 사이트에 가면 자세한 정보가 있고, vscode extensions에서 검색하여도 된다.

 

 

설치가 완료되면, 예제 코드에서 바로 실행할 수 있는 장점이 있어 유용하다.

 

해당 파일에서 마우스 오른쪽 버튼을 누르면 "open with live server" 가 보일 것이고 클릭하면 파일이 실행된다. 

 

 

이전 버전의 예제 코드를 정상적으로 실행되는지 확인한 후, 

 

<script src="http://d3js.org/d3.v4.min.js"></script>
//또는 
<script src="https://d3js.org/d3.v6.min.js"></script>

//예전 버전에서

//최신 버전으로 수정
<script src="https://d3js.org/d3.v7.min.js"></script>

최신 버전으로 수정한 뒤 실행했을 경우 정상적으로 동작하면

자신의 소스에 적용하여 사용하면 시간을 조금 줄일 수 있다.

 

만일 버전을 수정해서 정상적으로 동작하지 않으면,

최신 버전에서 제거된 함수를 사용한 것이 대부분으로

에러가 발생하는 부분을 수정하여야 한다.

 

이와 같이 d3.js의 예제 코드를 구했다고 하더라도 최신 버전에 적용하기 위해서는 테스트를 해야 하기 때문에

vscode live server를 사용하면 시간을 절약하고 예제 코드를 활용할 수 있을 것이다.