Front-End
2023. 4. 23.
React 에서 Naver Maps API 를 사용할때 초기 페이지 로드 속도 최적화하기
제가 회사에서 작업하는 페이지에는 지도를 인터렉션 하는 UI 가 많습니다. 지도 API 는 모두 naver maps API 를 사용하고 있습니다. 이 naver maps API 를 이용하다보니, 페이지를 렌더링하는데 꽤나 많은 리소스가 잡히고 외부 리소스 script 이다 보니 다양한 트러블 슈팅을 경험 하였었는데요, 이번에 지도가 화면에 나타나는 속도를 개선하는 과정에서 겪은 이슈와 해결 과정등을 공유해볼까 합니다. 1. 일반적인 naver maps API 호출과 렌더링 보통 naver maps API 를 불러와 렌더링한다고 하면, 다음과 같이 렌더링 하게 됩니다. // public/index.html ... ... // Map Component // 지도에 나타낼 각 좌표에 대한 데이터를 props ..