번데기 개발자의 메모장

인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# Webpack을 이용하여 npm과 webpack을 통해 Vue 인스턴스를 사용하기 위한 기본 구조를 잡는 방법을 알아봅니다. 4-1) Vue-loader webpack config 설정 webpack.config.js파일에 있는 module의 Loader를 통해 빌드시 JS파일이 아닌 파일(ex .vue)파일을 Javascript 파일로 변환해 줄 수 있다. module의 Loader는 꼭 Javasc..

인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# Webpack을 이용하여 npm과 webpack을 통해 Vue 인스턴스를 사용하기 위한 기본 구조를 잡는 방법을 알아봅니다. NPM 패키지 모듈 설정하기 webpack 설정을 위해 webpack, webpack-cli, vue-loader, vue-template-compiler에 대한 npm install을 진행합니다. package.json을 보면 다음과 같습니다. 추가적으로 vue-template..

인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# 뷰 인스턴스 코드를 npm으로 수행하기 cdn으로 사용할때는 아래와 같이 Vue 인스턴스를 실행한다. const app = new Vue({ el: '#root', }) npm을 이용하여 설치를 한 이후에는 다음과 같이 Vue 인스턴스를 실행한다. import Vue from 'vue'; import NumberBaseball from './NumberBaseball.vue'; // 숫자야구 vue 컴..

인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# 웹펙의 사용이유 웹펙 관리의 어려움보다 스크립트 관리의 어려움이 커질때 웹펙이 필요하다. 웹펙을 사용하려면 노드를 사용해야하는데, node 홈페이지에서 LTS node버전을 받는 것을 추천한다. 노드를 설치하면 npm을 사용할 수 있는데, 이는 남이 작성한 자바스크립트 라이브러리를 사용할 수 있도록 도와준다. npm init을 하면 package.json파일이 생기는데 이는 내가 사용한 남의 자바스크립..

인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# (2-1강) Vue 컴포넌트의 사용 이유 컴포넌트 사용은 데이터가 중복되는 것을 피하고 동일한 내용을 반복하고자 할때 사용한다. 컴포넌트를 사용하지 않게 되면, 코드가 지저분하고 중복이 되게 된다. 반복되는 부분을 Component로 만든다. Vue 컴포넌트는 다음과 같이 작성한다. (파스칼 케이스나 케밥케이스를 사용) Vue.component(‘word-replay’); Vue 에서 알아두면 좋은 변..

인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# 1-1강 ( cdn으로 Vue 사용해보기) Data를 바꾸면 알아서 뷰 화면이 바뀐다. 화면과 데이터를 일치시키는 것이 중요하다. 데이터만 관리한다. => 생각하는 방식을 데이터중심으로 바꾸는 것이 중요하다. 즉 데이터를 바꾸면 View가 바뀐다. 해당 cdn으로 vue.js를 이용할 수 있다. 1-2강 (data와 v-if, v-else) onclick => v.on:click 뷰에서 통제하는 메서드..