feat: #8 Request naver image search api

package.json

@@ -14,6 +14,7 @@
     "vite": "^2.9.2"
   },
   "dependencies": {
+    "axios": "^0.26.1",
     "nanoid": "^3.3.1"
   }
 }

src/App.svelte

@@ -6,6 +6,17 @@
     CanvasCursor,
     BrushSize,
   } from './lib/index.js';
+  import { getImage } from './api/main';
+
+  const getSearchImageLists = async (search) => {
+    const result = await getImage(search);
+    console.log(result.data.items);
+  };
+  try {
+    getSearchImageLists('숫자 선잇기 도안');
+  } catch (err) {
+    console.error(err);
+  }
 </script>
 
 <div class="world">

src/api/core/index.js

@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+const { VITE_CLIENT_ID, VITE_CLIENT_SECRET } = import.meta.env;
+
+const request = axios.create({
+  baseURL: '/v1',
+  timeout: 2500,
+  headers: {
+    'X-Naver-Client-Id': VITE_CLIENT_ID,
+    'X-Naver-Client-Secret': VITE_CLIENT_SECRET,
+  },
+});
+
+export default request;

src/api/main.js

@@ -0,0 +1,9 @@
+import request from './core';
+
+export const getImage = (keyword) => {
+  const query = encodeURI(keyword);
+
+  return request.get(`/search/image`, {
+    params: { query, display: 20, start: 1 },
+  });
+};

vite.config.js

@@ -1,8 +1,18 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  base: '',
-  plugins: [svelte()],
+export default defineConfig(({ command, mode }) => {
+  // Load env file based on `mode` in the current working directory
+  const env = loadEnv(mode, process.cwd());
+  console.log(env);
+  return {
+    base: '',
+    plugins: [svelte()],
+    server: {
+      proxy: {
+        '/v1': env.VITE_BASE_API,
+      },
+    },
+  };
 });