feat(docs): add ssr docs

docs/.vitepress/config.js

@@ -104,6 +104,16 @@ const config = {
               },
             ],
           },
+          {
+            text: "고급 가이드",
+            collapsable: false,
+            children: [
+              {
+                text: "SSR 지원",
+                link: "/advanced/ssr",
+              },
+            ],
+          },
           {
             text: "타입스크립트",
             collapsable: false,

docs/.vitepress/theme/index.js

@@ -11,6 +11,7 @@ import NaverPolygon from "../../example/Polygon.vue";
 export default {
   ...theme,
   enhanceApp({ app, router, siteData }) {
+    app.config.warnHandler = (msg, vm, trace) => {};
     app.component("naver-maps", NaverMaps);
     app.component("naver-marker", NaverMarker);
     app.component("naver-info-window", NaverInfoWindow);

docs/advanced/ssr.md

@@ -0,0 +1,31 @@
+# SSR 지원
+
+`vue3-naver-maps`는 SSR을 지원합니다. 기존 SPA 사용방법과 다른점은 Naver Script 생성 방식과 네이버 객체에 접근하는 방법이 달라집니다.
+
+## 스크립트 생성 및 객체 접근
+
+`SPA`에서는 웹 애플리케이션이 생성 될때(main.js) Naver Script가 생성 됩니다. 그러므로 Options API에서의 `beforeCreate` / `created`와 Composition API의 `setup`에서 네이버 객체 접근이 가능합니다.
+
+```js
+// SPA
+export default {
+  setup: () => {
+    console.log(new window.naver.maps());
+  },
+};
+```
+
+`SSR`에서는 `NaverMaps`컴포넌트의 LifeCycle인 `beforeMount`에서 Naver Script가 생성 됩니다. 네이버 객체에 접근하려면 `onMounted` 이후에 접근하여야 합니다.
+
+```js
+// SSR
+import { onMounted } from "vue";
+
+export default {
+  setup: () => {
+    onMounted(() => {
+      console.log(new window.naver.maps());
+    });
+  },
+};
+```

docs/index.md

@@ -16,7 +16,7 @@ footer: MIT Licensed | Copyright © 2021-present DongKyuuuu
 :::
 
 ::: info 알림
-`v0.6.0` 이상의 버전부터 `Vue SSR`을 지원합니다.
+`v0.6.0` 이상의 버전부터 `Vue SSR`을 지원합니다. 자세한 정보는 [SSR 지원](./advanced/ssr.md)에서 확인 가능합니다.
 :::
 
 `vue3-naver-maps`는 네이버에서 제공하는 `Naver Maps JavaScript API v3`를 간편하게 Vue.js 컴포넌트로 사용하기 위해서 제공하는 라이브러리 입니다. 컴포넌트 호출 후, 해당 Object를 전달받아 직접 제어할 수 있습니다.
@@ -34,6 +34,7 @@ footer: MIT Licensed | Copyright © 2021-present DongKyuuuu
 - `NaverEllipse` : 타원 컴포넌트
 - `NaverRectangle` : 사각형 컴포넌트
 - `NaverPolygon` : 폴리곤 컴포넌트
+- `NaverPolyline` : 폴리라인 컴포넌트
 
 ## 사용