럿고의 개발 노트
[인프런] 웹 게임을 만들며 배우는 Vue 4. 반응속도체크 본문
Vue.js Note/[인프런] 웹 게임을 만들며 배우는 Vue(동영상 강의)
[인프런] 웹 게임을 만들며 배우는 Vue 4. 반응속도체크
KimSeYun 2019. 11. 12. 14:17[인프런] 웹 게임을 만들며 배우는 Vue
4. 반응속도 체크
4.1. 반응속도체크와 webpack watch
4.2. v-bind와 vue style
4.3. webpack-dev-server
4.4. 반응속도체크 게임 완성하기
4.5. computed와 v-show, template
- 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.
[ResponseCheck.html]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>반응속도 체크</title> </head> <body> <!-- Vue와 비동기통신을 같이 사용하는 방법을 배우는 것 npm i : package.json에 있는 것들을 알아서 설치해줌 .gitignore을 파일 생성하고 안에다가 깃에 올리지 않을 것을 넣어주면 됨.(node_modules는 무겁기 때문에 깃에 안올리는게 좋음, dist폴더도 어차피 다 합쳐주는 거기 때문에 node를 실행하면 자동으로 생성해줌.) package.json에서 bulid: "webpack --watch"라고 적어주면 변경될때마다 자동으로 npm run build를 실행 npm i webpack-dev-server : 코드를 변경한 후 저장하면 새로고침할 필요 없이 알아서 화면도 코드에 맞춰서 변경 --> <div id ="root"></div> <script src="./dist/app.js"></script> </body> </html> | cs |
[RespnseCheck.vue]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | <!-- vue 파일 --> <!-- HTML로 생각할 수도 있지만 결국 자바스크립트 --> <!-- v-bind를 사용하면 data를 넣을 수 있음, :class에 데이터를 넣어주기 위해 사용 --> <!-- 축약형은 ':'이걸 붙여주면 됨 -->\ <!-- message가 변경되면 template안에 있는 dom이 재 랜더링 된다. 그러다 보면 average에 있는 계산도 다시 실행되기 때문에, 응답속도가 느리다. 그러나 computed를 사용하면 캐싱이 되어 average는 캐싱된걸 그대로 가져오기 때문에 응답속도가 올라간다 즉, 성능최적화 부분이다 --> <template> <div> <!-- template안에 바로 template을 못쓰기 때문에 여기에서는 div를 사용함.--> <div id = "screen" :class="state" @click="onClickScreen">{{message}}</div> <div v-show="result.length"> <!-- v-show는 뒤에 속성이 true값이여야 보인다. v-if는 아예 보여지지 않지만, v-show는 태그를 만들어서 display:none으로 처리한다. div대신 template를 사용할수도 있다. 그러면 없는 태그로 하는 한다. --> <div>평균 시간: {{average}}ms</div> <button @click="onReset">리셋</button> </div> </div> </template> <script> let startTime = 0; // 화면이 보여진 시간 let endTime = 0; // 내가 클릭한 시간 let timeout = null; export default { data(){ return{ result: [], state: 'waiting', message: '클릭해서 시작하세요.', }; }, computed: { // 일반데이터를 가공해서 사용할때 computed를 사용하는 것이 좋다, computed를 사용하는 이유는 저 값이 캐싱이 되기 때문에. average(){ return this.result.reduce((a, c) => a + c, 0) / this.result.length || 0; } }, methods: { onReset(){ // 리셋 this.result = []; }, onClickScreen(){ // 게임 로직 if(this.state == 'waiting'){ this.state = 'ready'; this.message = '초록색이 되면 클릭하세요.'; timeout = setTimeout(() => { this.state = 'now'; this.message = '지금 클릭!'; startTime = new Date(); // 초록색 창이 시작한 곳 }, Math.floor(Math.random() * 1000) + 2000); // 2 ~ 3초 } else if(this.state === 'ready'){ clearTimeout(timeout); // 기존 timeout 없애기 this.state = 'waiting'; this.message = '너무 성급하시군요! 초록색이 되면 클릭하세요.' } else if (this.state === 'now'){ endTime = new Date(); // 누른 시간 this.state = 'waiting'; this.message = '클릭해서 시작하세요.' this.result.push(endTime - startTime); } } }, }; </script> <!-- CSS --> <!--style을 사용하기 위해서는 vue-style-loader, css-loader가 필요. npm i vue-style-loader / css-loader--> <!-- scoped : 이 컴포넌트 안에서만 이 CSS를 사용하고 싶다면 scoped를 사용하면 된다. --> <style scoped> #screen { width: 300px; height: 200px; text-align: center; user-select: none; } #screen.waiting { background-color: aqua; } #screen.ready { background-color: red; color: white; } #screen.now{ background-color: greenyellow; } </style> | cs |
Array.prototype.reduce() : 배열의 각 요소에 대해 주어진 reducer함수를 실행하고 하나의 결과값을 반환
리듀서 함수는 네 개의 인자를 가짐
1. 누산기(acc) 2. 현재값(cur) 3. 현재 인덱스(idx) 4. 원본 배열(src)
여기서 사용한것은 a + c (acc + cur)이라고 생각하면 됨.
[package.json]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | { "name": "response-Check", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "bulid": "webpack --watch", "dev": "webpack-dev-server --hot" }, "author": "", "license": "ISC", "dependencies": { "vue": "^2.6.10", "vue-loader": "^15.7.2", "vue-template-compiler": "^2.6.10", "webpack": "^4.41.2", "webpack-cli": "^3.3.10" }, "devDependencies": { "css-loader": "^3.2.0", "vue-style-loader": "^4.1.2", "webpack-dev-server": "^3.9.0" } } | cs |
[main.js]
1 2 3 4 5 | import Vue from 'Vue'; // Vue를 불러오는 것 import ResponseCheck from './ResponseCheck'; // NumberBaseball.vue를 가져오는 것 new Vue(ResponseCheck).$mount('#root'); // Vue 인스턴스, 인스턴스안에 사용할 컴포넌트를 넣어줘야 함. | cs |
[webpack.config.js]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | const VueLoaderPlugin = require('vue-loader/lib/plugin'); const path = require('path'); // 경로 불러오는 것 module.exports = { // 노드에 모듈을 만듬, 이안에 웹팩 모든 설정을 넣으면 됨. mode:'development', // 배포할건지 개발한건지 devtool: 'eval', // 개발할때는 eval, 배포할때는 hid,den-source-map resolve: { extensions: ['.js', '.vue'], // 이걸 하면 import할때 확장자를 넣어줄 필요가 없다. }, entry: { // 스크립트를 모인것 중에서 대표적인 스크립트 app : path.join(__dirname, 'main.js'), // app은 하나로 합친 스크립트 이름 }, module: { // 웹팩의 핵심 // entry로 처리하다가 이상한거 나오면 loader를 실행 rules: [{ // 합칠때 어떻게 합칠지를 설정해주는 것 test: /\.vue$/, // .vue로 끝나는 파일은 vue-loader를 사용하겠다, 정규표현식 loader: 'vue-loader', // npm i vue-loader },{ test: /\.css$/, use: [ // loader와 user는 똑같은 기능 'vue-style-loader', 'css-loader', ] }], }, plugins: [ new VueLoaderPlugin(), ], output: { filename: '[name].js', // 출력할 파일 이름(최종결과) path: path.join(__dirname, 'dist'), // 폴더 경로 publicPath: '/dist', // webpack-dev-server 세팅시 필요 }, }; // entry, module, plugins, output이 주 설정 나머지는 부가적인 설정 | cs |
깃허브 주소
https://github.com/ksy90101/Vue.js/tree/master/vue-Webgame-inflearn/Chapter04
출처
'Vue.js Note > [인프런] 웹 게임을 만들며 배우는 Vue(동영상 강의)' 카테고리의 다른 글
| [인프런] 웹 게임을 만들며 배우는 Vue 6. 로또 추점기 (0) | 2019.11.14 |
|---|---|
| [인프런] 웹 게임을 만들며 배우는 Vue 5. 가위바위보 (0) | 2019.11.14 |
| [인프런] 웹 게임을 만들며 배우는 Vue - 3. 숫자야구 (0) | 2019.11.11 |
| [인프런] 웹 게임을 만들며 배우는 Vue - 2. 구구단 (0) | 2019.11.08 |
| [인프런] 웹 게임을 만들며 배우는 Vue - 1. 끝말잇기 (0) | 2019.11.07 |
Comments