내맘대로

vuex는 간단하게 설명하면 데이터 저장소 역할의 라이브러리다. 간단하게라고 이야기한 이유는, 단순히 데이터를 저장하는 역할만 하지 않고 vuex 저장소의 데이터가 변경되면vue 컴포넌트가 바로 반영되는 상호작용도 해주기 때문이다. 아 개념을 설명하기 너무 어렵다 ㅠㅠ 이럴 땐, doc 문서가 최고 https://vuex.vuejs.org/kr/intro.html 개념은 doc에서 자세히 보는거로 하고..vuex를 프로젝트에서 사용하기 위해선 다음과 같은 절차가 필요하다. step 1. 프로젝트 내부에 vuex 모듈을 설치해야 한다. 다음의 명령어를 command 에서 실행하여 vuex 모듈을 다운받자. npm install vuex; step 2. vuex를 vue 애플리케이션에 주입시켜야 한다. 보통..

https://github.com/vuejs/awesome-vue#components--libraries awesome-vue 에서 외부 컴포넌트 라이브러리들이 모여있음. table, modal 등이 필요하다면,한번 쓱 살펴보고 npm 에서 다운받아서 사용해보아요

디버깅 툴을 개발할 때 너무나도 필요한 빛과 소금!! 크롬에서 디버깅 툴을 extension을 설치하여 사용할 수 있다. 크롬 설치 url : https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 크롬에서 해당 페이지가 vue 기반인지 여부를 보여주는데, vue 기반이다 싶으면 vue 마크에 불이 들어오고 아니면 안들어옴 ㅋㅋ (위 : vue 기반 / 아래 : vue 기반 X) 설치 후 개발자 도구에 들어가면 Vue 탭을 볼 수 있다. 짜잔. 각 vue component들을 찍어서 볼 수 있고, vuex 값도 체크 가능함! 혹시 개발자 도구에 vue 탭이 찍히지 않는다면, 코드에서 vue 설정 값을..

지난 글로 부모-자식 컴포넌트 간의 데이터 전달 방법에 대해 정리했다. 이번에는 개별의 컴포넌트 사이에서의 데이터 전달(통신) 방법에 대해 정리하겠다. Vue는 자체적으로 이벤트와 관련된 $emit, $on 메소드를 갖고 있어,보통 EventBus라는 이름의 Vue 객체 생성 후 해당 객체를 사용하여 서로 통신을 한다. 예제를 보자. 다음은 EventBus 생성 파일이다. - EventBus.js import Vue from 'vue'; export const BUS = new Vue(); 다음은 이벤트 호출/처리할 컴포넌트 선언 파일이다. - One.vue (이벤트 호출 컴포넌트) import { BUS } from './EventBus'; export default { name: 'One', moun..

vue에서도 부모-자식 형태의 컴포넌트 생성이 가능하다. 긴 말 없다. 바로 예시 코드를 보자. Parent.vue 부모 vue 컴포넌트의 코드는 낯이 익은 코드다. (http://iam-song.tistory.com/46?category=703225 참고) 부모에서는 자식 컴포넌트를 가져왔고,components에 사용할 컴포넌트라 선언을 하고 template에도 선언해 주었다. Child.vue {{mention}} Child.vue 코드도 그닥 다를 것이 없다. 그.런.데.!. 부모의 data 값을 자식에게 어떻게 넘겨줄 것인가? 여기서 부터가 다른점! - 부모의 데이터 자식에게 전달하기 경험 상, 부모 코드 부터 보는 것 보다 자식 코드 부터 보는게 이해하기 편했어서...자식 코드부터 보잣! Chi..

vue 생성 관련 내부 요소를 살펴보았으니,vue component의 라이프 사이클을 휘리릭 정리해보자. 가장 정확하고 잘 설명된 곳 : https://kr.vuejs.org/v2/guide/instance.html#인스턴스-라이프사이클-훅 라이프사이클은 간단히 다음과 같은 순서다. created(vue 객체 생성) > mounted(vue 객체를 dom에 붙인 시점) > destroyed(vue 객체 삭제) created와 destoyed는 이해하겠는데,mounted 시점을 이해하기가 어려웠다. 하여 예시 코드를 보며 살펴보자. 다음과 같이 vue 컴포넌트를 생성하고,각 라이프사이클의 시점에 log를 찍도록 해보았다. * 참고this.$el : vue 컴포넌트의 dom 객체.this._isMounted..

vue의 template 문법의 경우 doc에 설명된 내용을 보고 따라해도 이해하기 쉬울 정도로 간단하다. 심지어 ☆★한글★☆doc url : https://kr.vuejs.org/v2/guide/syntax.html 그래서 vue 선언 시의 script 코드의 내부에 어떤 객체가 있는가아-에 대해 간단하게 정리해보았다. (다른 요소들도 있지만 개발하면서 기본적으로 사용했던 요소들) 기본적으로 vue 선언 시 다음과 같은 형태로 선언하게 되는데.. 1) name name은 그냥 vue 객체의 이름을 의미한다. 이 값은 필수 값이 아닌 선택적인 값 2) components 현재의 컴포넌트에서 다른 컴포넌트를 사용하고자 할 때 사용하고자 하는 컴포넌트를 정의하는 곳 보통 다음과 같이 선언하여 사용한다. 현 ..

지난 글에서 vue-cli를 활용하여 Vue.js 기반의 프로젝트를 생성해보았다. 지난 글 : http://iam-song.tistory.com/45?category=703225 생성된 프로젝트의 구조를 한번 휘리릭 보면 - build : 웹팩으로 빌드하기 위해 필요한 파일 모음 dir- config : 각 환경 별 환경 변수 선언된 파일 모음 dir- node_modules : npm i 으로 설치된 외부 라이브러리 dir- src : 프로젝트 개발을 위한 메인 dir - asset : 이미지 등 css 관련 dir - components : 각 화면에 대한 component 선언 dir - router : 앱 라우터 선언 dir - main.js : Application의 실행을 위한 js 파일 - ..