어느 덧 입사한지 10개월이 다 되어간다.
그 동안 회사에서 많은 작업들로 다양한 경험을 채워 나갔다.
우리 회사 서비스의 지표가 되는 데이터 시각화 차트 그래프도 맡아서 몇개월을 유지보수하며 UI & UX를 개선해나갔다.
그래프는 많은 양의 데이터를 다루고, 정제 과정을 거쳐야 했기에 기획자와 백엔드 서버 작업해주시는 동료분과의 꽤나 긴 협업이 이루어졌다. // 이런 중요한 작업을 맡을 수 있어서 내게 굉장히 큰 영광이라고 생각한다.
해당 차트 그래프를 보여주는 페이지에서 많은 양의 데이터가 필요하는 다른 컴포넌트도 있었기에 꽤나 무거운 페이지라고 볼 수 있다. 그래프는 애초에 CDN 데이터로 하였지만, 다른 컴포넌트는 API로 DB 데이터를 가져왔다. 그래서 초반에 배포했을 시점에서는 해당 페이지에 접속하면 렌더링이 끝날 때까지 3초 정도 걸렸던 거 같다.
페이지에 접속했을 때, 바로 렌더링 되는 것이 아닌 3초씩이나 걸리는 속도 문제는 사용자의 사이트 체류 시간을 방해하는 결정적인 요소라 생각한다. 그래서 회사에서 속도 개선 방안으로 나온 것이 CDN이었다.
해당 페이지에서는 API로 DB 데이터가 필요한 게 아닌 경우에는 모두 CDN으로 json 파일을 불러와 화면을 렌더링하였다.
그렇게 하여 페이지 로드 시간은 1초 미만의 시간으로 단축 시킬 수 있었다.
💭 그럼 CDN에 있는 json 파일은 어떻게 생성되게 했는가?
서버단에서 DB 데이터를 접근하고 그 데이터를 1차적으로 정제한다. // 데이터 시각화의 필요에 의한 정제
그리고 객체의 객체의 객체의 깊은 구조로 감싸는 작업을 해준다. 그렇게 매일 자정이 되면 깊은 구조의 객체를 return 해서 CDN 버킷에 업로드 되게 되어 있다.
이렇게 CDN에 json 파일이 생성되면, 프론트에서 axios(json 파일에 대한 url 접근)로 가져오게 된다.
왜 CDN은 속도 최적화에 유리할까?
그것은 다음 포스팅에서는 CDN의 이점에 대해 게시물을 올려볼 예정이다.
