드디어 pixi로 그래프 그리기에 성공했다.
그간 아주 다사다난한 일이 있었는데... 간략하게 그 히스토리를 남겨보고자 한다.
pixi.js 8.0.5 버전 사용
pixi.js는 15시간 전에도 새로운 버전 릴리즈를 했듯이 아주 활발하게 업데이트 되고 있는 라이브러리다. 공식 깃허브 Releases를 참고해보면 v8.0.0-rc.11가 2024년 2월이고 현재 8.0.5까지 나와 있는 상태다.
활발하게 업데이트 되고 있는 것은 라이브러리가 더 나아지고 있다는 말이기도 하지만, 그렇다고 무턱대고 최신 버전을 도입하면 버그도 많이 발생할 수 있고, 참고할 자료가 많이 없어서 러닝커브가 현저히 높아진다.
나도 처음에 최신버전으로 설치했었다. 그런데 8버전에서 아예 Pixi 인스턴스 초기화 부분이 달라졌다.
// 옛날 버전
import { Application } from 'pixi.js';
const app = new Application();
// do pixi things위와 같이 옛날 버전은 그냥 new 키워드와 함께 Application을 불러와 인스턴스를 만들면 됐다.
// 바뀐 8버전
import { Application } from 'pixi.js'
const app = new Application();
(async () => {
await app.init({
// application options
});
// do pixi things
})()하지만 8버전에서는 Applictaion을 생성한 뒤 이를 즉시실행 함수를 활용해서 init을 시켜주어야 했다.
나는 pixi-react를 사용하면 pixi를 그냥 사용하는 것보다 아무래도 성능이 떨어진다고 하여 사용하지 않았다. 이처럼 pixi-react를 사용하지 않으면, 원래 d3로 그래프를 그려줬던 것처럼 useEffect 내부에 해당 설정을 해주어야 한다. 따라서 아래와 같이 설정했다.
const PixiGraph = ({ nodes, links }: Graph) => {
const pixiContainer = useRef(null);
useEffect(() => {
(async () => {
// Create a new application
const app = new Application();
// 초기화
await app.init({
resizeTo: window,
background: 'transparent',
resolution: window.devicePixelRatio || 1,
autoDensity: true, // CSS 크기에 맞추어 자동으로 density 조정
});
app.renderer.resolution = 4;
document.body.appendChild(app.canvas);
// ...중략
// clean up
return () => {
app.destroy(true, {
children: true,
texture: true,
});
};
})();
}, [nodes, links]);
return <div ref={pixiContainer} />;
};
현재까지 pixi로 그린 그래프
원래 그래프 그림과 아직 노드 크기나, 그래프의 force 측면에서 차이가 좀 나지만, 그룹별 노드 색 설정, 대강의 force 설정, 위치 설정 등을 했다.
그러다가 ...
여기에 원래 D3로 그래프를 그렸을 때 있었던, 줌인 줌아웃, 그래프 노드 드래그 기능을 추가하려고 했다. 이 기능들을 '손수' 넣어줄 수 있다. 하지만 D3만큼의 퍼포먼스를 내려면 라이브러리를 사용하는 쪽이 더 효율적이라 판단했다. pixi에서 이런 기능을 지원해주는 viewport 라는 라이브러리가 있다.
그런데, viewport는 아직 8.0.5를 지원하지 않는다... 현재 최고 버전이 5.2 버전인데 여기서는 pixi 7 버전을 사용하고 있다.
따라서 다시 Pixi버전을 7로 낮추어 개발을 하기로 했다.
여태 짰던 코드들도 다시 버전 다운그레이드에 맞추어 바꿔야한다...
바뀐 버전에 맞추어 다시 코드를 짜고 그 게시물에서는 순차적으로 그래프 그리는 방법도 설명하겠다!!
Next App Router를 사용하면서도 그랬지만, 라이브러리를 무조건 높은 버전, 최신에 나온 것을 사용하는게 답이 아니라는 것을 점점 체감하고 있다. 아무리 더 발전된 버전이어도 예상치 못한 버그를 만나거나 다른 라이브러리와의 의존성이 깨지게 되면 더 큰 문제를 낳기 때문이다!
항상 새로운 기술에 관심을 갖되, 적절히 잘 활용하도록 하자~~!!! 또 하나 배우고 간닷!!
