├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── axios.html
    ├── callback.html
    ├── favicon.ico
    ├── img
    │   ├── p0.jpg
    │   ├── p1.jpg
    │   ├── p2.jpg
    │   ├── p3.jpg
    │   ├── p4.jpg
    │   ├── p5.jpg
    │   ├── p6.jpg
    │   ├── p7.jpg
    │   └── 이미지
    ├── index.html
    ├── js
    │   └── axios.min.js
    ├── json
    │   └── products.json
    ├── promise.html
    └── string.html
└── src
    ├── App.vue
    ├── assets
        └── logo.png
    ├── components
        ├── NavBar.vue
        ├── Product.vue
        └── SearchBar.vue
    └── main.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 25.vue-product
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Customize configuration
19 | See [Configuration Reference](https://cli.vuejs.org/config/).
20 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "25.vue-product",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "@fortawesome/fontawesome-free": "^5.12.0",
11 |     "axios": "^0.19.2",
12 |     "bootstrap": "^4.4.1",
13 |     "core-js": "^3.4.4",
14 |     "vue": "^2.6.10"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^4.1.0",
18 |     "@vue/cli-service": "^4.1.0",
19 |     "less": "^3.0.4",
20 |     "less-loader": "^5.0.0",
21 |     "vue-template-compiler": "^2.6.10"
22 |   },
23 |   "browserslist": [
24 |     "> 1%",
25 |     "last 2 versions"
26 |   ]
27 | }
28 | 


--------------------------------------------------------------------------------
/public/axios.html:
--------------------------------------------------------------------------------
 1 | <script src="./js/axios.min.js"></script>
 2 | <script>
 3 | var appid = '02efdd64bdc14b279bc91d9247db4722';
 4 | var dailyURL = 'https://api.openweathermap.org/data/2.5/weather';
 5 | var daysURL = 'https://api.openweathermap.org/data/2.5/forecast';
 6 | var params = {
 7 | 	appid: appid,
 8 | 	id: 1835848,
 9 | 	units: "metric"
10 | };
11 | 
12 | (async function(){
13 | 	var result = await axios.get(dailyURL, {params: params});
14 | 	console.log(result);
15 | })();
16 | 
17 | /*
18 | axios.get(dailyURL, {params: params}).then(function(res){
19 | 	console.log(res);
20 | });
21 | */
22 | </script>


--------------------------------------------------------------------------------
/public/callback.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | function sum(a, b, cb) {
 3 | 	var c = a + b;
 4 | 	setTimeout(function(){
 5 | 		cb(c);
 6 | 	}, 0);
 7 | }
 8 | 
 9 | function multi(a, b, cb) {
10 | 	var c = a * b;
11 | 	setTimeout(function(){
12 | 		cb(c);
13 | 	}, 0);
14 | }
15 | 
16 | function divide(a, b, cb) {
17 | 	var c = a / b;
18 | 	setTimeout(function(){
19 | 		cb(c);
20 | 	}, 0);
21 | }
22 | 
23 | console.log("SUM 하기 전");
24 | sum(10, 20, function(v){
25 | 	console.log("10 과 20의 합은 " + v + "입니다.");
26 | 	multi(30, v, function(v2) {
27 | 		console.log("30 과 " + v + "의 곱은 " + v2 + "입니다.");
28 | 		divide(50, v2, function(v3) {
29 | 			console.log("50 과 " + v2 + "의 나누기는 " + v3 + "입니다.");
30 | 		});
31 | 	});
32 | });
33 | console.log("SUM 하고난 후");
34 | 
35 | 
36 | // ES6
37 | // Promise !!!!!
38 | </script>


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/booldook/2020-ay-ui-vue-product/f8b0f5d7235adb7540488e2be4964d5f56be2530/public/favicon.ico


--------------------------------------------------------------------------------
/public/img/p0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/booldook/2020-ay-ui-vue-product/f8b0f5d7235adb7540488e2be4964d5f56be2530/public/img/p0.jpg


--------------------------------------------------------------------------------
/public/img/p1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/booldook/2020-ay-ui-vue-product/f8b0f5d7235adb7540488e2be4964d5f56be2530/public/img/p1.jpg


--------------------------------------------------------------------------------
/public/img/p2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/booldook/2020-ay-ui-vue-product/f8b0f5d7235adb7540488e2be4964d5f56be2530/public/img/p2.jpg


--------------------------------------------------------------------------------
/public/img/p3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/booldook/2020-ay-ui-vue-product/f8b0f5d7235adb7540488e2be4964d5f56be2530/public/img/p3.jpg


--------------------------------------------------------------------------------
/public/img/p4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/booldook/2020-ay-ui-vue-product/f8b0f5d7235adb7540488e2be4964d5f56be2530/public/img/p4.jpg


--------------------------------------------------------------------------------
/public/img/p5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/booldook/2020-ay-ui-vue-product/f8b0f5d7235adb7540488e2be4964d5f56be2530/public/img/p5.jpg


--------------------------------------------------------------------------------
/public/img/p6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/booldook/2020-ay-ui-vue-product/f8b0f5d7235adb7540488e2be4964d5f56be2530/public/img/p6.jpg


--------------------------------------------------------------------------------
/public/img/p7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/booldook/2020-ay-ui-vue-product/f8b0f5d7235adb7540488e2be4964d5f56be2530/public/img/p7.jpg


--------------------------------------------------------------------------------
/public/img/이미지:
--------------------------------------------------------------------------------
1 | .


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ko">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>25.vue-product</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but 25.vue-product doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/public/js/axios.min.js:
--------------------------------------------------------------------------------
1 | /* axios v0.19.2 | (c) 2020 by Matt Zabriskie */
2 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.axios=t():e.axios=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){var t=new s(e),n=i(s.prototype.request,t);return o.extend(n,s.prototype,t),o.extend(n,t),n}var o=n(2),i=n(3),s=n(4),a=n(22),u=n(10),c=r(u);c.Axios=s,c.create=function(e){return r(a(c.defaults,e))},c.Cancel=n(23),c.CancelToken=n(24),c.isCancel=n(9),c.all=function(e){return Promise.all(e)},c.spread=n(25),e.exports=c,e.exports.default=c},function(e,t,n){"use strict";function r(e){return"[object Array]"===j.call(e)}function o(e){return"undefined"==typeof e}function i(e){return null!==e&&!o(e)&&null!==e.constructor&&!o(e.constructor)&&"function"==typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)}function s(e){return"[object ArrayBuffer]"===j.call(e)}function a(e){return"undefined"!=typeof FormData&&e instanceof FormData}function u(e){var t;return t="undefined"!=typeof ArrayBuffer&&ArrayBuffer.isView?ArrayBuffer.isView(e):e&&e.buffer&&e.buffer instanceof ArrayBuffer}function c(e){return"string"==typeof e}function f(e){return"number"==typeof e}function p(e){return null!==e&&"object"==typeof e}function d(e){return"[object Date]"===j.call(e)}function l(e){return"[object File]"===j.call(e)}function h(e){return"[object Blob]"===j.call(e)}function m(e){return"[object Function]"===j.call(e)}function y(e){return p(e)&&m(e.pipe)}function g(e){return"undefined"!=typeof URLSearchParams&&e instanceof URLSearchParams}function v(e){return e.replace(/^\s*/,"").replace(/\s*$/,"")}function x(){return("undefined"==typeof navigator||"ReactNative"!==navigator.product&&"NativeScript"!==navigator.product&&"NS"!==navigator.product)&&("undefined"!=typeof window&&"undefined"!=typeof document)}function w(e,t){if(null!==e&&"undefined"!=typeof e)if("object"!=typeof e&&(e=[e]),r(e))for(var n=0,o=e.length;n<o;n++)t.call(null,e[n],n,e);else for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.call(null,e[i],i,e)}function b(){function e(e,n){"object"==typeof t[n]&&"object"==typeof e?t[n]=b(t[n],e):t[n]=e}for(var t={},n=0,r=arguments.length;n<r;n++)w(arguments[n],e);return t}function E(){function e(e,n){"object"==typeof t[n]&&"object"==typeof e?t[n]=E(t[n],e):"object"==typeof e?t[n]=E({},e):t[n]=e}for(var t={},n=0,r=arguments.length;n<r;n++)w(arguments[n],e);return t}function S(e,t,n){return w(t,function(t,r){n&&"function"==typeof t?e[r]=C(t,n):e[r]=t}),e}var C=n(3),j=Object.prototype.toString;e.exports={isArray:r,isArrayBuffer:s,isBuffer:i,isFormData:a,isArrayBufferView:u,isString:c,isNumber:f,isObject:p,isUndefined:o,isDate:d,isFile:l,isBlob:h,isFunction:m,isStream:y,isURLSearchParams:g,isStandardBrowserEnv:x,forEach:w,merge:b,deepMerge:E,extend:S,trim:v}},function(e,t){"use strict";e.exports=function(e,t){return function(){for(var n=new Array(arguments.length),r=0;r<n.length;r++)n[r]=arguments[r];return e.apply(t,n)}}},function(e,t,n){"use strict";function r(e){this.defaults=e,this.interceptors={request:new s,response:new s}}var o=n(2),i=n(5),s=n(6),a=n(7),u=n(22);r.prototype.request=function(e){"string"==typeof e?(e=arguments[1]||{},e.url=arguments[0]):e=e||{},e=u(this.defaults,e),e.method?e.method=e.method.toLowerCase():this.defaults.method?e.method=this.defaults.method.toLowerCase():e.method="get";var t=[a,void 0],n=Promise.resolve(e);for(this.interceptors.request.forEach(function(e){t.unshift(e.fulfilled,e.rejected)}),this.interceptors.response.forEach(function(e){t.push(e.fulfilled,e.rejected)});t.length;)n=n.then(t.shift(),t.shift());return n},r.prototype.getUri=function(e){return e=u(this.defaults,e),i(e.url,e.params,e.paramsSerializer).replace(/^\?/,"")},o.forEach(["delete","get","head","options"],function(e){r.prototype[e]=function(t,n){return this.request(o.merge(n||{},{method:e,url:t}))}}),o.forEach(["post","put","patch"],function(e){r.prototype[e]=function(t,n,r){return this.request(o.merge(r||{},{method:e,url:t,data:n}))}}),e.exports=r},function(e,t,n){"use strict";function r(e){return encodeURIComponent(e).replace(/%40/gi,"@").replace(/%3A/gi,":").replace(/%24/g,"$").replace(/%2C/gi,",").replace(/%20/g,"+").replace(/%5B/gi,"[").replace(/%5D/gi,"]")}var o=n(2);e.exports=function(e,t,n){if(!t)return e;var i;if(n)i=n(t);else if(o.isURLSearchParams(t))i=t.toString();else{var s=[];o.forEach(t,function(e,t){null!==e&&"undefined"!=typeof e&&(o.isArray(e)?t+="[]":e=[e],o.forEach(e,function(e){o.isDate(e)?e=e.toISOString():o.isObject(e)&&(e=JSON.stringify(e)),s.push(r(t)+"="+r(e))}))}),i=s.join("&")}if(i){var a=e.indexOf("#");a!==-1&&(e=e.slice(0,a)),e+=(e.indexOf("?")===-1?"?":"&")+i}return e}},function(e,t,n){"use strict";function r(){this.handlers=[]}var o=n(2);r.prototype.use=function(e,t){return this.handlers.push({fulfilled:e,rejected:t}),this.handlers.length-1},r.prototype.eject=function(e){this.handlers[e]&&(this.handlers[e]=null)},r.prototype.forEach=function(e){o.forEach(this.handlers,function(t){null!==t&&e(t)})},e.exports=r},function(e,t,n){"use strict";function r(e){e.cancelToken&&e.cancelToken.throwIfRequested()}var o=n(2),i=n(8),s=n(9),a=n(10);e.exports=function(e){r(e),e.headers=e.headers||{},e.data=i(e.data,e.headers,e.transformRequest),e.headers=o.merge(e.headers.common||{},e.headers[e.method]||{},e.headers),o.forEach(["delete","get","head","post","put","patch","common"],function(t){delete e.headers[t]});var t=e.adapter||a.adapter;return t(e).then(function(t){return r(e),t.data=i(t.data,t.headers,e.transformResponse),t},function(t){return s(t)||(r(e),t&&t.response&&(t.response.data=i(t.response.data,t.response.headers,e.transformResponse))),Promise.reject(t)})}},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t,n){return r.forEach(n,function(n){e=n(e,t)}),e}},function(e,t){"use strict";e.exports=function(e){return!(!e||!e.__CANCEL__)}},function(e,t,n){"use strict";function r(e,t){!i.isUndefined(e)&&i.isUndefined(e["Content-Type"])&&(e["Content-Type"]=t)}function o(){var e;return"undefined"!=typeof XMLHttpRequest?e=n(12):"undefined"!=typeof process&&"[object process]"===Object.prototype.toString.call(process)&&(e=n(12)),e}var i=n(2),s=n(11),a={"Content-Type":"application/x-www-form-urlencoded"},u={adapter:o(),transformRequest:[function(e,t){return s(t,"Accept"),s(t,"Content-Type"),i.isFormData(e)||i.isArrayBuffer(e)||i.isBuffer(e)||i.isStream(e)||i.isFile(e)||i.isBlob(e)?e:i.isArrayBufferView(e)?e.buffer:i.isURLSearchParams(e)?(r(t,"application/x-www-form-urlencoded;charset=utf-8"),e.toString()):i.isObject(e)?(r(t,"application/json;charset=utf-8"),JSON.stringify(e)):e}],transformResponse:[function(e){if("string"==typeof e)try{e=JSON.parse(e)}catch(e){}return e}],timeout:0,xsrfCookieName:"XSRF-TOKEN",xsrfHeaderName:"X-XSRF-TOKEN",maxContentLength:-1,validateStatus:function(e){return e>=200&&e<300}};u.headers={common:{Accept:"application/json, text/plain, */*"}},i.forEach(["delete","get","head"],function(e){u.headers[e]={}}),i.forEach(["post","put","patch"],function(e){u.headers[e]=i.merge(a)}),e.exports=u},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){r.forEach(e,function(n,r){r!==t&&r.toUpperCase()===t.toUpperCase()&&(e[t]=n,delete e[r])})}},function(e,t,n){"use strict";var r=n(2),o=n(13),i=n(5),s=n(16),a=n(19),u=n(20),c=n(14);e.exports=function(e){return new Promise(function(t,f){var p=e.data,d=e.headers;r.isFormData(p)&&delete d["Content-Type"];var l=new XMLHttpRequest;if(e.auth){var h=e.auth.username||"",m=e.auth.password||"";d.Authorization="Basic "+btoa(h+":"+m)}var y=s(e.baseURL,e.url);if(l.open(e.method.toUpperCase(),i(y,e.params,e.paramsSerializer),!0),l.timeout=e.timeout,l.onreadystatechange=function(){if(l&&4===l.readyState&&(0!==l.status||l.responseURL&&0===l.responseURL.indexOf("file:"))){var n="getAllResponseHeaders"in l?a(l.getAllResponseHeaders()):null,r=e.responseType&&"text"!==e.responseType?l.response:l.responseText,i={data:r,status:l.status,statusText:l.statusText,headers:n,config:e,request:l};o(t,f,i),l=null}},l.onabort=function(){l&&(f(c("Request aborted",e,"ECONNABORTED",l)),l=null)},l.onerror=function(){f(c("Network Error",e,null,l)),l=null},l.ontimeout=function(){var t="timeout of "+e.timeout+"ms exceeded";e.timeoutErrorMessage&&(t=e.timeoutErrorMessage),f(c(t,e,"ECONNABORTED",l)),l=null},r.isStandardBrowserEnv()){var g=n(21),v=(e.withCredentials||u(y))&&e.xsrfCookieName?g.read(e.xsrfCookieName):void 0;v&&(d[e.xsrfHeaderName]=v)}if("setRequestHeader"in l&&r.forEach(d,function(e,t){"undefined"==typeof p&&"content-type"===t.toLowerCase()?delete d[t]:l.setRequestHeader(t,e)}),r.isUndefined(e.withCredentials)||(l.withCredentials=!!e.withCredentials),e.responseType)try{l.responseType=e.responseType}catch(t){if("json"!==e.responseType)throw t}"function"==typeof e.onDownloadProgress&&l.addEventListener("progress",e.onDownloadProgress),"function"==typeof e.onUploadProgress&&l.upload&&l.upload.addEventListener("progress",e.onUploadProgress),e.cancelToken&&e.cancelToken.promise.then(function(e){l&&(l.abort(),f(e),l=null)}),void 0===p&&(p=null),l.send(p)})}},function(e,t,n){"use strict";var r=n(14);e.exports=function(e,t,n){var o=n.config.validateStatus;!o||o(n.status)?e(n):t(r("Request failed with status code "+n.status,n.config,null,n.request,n))}},function(e,t,n){"use strict";var r=n(15);e.exports=function(e,t,n,o,i){var s=new Error(e);return r(s,t,n,o,i)}},function(e,t){"use strict";e.exports=function(e,t,n,r,o){return e.config=t,n&&(e.code=n),e.request=r,e.response=o,e.isAxiosError=!0,e.toJSON=function(){return{message:this.message,name:this.name,description:this.description,number:this.number,fileName:this.fileName,lineNumber:this.lineNumber,columnNumber:this.columnNumber,stack:this.stack,config:this.config,code:this.code}},e}},function(e,t,n){"use strict";var r=n(17),o=n(18);e.exports=function(e,t){return e&&!r(t)?o(e,t):t}},function(e,t){"use strict";e.exports=function(e){return/^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(e)}},function(e,t){"use strict";e.exports=function(e,t){return t?e.replace(/\/+$/,"")+"/"+t.replace(/^\/+/,""):e}},function(e,t,n){"use strict";var r=n(2),o=["age","authorization","content-length","content-type","etag","expires","from","host","if-modified-since","if-unmodified-since","last-modified","location","max-forwards","proxy-authorization","referer","retry-after","user-agent"];e.exports=function(e){var t,n,i,s={};return e?(r.forEach(e.split("\n"),function(e){if(i=e.indexOf(":"),t=r.trim(e.substr(0,i)).toLowerCase(),n=r.trim(e.substr(i+1)),t){if(s[t]&&o.indexOf(t)>=0)return;"set-cookie"===t?s[t]=(s[t]?s[t]:[]).concat([n]):s[t]=s[t]?s[t]+", "+n:n}}),s):s}},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){function e(e){var t=e;return n&&(o.setAttribute("href",t),t=o.href),o.setAttribute("href",t),{href:o.href,protocol:o.protocol?o.protocol.replace(/:$/,""):"",host:o.host,search:o.search?o.search.replace(/^\?/,""):"",hash:o.hash?o.hash.replace(/^#/,""):"",hostname:o.hostname,port:o.port,pathname:"/"===o.pathname.charAt(0)?o.pathname:"/"+o.pathname}}var t,n=/(msie|trident)/i.test(navigator.userAgent),o=document.createElement("a");return t=e(window.location.href),function(n){var o=r.isString(n)?e(n):n;return o.protocol===t.protocol&&o.host===t.host}}():function(){return function(){return!0}}()},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){return{write:function(e,t,n,o,i,s){var a=[];a.push(e+"="+encodeURIComponent(t)),r.isNumber(n)&&a.push("expires="+new Date(n).toGMTString()),r.isString(o)&&a.push("path="+o),r.isString(i)&&a.push("domain="+i),s===!0&&a.push("secure"),document.cookie=a.join("; ")},read:function(e){var t=document.cookie.match(new RegExp("(^|;\\s*)("+e+")=([^;]*)"));return t?decodeURIComponent(t[3]):null},remove:function(e){this.write(e,"",Date.now()-864e5)}}}():function(){return{write:function(){},read:function(){return null},remove:function(){}}}()},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){t=t||{};var n={},o=["url","method","params","data"],i=["headers","auth","proxy"],s=["baseURL","url","transformRequest","transformResponse","paramsSerializer","timeout","withCredentials","adapter","responseType","xsrfCookieName","xsrfHeaderName","onUploadProgress","onDownloadProgress","maxContentLength","validateStatus","maxRedirects","httpAgent","httpsAgent","cancelToken","socketPath"];r.forEach(o,function(e){"undefined"!=typeof t[e]&&(n[e]=t[e])}),r.forEach(i,function(o){r.isObject(t[o])?n[o]=r.deepMerge(e[o],t[o]):"undefined"!=typeof t[o]?n[o]=t[o]:r.isObject(e[o])?n[o]=r.deepMerge(e[o]):"undefined"!=typeof e[o]&&(n[o]=e[o])}),r.forEach(s,function(r){"undefined"!=typeof t[r]?n[r]=t[r]:"undefined"!=typeof e[r]&&(n[r]=e[r])});var a=o.concat(i).concat(s),u=Object.keys(t).filter(function(e){return a.indexOf(e)===-1});return r.forEach(u,function(r){"undefined"!=typeof t[r]?n[r]=t[r]:"undefined"!=typeof e[r]&&(n[r]=e[r])}),n}},function(e,t){"use strict";function n(e){this.message=e}n.prototype.toString=function(){return"Cancel"+(this.message?": "+this.message:"")},n.prototype.__CANCEL__=!0,e.exports=n},function(e,t,n){"use strict";function r(e){if("function"!=typeof e)throw new TypeError("executor must be a function.");var t;this.promise=new Promise(function(e){t=e});var n=this;e(function(e){n.reason||(n.reason=new o(e),t(n.reason))})}var o=n(23);r.prototype.throwIfRequested=function(){if(this.reason)throw this.reason},r.source=function(){var e,t=new r(function(t){e=t});return{token:t,cancel:e}},e.exports=r},function(e,t){"use strict";e.exports=function(e){return function(t){return e.apply(null,t)}}}])});
3 | //# sourceMappingURL=axios.min.map


--------------------------------------------------------------------------------
/public/json/products.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"products": [
 3 | 		{"id": 1, "src": "p0.jpg", "title": "product_01", "price": "$18.00"},
 4 | 		{"id": 2, "src": "p1.jpg", "title": "product_02", "price": "$22.00"},
 5 | 		{"id": 3, "src": "p2.jpg", "title": "product_03", "price": "$12.00"},
 6 | 		{"id": 4, "src": "p3.jpg", "title": "product_04", "price": "$19.99"},
 7 | 		{"id": 5, "src": "p4.jpg", "title": "product_05", "price": "$19.99"},
 8 | 		{"id": 6, "src": "p5.jpg", "title": "product_06", "price": "$18.00"},
 9 | 		{"id": 7, "src": "p6.jpg", "title": "product_07", "price": "$17.99"},
10 | 		{"id": 8, "src": "p7.jpg", "title": "product_08", "price": "$17.99"}
11 | 	]
12 | }


--------------------------------------------------------------------------------
/public/promise.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | function sum(a, b) {
 3 | 	return new Promise(function(resolve, reject) {
 4 | 		setTimeout(function(){
 5 | 			var c = a + b;
 6 | 			var num = Math.floor(Math.random()*2);
 7 | 			if(num) resolve(c);
 8 | 			else reject("구글이 죽었어요");
 9 | 		}, 0);
10 | 	});
11 | }
12 | 
13 | function multi(a, b) {
14 | 	return new Promise(function(resolve, reject) {
15 | 		setTimeout(function(){
16 | 			var c = a * b;
17 | 			resolve(c);
18 | 		}, 0);
19 | 	});
20 | }
21 | 
22 | function divide(a, b) {
23 | 	return new Promise(function(resolve, reject) {
24 | 		setTimeout(function(){
25 | 			var c = a / b;
26 | 			resolve(c);
27 | 		}, 0);
28 | 	});
29 | }
30 | 
31 | 
32 | sum(10, 30)
33 | .then(function(result){
34 | 	console.log(result);
35 | 	return multi(50, result);
36 | })
37 | .then(function(result2){
38 | 	console.log(result2);
39 | 	return divide(20, result2);
40 | })
41 | .then(function(result3) {
42 | 	console.log(result3);
43 | })
44 | .catch(function(err) {
45 | 	console.log(err);
46 | });
47 | 
48 | (async function(){
49 | 	var result = await sum(10, 30);
50 | 	var result2 = await multi(50, result);
51 | 	var result3 = await divide(20, result2);
52 | 	console.log(result, result2, result3);
53 | })();
54 | 
55 | /*
56 | $.ajax({
57 | 	url: "/json/products.json",
58 | 	type: "get",
59 | 	success: function(res) {
60 | 
61 | 	}
62 | });
63 | $.get("/json/products.json", function(res){
64 | 
65 | });
66 | $.post("/json/products.json", function(res){
67 | 
68 | });
69 | */
70 | </script>


--------------------------------------------------------------------------------
/public/string.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ko">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 | 	<title>Document</title>
 8 | </head>
 9 | <body>
10 | 	<div id="wrap"></div>
11 | 
12 | 
13 | 	<script>
14 | 	var	users = ['홍길동', '홍길순', '홍길영'];
15 | 	var html = '';
16 | 	// for(var i=0; i< users.length; i++) {
17 | 	// for(var i in users) {
18 | 	for(var v of users) {
19 | 		html += `
20 | 		<div class="user">
21 | 			<h2 class="name">${v}</h2>
22 | 		</div>`;
23 | 	}
24 | 	//$("#wrap").append(html);
25 | 	document.querySelector("#wrap").innerHTML = html;
26 | 	</script>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <nav-bar />
 4 |     <div class="container">
 5 |       <search-bar v-bind:query="query" v-on:@submit="onSubmit" v-on:@reset="onSubmit" />
 6 |       <product v-show="query.length" v-bind:query="query" />
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import SearchBar from './components/SearchBar.vue';
13 | import NavBar from './components/NavBar.vue';
14 | import Product from './components/Product.vue';
15 | 
16 | export default {
17 |   name: 'app',
18 |   data() {
19 |     return {
20 |       query: ''
21 |     }
22 |   },
23 |   components: {
24 |     'search-bar': SearchBar,
25 |     'nav-bar': NavBar,
26 |     'product': Product,
27 |   },
28 |   methods: {
29 |     onSubmit(value) {
30 |       this.query = value;
31 |     }
32 |   }
33 | }
34 | </script>
35 | 
36 | <style lang="less">
37 | 
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/booldook/2020-ay-ui-vue-product/f8b0f5d7235adb7540488e2be4964d5f56be2530/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<ul class="nav justify-content-center">
 3 | 			<li class="nav-item">
 4 | 					<a class="nav-link active" href="#">Active link</a>
 5 | 			</li>
 6 | 			<li class="nav-item">
 7 | 					<a class="nav-link" href="#">Link</a>
 8 | 			</li>
 9 | 			<li class="nav-item">
10 | 					<a class="nav-link disabled" href="#">Disabled link</a>
11 | 			</li>
12 | 	</ul>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 | 
18 | }
19 | </script>
20 | 
21 | <style lang="less">
22 | 
23 | </style>


--------------------------------------------------------------------------------
/src/components/Product.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="prd-wrap">
 3 | 		<div class="prd" v-for="v in prds" v-bind:key="v.id">
 4 | 			<img v-bind:src="`/img/${v.src}`" alt="상품" class="w-100">
 5 | 			<div class="title">{{v.title}}</div>
 6 | 			<div class="price">{{v.price}}</div>
 7 | 		</div>
 8 | 	</div>
 9 | </template>
10 | 
11 | <script>
12 | import axios from 'axios';
13 | 
14 | export default {
15 | 	name: "Product",
16 | 	props: ['query'],
17 | 	data() {
18 | 		return {
19 | 			prds: []
20 | 		}
21 | 	},
22 | 	watch: {
23 | 		query: async function(newValue, oldValue) {
24 | 			var res = await axios.get("/json/products.json");
25 | 			this.prds = res.data.products;
26 | 		}
27 | 	},
28 | 	created() {
29 | 		
30 | 	}
31 | }
32 | </script>
33 | 
34 | <style lang="less">
35 | .prd-wrap {
36 | 	display: flex;
37 | 	flex-wrap: wrap;
38 | 	.prd {
39 | 		flex: 23% 0 0;
40 | 		margin: 1%;
41 | 		border: 1px solid #ccc;
42 | 		padding: 12px;
43 | 		.title {
44 | 			font-size: 1.5rem;
45 | 		}
46 | 		.price {
47 | 			font-size: 1.25rem;
48 | 			color: #999;
49 | 		}
50 | 	}
51 | }
52 | </style>


--------------------------------------------------------------------------------
/src/components/SearchBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<form v-on:submit.prevent="onSubmit" id="search-form" class="position-relative">
 3 | 		<input v-model="inputQuery" type="text" id="query" class="form-control" placeholder="검색어를 입력하세요." autofocus>
 4 | 		<i v-on:click="onReset" v-show="inputQuery.length" id="btReset" class="fa fa-times-circle"></i>
 5 | 	</form>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 | 	name: "search-bar",
11 | 	props: ['query'],
12 | 	data() {
13 | 		return {
14 | 			inputQuery: ""
15 | 		}
16 | 	},
17 | 	methods: {
18 | 		onSubmit() {
19 | 			this.$emit('@submit', this.inputQuery);
20 | 		},
21 | 		onReset() {
22 | 			this.inputQuery = '';
23 | 			this.$emit('@reset', this.inputQuery);
24 | 		}
25 | 	}
26 | }
27 | </script>
28 | 
29 | <style lang="less">
30 | #btReset {position: absolute; top: 12px; right: 12px; cursor: pointer;}
31 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | 
 4 | import '@fortawesome/fontawesome-free/css/all.min.css';
 5 | import 'bootstrap/dist/css/bootstrap.min.css';
 6 | 
 7 | Vue.config.productionTip = false;
 8 | 
 9 | new Vue({
10 |   render: h => h(App),
11 | }).$mount('#app');
12 | 


--------------------------------------------------------------------------------