럿고의 개발 노트

● 강의 후기- 처음으로 제로초님의 강의를 접하게 되었는데, 목소리도 좋고 자세하게 설명해주시는것 같고 특히 예제를 직접하면서 하다보니 공부가 많이 된것 같다. - 프론트엔드 라이브러리 및 프레임워크는 처음써보게 되었는데, 재미를 많이 느끼게 된 시간이었다. - Vue를 기반으로 웹사이트를 하나 만들 생각이 팍팍 들었다 ㅎㅎ - Vuetify로 공부를 해서 개인 포트폴리오 사이트를 이번년도 안에 제작하는 것이 목표로 생기게 되었다 ㅎㅎ - 3번째 Vue관련 공부는 공식문서를 통해서 볼 예정인데, 언제 보게 될지는... 이번년도 안에 시작은 하자! - 웹팩과 node에 대해서도 많은 관심을 가지게 되었던 시간이었고 프론트엔드 라이브러리도 엄청나게 많기도 많다는걸 느끼게 되었다..ㅎㅎ - 다음 프론트엔드 관..

[인프런] 웹 게임을 만들며 배우는 Vue9. Vue Router9.1. Vue Router 설정하기- npm i vue-router 설치9.2. router-vue와 히스토리 라우터9.3. 동적 라우트 매칭9.4. 주소 쿼리스트링- 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.[main.js]1234import Vue from 'vue';import router from './Router'; new Vue(router).$mount('#root');cs [package.json]123456789101112131415..

[인프런] 웹 게임을 만들며 배우는 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..