apiMock

Author: jhkimwoowa

mocks/api/history/GET.json

@@ -0,0 +1,14 @@
+[
+  {
+    "keyword": "검색기록2",
+    "date": "12.03"
+  },
+  {
+    "keyword": "검색기록1",
+    "date": "12.02"
+  },
+  {
+    "keyword": "검색기록0",
+    "date": "12.01"
+  }
+]

mocks/api/search/GET.json

@@ -0,0 +1,13 @@
+[{
+  "id": 1,
+  "name": "[버거] 치즈버거처럼 생긴 새우버거",
+  "image": "https://images.unsplash.com/photo-1547584370-2cc98b8b8dc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
+}, {
+  "id": 2,
+  "name": "[샐러드] 맛있는 색깔의 콥셀러드",
+  "image": "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
+}, {
+  "id": 3,
+  "name": "[피자] 썸네일 주소가 잘못된 상품",
+  "image": "http://foo.bar/image.jpg"
+}]

package-lock.json

@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack",
     "lint": "eslint",
-    "start": "webpack-dev-server"
+    "start": "webpack-dev-server --progress"
   },
   "keywords": [],
   "author": "",
@@ -18,6 +18,7 @@
     "@babel/preset-env": "^7.7.4",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
+    "connect-api-mocker": "^1.7.0",
     "css-loader": "^3.2.0",
     "eslint": "^6.7.2",
     "file-loader": "^5.0.2",
@@ -28,5 +29,8 @@
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0"
+  },
+  "dependencies": {
+    "axios": "^0.19.0"
   }
 }

package.json

@@ -1,20 +1,14 @@
+import axios from 'axios'
+
 export default {
-  data: [{
-      keyword: '검색기록2',
-      date: '12.03'
-    },
-    {
-      keyword: '검색기록1',
-      date: '12.02'
-    },
-    {
-      keyword: '검색기록0',
-      date: '12.01'
-    },
-  ],
+  data: [],
+
+  async list() {
+    if (this.data.length) return this.data;
 
-  list() {
-    return Promise.resolve(this.data)
+    const result = await axios.get('/api/history')
+    this.data = result.data;
+    return this.data;
   },
 
   add(keyword = '') {

src/models/HistoryModel.js

@@ -1,23 +1,8 @@
-export default {
-  data: [{
-      keyword: '이탈리아'
-    },
-    {
-      keyword: '세프의요리'
-    },
-    {
-      keyword: '제철'
-    },
-    {
-      keyword: '홈파티'
-    }
-  ],
+import axios from 'axios'
 
-  list() {
-    return new Promise(res => {
-      setTimeout(() => {
-        res(this.data)
-      }, 200)
-    })
+export default {
+  async list() {
+    const result = await axios.get('/api/keywords');
+    return result.data;
   }
 }

src/models/KeywordModel.js

@@ -1,26 +1,8 @@
-const data = [{
-    id: 1,
-    name: '[버거] 치즈버거처럼 생긴 새우버거',
-    image: 'https://images.unsplash.com/photo-1547584370-2cc98b8b8dc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'
-  },
-  {
-    id: 2,
-    name: '[샐러드] 맛있는 색깔의 콥셀러드',
-    image: 'https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'
-  },
-  {
-    id: 3,
-    name: '[피자] 썸네일 주소가 잘못된 상품',
-    image: 'http://foo.bar/image.jpg'
-  }
-]
+import axios from 'axios'
 
 export default {
-  list() {
-    return new Promise(res => {
-      setTimeout(() => {
-        res(data)
-      }, 200);
-    })
+  async list() {
+    const result = await axios.get('/api/search');
+    return result.data;
   }
 }

src/models/SearchModel.js

@@ -2,6 +2,7 @@ const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const apiMocker = require('connect-api-mocker');
 
 module.exports = {
   mode: 'development',
@@ -13,7 +14,27 @@ module.exports = {
     path: path.resolve('./dist'),
   },
   devServer: {
+    contentBase: './dist',
+    publicPath: '/',
+    open: true, 
+    before: (app, server, compiler) => {
+      app.get('/api/keywords', (req, res) => {
+        res.json([
+          { keyword: '이탈리아' },
+          { keyword: '세프의요리' }, 
+          { keyword: '제철' }, 
+          { keyword: '홈파티'}
+        ])
+      })
+      app.use(apiMocker('/api', 'mocks/api'))
+    },
+    host: 'dev.domain.com',
+    stats: 'errors-only',
+    overlay: true,
+    port: 8081,
+    historyApiFallback: true,
   },
+  watch: false,
   module: {
     rules: [
       {