Peep

EventBus도 힘들다 하면 VueX를 사용합니다.

props의 늪에서 벗어나기 위해 사용한다고 합니다만, 저는 큰 프로젝트는 한 적이 없어서 와닿지는 않았습니다.

하지만 실무에서 쓰려면 알아야겠죠.?

vueX는 데이터를 저장하는 공간이고 vuex는 데이터를 state라고 부릅니다.

이 방식은 data를 .vue파일에 저장하지 않고 .js파일에서 관리하는 부분입니다.

vueX는 4개의 기능을 알아야 합니다.

vuex를 install해줍니다.

npm install vuex

서버가 켜져있을때 npm install하면 오류날 때도 있으니까,, 에러가 난다면 로컬 서버 껏다가 다시 켜보도록 합시다.

(저는 몇 번이나 겪었습니다.)

그 다음 store가 들어갈 폴더와 js를 만들어줍니다.

저는 assets 하위에 두었습니다.

그후 store.js파일을 셋팅해줍니다.

vue, vuex를 import하여 사용하고 위의 4개의 기능을 사용해보도록 하겠습니다.

main.js

방금 만든 store를 import해서 Vue에 추가해줘야합니다.

그 다음 위의 vuex 기능에 맞춰 예제를 진행해보겠습니다.

data들은 state에 들어가면되므로 App.vue에 있던 postData를 예시로 가져오겠습니다.

store.js

App.vue에서도 postData를 가져오기 위해 data.js를 import했듯이 store.js에도 data.js를 import해줘야합니다.

그 후 postData를 state에 저장합니다. (컴포넌트의 data와 같지요?)

여기서 주의할 점은 직접적으로 state를 가져가거나 수정하면 안됩니다.

그래서 아래와 같이 getters에서 get하는 메서드를 생성해서 state를 가져가야 합니다.

이때 함수명에 대한 관습이 있다고 합니다.

state의 이름 그대로 사용하되, 대문자를 써야한다고 합니다.

state.postData는 state에 저장된 postData입니다.

이것을 return합니다.

그 후 사용하는 방법입니다.

App.vue 

this는 vue, $store에서 getters에 저장된 POSTDATA를 가져온다 = return state.postData였죠?

이렇게 문법에 맞게 사용하려는 부분에 적어주면됩니다.

App.vue에서 data를 import해오던 부분은 이제 사용을 안하므로 지워줍니다. 

data에 직접적으로 연결되었던 부분들을 수정해줍니다. (에러나는 부분을 확인하며 수정합니다)

이렇게 State, Getters를 사용해봤습니다.

나머지 2개도 사용해보도록 하겠습니다.

mutations

데이터 업데이트에 사용된다는데, postData들 업데이트할 때 써보겠습니다.

state를 직접적으로 가져다쓰거나 수정하면 안된다고 했었으니, state를 가져와서 업데이트 할 함수를 생성합니다.

보통 SET_STATE명이라고 합니다.

문법

SET_NAME(state, 전송받은 데이터){
    state.name = 전송받은 데이터
}

함수를 생성한 후에 App.vue에서 update하는 부분을 수정하겠습니다.

App.vue

문법

this.$store.commit('SET_NAME', 전송할 데이터);

 아래와 같이 수정해주면 uploadData가 전송됩니다. 

그리고 store.js에서 uploadData를 받아서 처리해줍니다.

이렇게 한 후 정상작동됨을 확인합니다.

그 다음 마지막으로 actions를 확인하겠습니다.

actions

문법

this.$store.commit('SET_NAME', 전송할 데이터);

this.$store.dispatch('SET_NAME', 전송받은 데이터);

뭐가? mutations이랑 다르냐 하는데,

이것은 ajax와 mutations을 동작할 때 쓴다고 합니다.

ajax하던 부분을 actions로 수정해보겠습니다.

App.vue

ajax 부분을 store.js에 가져옵니다.

store.js

그리고 ajax를 사용하기 위해 App.vue에 axios를 import했었는데,

이것을 store.js에도 import합니다.(그리고 App.vue에서 axios를 안 쓰니 import를 지워줍니다.)

그 다음 아래와 같이 srote.js를 수정합니다.

SET_POSTDATA와는 로직이 달라야 하니 SET_MOREPOSTDATA 생성하여 사용합니다.

App.vue

dispatch해줍니다. 이렇게하면 더보기 버튼을 사용할 수 있습니다.

만약 Store에 있는 데이터를 더 쉽게꺼내고 싶다면 computed를 사용하면됩니다.

editorTitle로 예시를 보여드리겠습니다.

App.vue

store.js

App.vue

이렇게 4회차 수업도 끝났습니다.

제 돈 내고 배우러 간거라서 열심히 들었네요.

후기를 간략히 남기자면,, 

저는 기초 인강을 듣고 참여하게된거라서 약간 1-3회까지는 알던 지식을 복습하는 기분이었습니다.

1,2회는 vue사이트만 봐도 알 정도의 기초였거든요.

그리고 3회차부터 약간 흥미가 생겼고 4회차는 새로운 지식을 좀 습득했습니다.

근데 같이 들었던 동료는 지식없이 갔는데 진도가 빨랐다고 했습니다.

기본적으로 node에 대한 이해는 있어야했던 강의였습니다.

아마 저같이 기초인강을 본 사람이라면 돈이 아까울거에요..

(예를 들어보자면,, bind, for문, data, props에 대한 이해를 하고 있으며 .vue파일을 사용해서 todolist라도 만든 사람?)

지금은 끝난지 좀 많이됐는데, 회사가 바빠서 정리를 이제했습니다.ㅎㅎㅎ;

axios랑 vuex를 약간 잊은 것 같아 걱정했는데, 검색하고 하다보면 또 그렇지도 않네요.

강의가 이해를 도왔으니^^.

돈과 시간이 있고 기초에 대해 어려움을 겪고 있다면 듣는것 추천합니다^^,

저도 꾸준히 공부해야겠어요~

더보기 버튼을 생성하여 버튼 클릭 시에 ajax 통신을 해보겠습니다.

더보기 버튼을 생성해줍니다.

App.vue

그 다음 더보기 이벤트에 실행될 함수를 만들어주고 ajax 통신을 위해 axios를 install 해줍니다.

npm install axios

install이 끝나면 가져올 데이터가 담긴 json 파일을 만들어 줍니다.

ajax를 통해 방금 만든 json 내용을 가져와보도록 하겠습니다.

App.vue

axios를 사용해 이벤트를 생성한 후에 버튼에 바인딩 해줍니다.

axios에서 get가져온다 moreData.json을 then끝나면 moreData가 들어오고 그것을

this.postData 배열리스트에 push해준다. 

아까 unshift는 상단에 리스트를 추가해주고 push는 하단에 리스트를 추가해줍니다.

이렇게 하면 더보기 버튼 클릭 시 ajax 통신을 합니다. (get 방식 = 공개)

<slot>에 대해 배워보겠습니다.

저는 강의를 들으면서 slot에 대해 처음알게되었습니다.

slots는 하위컴포넌트에게 HTML, Component를 전달 할 수 있다고합니다.

그리고 <slot>을 사용하는 이유는 props 정의안하고 parent에서 child로 데이터를 간단히 표현할 때 사용한다고 합니다.

컴포넌트를 사용할때 <Component/>로 사용하고는 했는데, 가끔 강의를 보면 <Component></Component>로 사용하고는 하는 사람들을 봤습니다.

<slot>은 여닫는 함수가 모두 존재할 때에만 사용할 수 있다고 합니다.

문법

child

<div>
    <slot></slot>
</div>

parent

<child>
    <p>여기에 HTML을 넣으면 slot 안에 표현된다</p>
</child>

<slot>을 vue파일에 추가합니다.

App.vue

App.vue 파일에서 <Editor></Editor> 태그 사이에 타이틀을 삽입해보겠습니다.

Editor.vue

<slot>을 사용해줍니다.

아래와 같이 확인이 됩니다.

정상적으로 된거 맞아? 하고 궁금해서 렌더링된 태그를 봤습니다.

Editor.vue 컴포넌트 영역에 포함된 것 같은 모습입니다.

<slot>에 data도 {{ }}로 삽입할 수 있습니다.

이렇게 하면 동적인 데이터도 넣을 수 있을 듯 싶습니다.

EventBus에 대해 알아보겠습니다.

EventBus는 컴포넌트간의 통신을 쉽게해준다고 합니다.

물론 child-parent 까지의 간단한 컴포넌트라면 사용안해도 props를 통해 통신을 할 수 있습니다.

하지만 복잡해진 트리 체계를 갖게된다면?

EventBus를 사용해서 처리하는 방식을 알아보겠습니다.

EventBus.js 파일을 생성해줍니다.

그리고 EventBus.js에 내용을 작성해 줍니다.

import Vue from 'vue';

export default new Vue()

이것으로 EventBus.js 내부 작성은 끝입니다. 

이것을 기존 프로젝트에서 import해서 사용하면됩니다.

예제를 하기위해서 기존 프로젝트에 parent-child 구조의 컴포넌트 하나를 추가하겠습니다.

아래 영역을 Component로 만들겠습니다.

Editor.vue 파일하나 생성하고 해당 내용을 넣어줍니다.

아래 이미지를 참고해서 옮기도록 합니다.

그 후 App.vue에 가서 컴포넌트를 등록해줍니다.

컴포넌트 등록 순서는 이쯤되면 아시겠죠?

.vue 파일을 script영역에서 import 하고, 그 후에 component에 등록해줍니다.

마지막으로 <template>내부에 태그로 넣어주면 됩니다.

렌더링 화면 입니다.

화면은 나오는데, 지난번 완성했던대로 안나옵니다.

콘솔에 보거나 터미널창을 보면 에러가 막 뿜어져나오고 있습니다.

컴포넌트로 옮겼으니 data 관련해서도 수정을 해야하기때문입니다..ㅎ

App.vue

Editor.vue로 data를 이동시킵니다.

title, autore, caption은 Editor.vue에서 입력받으니 Editor.vue로 옮겨줍니다.

그 후 App.vue파일에서 Editor.vue에서 필요한 imgSrc를 props로 전달해줍니다.

보냈으면 받아서 사용해야하기 때문에

Editor.vue로 가서 props로 받아주고, 그 후 imgSrc를 img에 bind해줍니다.

이렇게 하면 이미지 선택 -> 렌더했던 순서까지 진행됩니다.

그 다음 filter 처리더 있었으니, 수정해주겠습니다.

filter 관련 작업은(반복문) Editor.vue 컴포넌트 안에서 하고 있어서 filters를 props로 전달해주면 됩니다.

App.vue

Editor.vue

props로 받아줍니다.

filter 텍스트는 확인이되는데, 이미지가 안나옵니다.

selectFilter, getFilter 이벤트 관련해서 에러가 나고 있습니다.

이제 EventBus를 사용해서 수정해보겠습니다.

Editor.vue파일에 EventBus를 import합니다.(사용하려는 곳에 다 등록되어있어야합니다.)

그 후 EventBus에 보내줄 함수를 생성합니다.

getFilter 함수는 App.vue에 있는데 이것을 App.vue에서 Editor.vue로 이동시킵니다.

그 후에 Editor.vue에서 EventBus를 통해 컴포넌트에서 선택한 필터를 App.vue에 전송해줄것입니다.

EventBus는 데이터 전송 시 아래와 같이 사용합니다.

EventBus.$emit('데이터를 전송하는 이름', 데이터); 

클릭으로 getFilter가 실행되면 일단 this.selectFilter에 className을 저장합니다.

이때 this.selectFilter에 data에 선언했다가 저장하는 이유는,, template 내부에서 사용하기 때문입니다.

EventBus 문법으로 select-filter라는 이름을 만들고 className을 담아 보냅니다.

그리고 App.vue에서 받아줍니다.

EventBus로 데이터를 보내면 어디서 받는지? 하는데, 일반적으로 버스 보내면 mounted()에서 작업한다고 합니다.

mounted()는 vue 라이프사이클 중에 하나입니다.

mounted는 가상 DOM 내용이 실제 DOM에 부착되고 난 이후에 실행되므로 methods, data등에 접근할 수 있어서 일반적으로 가장 많이 사용한다고 합니다.

이벤트를 받을 때에는 아래와 같이 합니다.

EventBus.$on('데이터를 전송하는 이름', (전송된 데이터) => { }); 

App.vue

EventBus.js를 import하고 문법에 맞게 작성하고 아까 담아보낸 select-filter를 사용해서 전송을 받습니다.

이제 렌더링된 것을 확인해보면 이미지가 잘 나옵니다.

그리고 필터 선택도 됩니다, 하지만 저장은 아직 안됩니다.

저장 버튼을 누르면 update이벤트 관련 에러가 납니다.

이것도 Editor.vue에서 정보를 EventBus를 통해 전송하여 App.vue에서 저장해주도록 수정하겠습니다.

App.vue

update함수를 Editor.vue로 옮깁니다.

Editor.vue 데이터에 맞춰 수정해줍니다.

EventBus로 업데이트할 데이터를 보낼 수 있도록 수정했습니다.

step, 그리고 data 배열에 update해야 하는 리스트를 삽입하는 작업은 App.vue에서 진행하겠습니다.

App.vue

데이터를 받는 것을 아까와 같이 mounted()에 추가해줍니다.

EventBus가 실행될 때 step 값을 수정해주고, data 배열에 새로운 리스트를 추가해줍니다.

저장을 누르면

정상작동하는 부분을 확인했습니다.

간단한 예시를 통해 EventBus에 대해 알아보았습니다.