차트 라이브러리 스크롤링 이슈 해결

 

 

X축으로 스크롤링이 가능한 차트를 구현해야했다.

 

차트 라이브러리는 ApexChart를 사용했다. 많은 사람들이 사용하시더라.

 

스크롤링 기능은 아래와 같이 설계하여 구현했다.

 

 

차트 라이브러리에 종속된 자잘한 사용자 편의 기능도 구현이 필요했다. 

• 태어난 해에 따른 차트 부분이 하이라이팅 되어야 했다.
• 사용자는 차트에서 자신의 나이가 하이라이팅된 부분을 바로 볼 수 있어야 했다.

1998년을 선택하면

98년생인 24세 부분이 하이라이팅되어야 했다.

 

차트에 하이라이팅되는 기능은 차트 라이브러리의 공식문서를 읽어가면서 어렵지 않게 구현할 수 있었다.

하이라이팅된 부분에 스크롤이 이동하는 것도 ref와 useEffect를 이용해 간단히 구현할 수 있었다.

 

다만 강제로 잡은 스크롤이 앱 환경에서는 의도치않게 x좌표가 0으로 초기화되는 이슈가 있었으나, 팀원들과 함께 상의하여 문제를 잘 해결했다.

 

문제 해결에 도달한 사고 과정은 아래와 같다.

 

1. 스크롤을 강제로 이동시키는 useEffect 로직에 이슈가 있는지 확인한다.

• useEffect 내부에 alert을 넣어서 언제 이펙트가 실행되는지 체킹한다.
• useEffect를 뺀 후 스크롤링을 해도 x좌표가 0으로 초기화되는지 확인해본다.

확인 결과 useEffect에는 문제가 없었던 걸로 판명되었다.

 

2. 스크롤 div 내부에 차트를 빼고 그라데이션이 있는 div를 넣어 체크해본다.

• 차트 라이브러리가 아닌 단순 div만 스크롤링 했을 경우에도 좌표가 0으로 초기화되는지 확인해본다.
• 만약 단순 div만 스크롤링 했을때도 좌표가 초기화되면 차트 라이브러리에 문제가 없는 것이다. (앱 환경에서만 좌표가 0으로 초기화 되었으므로 앱 자체 환경 이슈일 수도 있었다.)
• 단순 div를 스크롤링했을 때 좌표가 초기화되지 않는다면 그것은 차트 라이브러리의 문제이다.
• 차트 라이브러리가 canvas로 되어있는지, svg로 되어있는지 확인해본다.

확인 결과, 단순 div의 경우에는 스크롤링을 해도 좌표가 0으로 초기화되지 않았다.

차트 라이브러리는 div가 svg를 감싼 형태로 구성되어 있었다.

 

3. 라이브러리의 영향을 받지 않는 단순 div로 차트 라이브러리를 감싸보자. (해결)

• 단순 div는 x좌표가 0으로 초기화되지 않는다는 현상을 이용한다.
• 차트 라이브러리와 동일한 width와 height를 가진 div로 차트를 감싼다.
• 바깥의 창문 역할을 하는 div는 차트를 감싼 div를 보여주게 된다.

 

해결되었다!

 

앱에서 ApexChart에 div를 감싸 스크롤이 가능하도록 만들었을 때 x 좌표가 계속 0이 되는 이유는 아직도 찾지 못하였다. 하지만 웹이나 앱 환경 자체에서 svg 사용이 감지되었을 때, 최적화를 하기 위해 의도치 않은 동작을 수행할 수 있다는 것은 알게 되었다. 이번 케이스에서는 단순히 라이브러리 문제였을 것 같다.

 

 

느낀점

• 어려운 문제가 있을 경우, 팀원들과 함께 머리를 맞대고 궁리하는 시간을 갖는 것은 매우 중요하다.
• 아예 안풀리는 문제는 잘 없다. 어떤 단서가 있다면 그것을 바탕으로 문제를 해결하려는 시도를 해보자.