프론트 썸네일형 리스트형 [Vue.Js] 8. Vue.Js 컴포넌트간의 통신3 같은 관계와 다른 관계의 예를 같이 알아보는 이유는 동일한 방식으로 하는 것이 더 수월하기 때문입니다. 일단 같은 관계의 경우 부모가 있다면 이전에 배운 방식 두 가지를 사용하여 하위1→상위→하위2 식으로 상위의 관계를 통해 통신을 해야합니다. 이 방식은 같은 부모를 가져야만 가능하기 때문에 별도로 알아보진 않겠습니다. 이번에는 이벤트 버스라는 것으로 통해 통신을 해 볼 것입니다. 그러면 굳이 같은 부모를 가질 필요도 없어지죠. 이번에 쓸 문법은 $emit과 $on입니다만 새로 인스턴스를 생성해서 그 인스턴스의 메소드를 호출해 줄 겁니다. 일단 전체 예제 코드입니다. 양이 많으니 필요한 부분만 설명 드리자면 child-component만 사용됩니다. 아래의 Vue코드를 보시면 eventBus로 사용할 V.. 더보기 [Vue.Js] 7. Vue.Js 컴포넌트간의 통신2 저번에 상위에서 하위에 props를 통해 데이터를 넘겨주는 방법을 봤습니다. 이번엔 하위에서 상위로 데이터를 보내는 방법에 대해 알아보겠습니다. 일단 이벤트 버스라는 것을 통해 전달해야 되며 Vue에서는 ”$emit”(이벤트)과 ”v-on:”(이벤트 수신)속성을 통해 주고받을 수 있습니다. 아래는 전체 예제 코드입니다. 양이 많으니 Vue 코드와 app영역 만 따로 보겠습니다. Vue.component('child-component', { template: 'Display', methods: { displayTxt: function() { this.$emit("display-text"); } } }); new Vue({ el: '#app', methods: { parent_event: function().. 더보기 [Vue.Js] 6. Vue.Js 컴포넌트간의 통신1 뷰에서는 컴포넌트가 가진 값을 다른 컴포넌트가 그냥 가져다 쓸 수 없습니다. 예시를 들자면 아래와 같이 test-component2의 data를 보시면 retrun으로 test_component1의 data에 접근하려는 것을 확인할 수 있습니다. 하지만 아래의 출력 결과와 같이 data2 뒤에는 아무것도 출력 되지 않았습니다. 그 이유는 test_component2에서 test_component1의 data에 접근할 수 없었기 때문이죠. 그래서 이제부터 컴포넌트 간의 통신 방법에 대해서 공부해 보겠습니다. 첫 번째 방법은 부모와 자식 관계의 통신입니다. 서로 다른 범위를 가지고 있어 참조할 수 없기 때문에 상위인 부모 컴포넌트에서 자식(하위)컴포넌트끼리 데이터를 통신하는 방법입니다. 상위에서 하위로 데이.. 더보기 [Vue.Js] 5. Vue.Js Component를 알아 보자! Component(컴포넌트)란 조합하여 화면을 구성하는 블록(특정 영역)을 의미합니다 화면을 구조화하여 하나의 패턴으로 개발을 할 수 있어 재사용 및 유지 보수가 수월합니다. 또한 이미 방식이 정해져 있어 다른 사람이 작성한 코드라 할지라도 이해가 쉽습니다. 화면 전체를 크게 Header, Body, Footer로 3 분할한 사진입니다. 트리 구조로 보면 다음과 같이 표현할 수 있습니다. 3개의 큰 영역으로 분할 했습니다. 실제로 화면을 구성하는 경우 이러한 형태를 유지하면서 구현해야 합니다. 이제 활용하기 위해 등록하는 방법을 알아보겠습니다. 컴포넌트 역시 전역과 지역이 있으며 전역은 어디서나 사용 가능하고 지역은 특정 인스턴스에서만 사용 가능합니다. 전역 컴포넌트 아래의 코드를 입력하시고 돌려보시면 .. 더보기 [Vue.Js] 4. Vue.Js 인스턴스의 Life cycle를 알아 보자! Vue Js의 Life Cycle에는 생성 → 부착→갱식→소멸 4단계가 있고 각 단계 전과 후에 이벤트를 등록 할 수 있습니다. 라이프 사이클과 그 예약어를 보겠습니다. Start와 End는 임의로 추가했습니다. 저 흐름으로 진행된다 생각하시면 되며 각 이벤트에 대해 설명드리겠습니다. beforeCreate - 인스턴스가 생성된 후 실행 되는 단계이며 아무것도 생성되지 않은 상태입니다. created - data 속성과 methods속성이 정의되어 접근 가능한 상태입니다. - 접근하여 특정 로직 실행이 가능하며 화면에 요소를 부착하기 이전이라 template속성에 정의된 요소에는 접근할 수 없습니다. - 서버에서 데이터를 요청하고 받아오는 로직을 실행시키는 단계입니다. beforeMount - js의 r.. 더보기 [Vue.Js] 1. Vue.Js란? Vue.Js는 웹 개발에 사용되는 언어입니다. Java Script로 이루어진 프레임워크이며 Vue를 통해 웹 상에서 보여지는 화면을 구성할 수 있습니다. 기존의 Html, Css, Js를 모르셔도 쉽고 빠르게 배울 수 있고 개발 속도 또한 빠르다는 강점이 있습니다. 일단 장단점에 대해 알아보겠습니다. 장점 학습 용이 - 구문과 개념이 간단하여 비교적 쉽게 시작할 수 있습니다. 다양성 및 유연성 - 유연하여 기존 프로젝트와 통합하기도 유리하며 간단한 UI 구성 요소 또는 복잡한 SPA(단일 페이지 응용 프로그램)를 구축 등 다양하게 사용할 수 있습니다. 구성 요소 기반 아키텍처 - 구성 요소 기반 아키텍처를 따라 재사용 및 유지 관리가 가능합니다. 이는 재사용, 모듈 및 유지 보수를 수월하게 만들어 개발.. 더보기 이전 1 다음
