Vue.js 적용, 설치, 세팅 및 이벤트버스 (Event Bus) 사용 방법
제로코딩
·2022. 6. 23. 19:40
✋ vue.js 개념, 설치, 세팅, package.json, 이벤트버스 (Event Bus) 방법
현재 Vue는 다른 프레임워크들 ( react: Facebook, angular: Google ) 과 어깨를 나란히 견줄 수 있을만큼 무섭게 성장하는 프레임워크입니다.
Vue는 지금 현재 급격히 관심이 늘고 있는 자바스크립트 프레임워크입니다.
2014년에 출시를 하였고, Vue는 ES5기능을 이용하기 때문에 그 아래 버전을 구현한 IE8 이하 버전에서는 사용이 불가합니다.
⚡️ vue.js
Vuejs는 브라우저에서 바로 적용해서 사용하실 수 있습니다.
기존 프로젝트에 추가로 적용되더라도 전혀 충돌없이 함께 사용할 수 있기 때문에 부담없이 시작할 수 있습니다.
Vue는 자바스크립트 프레임워크입니다. View를 중점적으로 다루고 있어서 기존에 구현한 프로젝트에 쉽게 적용이 가능합니다.
Vue는 가상 DOM을 사용하고 있고 재사용이 가능한 컴포넌트 단위를 이용합니다.
UI에 특화되어있고, 라우팅 및 상태관리는 third party 라이브러리를 사용합니다.
📌 vue.js 설치 및 적용 방법
*Vue 설치 방법
- Script에 추가하기
첫번째 방법으로는 CDN을 사용하는 것입니다.
Vue.Js코드를 직접 삽입하는 대신에 다음과 같이 script태그를 통해 넣어줄 수 있습니다. 웹 주소를 넣는 것이기 때문에 직접 삽입하는 것보다 훨씬 간편합니다.
중간에 보시면 script태그로 CDN주소가 존재합니다.
이 라인을 있어야 Vue가 정상적으로 작동하게 됩니다.
- npm을 통해 다운받기
서비스를 시작할 때는 npm을 통해 받는 것이 좋습니다. 왜냐하면 번들러를 이용해서 적용할 수가 있습니다.
맨 처음 구현할 프로젝트 경로 상에서 명령어창에 "npm install vue"을 입력하여 간편하게 vue를 설치해줍니다.
*Vue 디버깅하는 방법
현재 크롬브라우저를 사용중이시라면 아래 링크를 눌러서 vue-devtools를 설치해주세요.
Vue devtools 링크
여기를 클릭해주시면 크롬 확장 프로그램으로 이동하게 됩니다. 그럼 Vue devtools를 깔게 되면
아래와 같은 화면이 F12개발자모드에서 vue탭에 활성화 됐을 겁니다.
Vuejs devtools의 장점은 실시간으로 데이터 입력 값에 반응한다는 점입니다.
만약 데이터 바인딩된 입력란에 다른 값을 넣어주면
실시간으로 Vue.js devtools의 data부분이 변화할 것입니다.
📌 Vue (뷰) style 태그
Vue는 style태그를 사용합니다.
이 태그를 통해서 css를 다룹니다. style 태그 안에 scoped라는 속성이 존재하는데요, 다음과 같이 사용하면 style태그가 적용된 컴포넌트에서만 css가 적용됩니다.
만약 scoped를 빼면 모든 컴포넌트에서든지 사용이 가능합니다.
내부구현을 살펴보자면 scoped를 선언하게 되면 실행하면서 data-v-xxxxxx와 같은 유일속성의 값이 생성되고 h2가 h2[data-v-xxxxxx]로 컴파일이 됩니다.
따라서 태그를 선언한 컴포넌트에서만 적용됩니다.
📌 Vue 프로젝트 생성
다음의 vue 명령어를 통해서 원하는 해당 디렉토리에 Vue 프로젝트를 생성합시다.
위 Cli명령어를 입력하면 Vue프로젝트의 상세설정을 하게 됩니다.
그 후 해당경로에서 cmd명령어를 입력하면 됩니다.
그 후 npm start 명령어를 실행하게 되면 다음처럼 실행됩니다.
그 후 로컬내에 8080포트로 웹 프로그램이 실행됩니다.
참고로 아까 쳤던 명령어인
npm start는 어플리케이션을 개발모드로 실행합니다.
따라서 배포 모드로 빌드하기 위해서는 npm run build 명령어를 따로 입력해주도록 합시다. 그러면 배포 모드의 파일이 /dist라는 폴더 경로 상에 만들어집니다.
📌 Vue package.json파일 구성
[ package.json ] 파일
다음은 package.json의 파일입니다. 프로젝트가 생성되면 해당 경로상에 저절로 생성되는 파일입니다.
...
"scripts": {
"dev" : "webpack-dev-server--inline--progress--config build/webpack.dev.conf.js",
"start" : "npm run dev"
...
이 부분을 한번 살펴보시죠.
npm start를 실행하게 되면 npm run dev가 실행되게 되고 자동으로
dev옆에 있는 js파일이 실행되게 됩니다.
webpack.dev.conf.js는 미리 생성한 webpack의 설정파일입니다.
개발모드로 실행되었기 때문에 webpack.dev.conf.js 웹팩 설정파일이 실행되게 될 것입니다.
📌 Vue Event Bus로 컴포넌트간 데이터 전달
vue.js에서는 일반적으로 부모/자식간의 이벤트 통신하는 방식을 사용합니다.
서로 관련없는 독립적인 컴포넌트끼리 이벤트를 통신해야할 때가 생깁니다. 이 경우를 좀 더 편하게 도와주는 vuex라는 state 관리 라이브러리도 있지만 규모가 작을 경우에는 단순히 EventBus를 활용해서 처리할 수 있습니다.
이벤트버스 초기화
이벤트버스를 구현하는 것은 매우 쉽습니다. 단지 아래와 같이 하나의 vue 인스턴스만 생성해주면 됩니다. 이 인스턴스를 독립적인 각 컴포넌트끼리 통신할 때 중간지로 활용합니다.
컴포넌트 -> EventBus -> 컴포넌트
import Vue from "vue";
export const EventBus = new Vue();이벤트 버스 사용 (발행)
이벤트버스 사용해보기
이벤트버스를 만들었으니 이제 이벤트가 필요한 컴포넌트에서 불러오기만하면 됩니다.
<template>
<section>
<button @click="handleGlobalClickButton">click</button>
</section>
</template>
<script>
import { EventBus } from "~/utils/event-bus";
export default {
data() {
return {
clickedCount: 0
};
},
methods: {
handleGlobalClickButton() {
this.clickedCount++;
EventBus.$emit("use-eventbus", this.clickedCount);
}
}
};
</script>핵심은
EventBus.$emit("use-eventbus", this.clickedCount)
// use-eventbus의 이벤트이름으로 clickedCount 데이터를 포함해서 이벤트를 내보낸다.
이벤트 버스 사용 (구독)
서로 부모/자식 간의 컴포넌트가 아닌
독립된 컴포넌트에서 clickedCount 데이터를 사용할 경우가 생깁니다.
아래와 같이 EventBus를 불러와서 데이터를 받아볼 수 있습니다.
<template>
<section>
{{ receivedClickCount }}
</section>
</template>
<script>
import { EventBus } from "~/utils/event-bus";
export default {
data() {
return {
receivedClickCount: 0
};
},
created() {
EventBus.$on("use-eventbus", clickedCount => {
this.receivedClickCount = clickedCount;
});
}
};
</script>핵심은
EventBus.$on("use-eventbus", clickedCount => {
this.receivedClickCount = clickedCount;
});
이벤트를 받을 때에는 $on메소드를 활용해서
첫 번째 파라미터에 받을 이벤트 이름,
두 번째 파라미터로는 이벤트를 받게되면 트리거로 실행될 콜백함수를 지정합니다.
콜백함수에서의 파라미터로 이벤트버스를 내보낼 때 지정한 데이터들을 받습니다.
이벤트 버스 사용 (해제)
다음을 통해 이벤트버스 연결을 해제할 수 있습니다.
EventBus.$off("use-eventbus");
만약 모든 이벤트버스를 해제하고 싶다면
EventBus.$off();를 사용합니다.
