럿고의 개발 노트

[인프런] 웹 게임을 만들며 배우는 Vue8. 지뢰찾기8.1. 지뢰찾기 구조 만들기8.2. 지뢰찾기 코드 부여하기8.3. 데이터 가공해 화면 그리기8.4. 타이머 켜고 끄기8.5. 칸 클릭하기8.6. 지뢰 밟기와 주변 지뢰 개수 찾기8.7, 주변 칸 한 번에 열기8.8. 승리 조건 체크하기와 마무리- 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.[main.js] 1234import Vue from 'vue';import MineSweeper from './MineSweeper'; new Vue(MineSweeper)...

[인프런] 웹 게임을 만들며 배우는 Vue7. 틱택토7.1. 2차원배열(테이블 구조 짜기)7.2. this.$root, this.$parent7.3. Vue.set7.4. 틱택토 완성하기7.5. EventBus 사용하기7.6. Vuex 구조 세팅하기7.7, Vuex Mutations7.8. Vuex state 사용하기7.9. mapState와 Q&A7.10. Vuex devtools 분석히기7.11. slot- 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.Ex1. 틱택토[main.js] 1234import Vue fr..

[인프런] 웹 게임을 만들며 배우는 Vue6. 로또 추첨기6.1. vue 스타일 가이드- https://kr.vuejs.org/v2/style-guide/6.2. 자식 컴포넌트와 props6.3. 로또 추첨기 구현하기6.4. watch 사용해보기- watch는 왠만하면 사용하지 말것! 무한반복의 굴레에 들어갈수도 있음.- 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.[main.js] 1234import Vue from 'vue';import LottoGenerator from './LottoGenerator'; new..

[인프런] 웹 게임을 만들며 배우는 Vue5. 가위바위보5.1. vue-devtools와 기타 정보들5.2. :class와 :style5.3. vue 라이프사이클5.4. 가위바위보 완성과 devtools 분석 - 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.[main.js] 12345import Vue from 'Vue'; // Vue를 불러오는 것 import RockScissorsPaper from './RockScissorsPaper'; // NumberBaseball.vue를 가져오는 것 new Vue(Rock..

[인프런] 웹 게임을 만들며 배우는 Vue4. 반응속도 체크4.1. 반응속도체크와 webpack watch4.2. v-bind와 vue style4.3. webpack-dev-server4.4. 반응속도체크 게임 완성하기4.5. computed와 v-show, template - 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.[ResponseCheck.html] 123456789101112131415161718192021 반응속도 체크 Colored by Color Scriptercs [RespnseCheck.vue] ..

[인프런] 웹 게임을 만들며 배우는 Vue3. 숫자야구3.1. 웹팩 사용하기3.2. 프로젝트 구조와 웹팩 빌드3.3. 웹팩 로더 사용하기3.4. v-for로 반복문 사용하기3.5. 숫자야구 완성하기- 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.[NmberBaseball.html] 123456789101112131415161718192021222324252627 숫자야구 Colored by Color Scriptercs [NumberBaseball.vue] 1234567891011121314151617181920212..

[인프런] 웹 게임을 만들며 배우는 Vue2. 구구단2.1. 컴포넌트의 필요성2.2. 컴포넌트의 특성2.3. props와 웹팩의 필요성 - 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요![끝말잇기] -> 컴포넌트를 이용하여 한 페이지의 끝말잇기 여러개 넣기 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 끝말잇기(컴포넌트 이용) // Vue 컴포넌트, 컴포넌트는 인스턴스보다 위에 있어야 함! Vue.component("wo..

[인프런] 웹 게임을 만들며 배우는 Vue1. 끝말잇기1.1. 강좌 소개와 맛보기1.2. data와 v-if, v-else1.3. 보간법과 v-model1.4. ref와 구구단 완성하기1.5. 끝맛잇기 만들며 복습1.6. Q & A - 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요! [좋아요] -> 버튼을 눌렀을때, 버튼을 눌렀다는 글나오게 하기 1234567891011121314151617181920212223242526272829 좋아요 좋아요 눌렀음 Like const app = new Vue({ el: "#root", // Vue가 id root를 통제할 수 있도록 하는 것 data:{ /..