뷰 썸네일형 리스트형 [Vue.Js] 11. Vue.Js 네스티드 라우터 & 네임드 뷰 (2) 이제 네임드 뷰를 만들어 보겠습니다. 아래는 전체 예제 코드입니다. app area 필요한 부분만 보겠습니다. app area 필요한 부분이 많은데요. 천천히 알아가 봅시다. app에 이름(name)을 지정한 router-view를 둡니다. header, body, footer 통 3개를 만들고 script의 Vue코드를 보겠습니다. component는 template밖에 없으므로 생략하고 VueRouter쪽에 기존과 다르게 path 지정 후에 component에 (router-view name) : (component name)으로 매칭시켜줍니다. 그리고 실행 시키면 아래와 같이 나옵니다. 이를 통해 router-viewdml 이름을 지정하고 그 영역에 특정 component를 구성한 것을 알 수 있습.. 더보기 [Vue.Js] 10. Vue.Js 네스티드 라우터 & 네임드 뷰 (1) 일단 네스티드 라우터와 네임드 뷰의 차이를 알고가겠습니다. 네스티드 라우터는 중첩된 라우터라고 말할 수 있는데요. 아래와 같이 Root Component(router)안에 Parent Component(router)안에 Child Component가 두 개있음을 볼 수 있습니다. Component안에 Component가 중첩되어있는 상태이죠. 그에 반해 네임드 뷰는 각 고유 영역을 가지고 있고 해당 영역에 대해 여러 component를 렌더링할 수 있습니다. 정리하면 네스티드 라우터를 사용하면 계층 구조로 제작 가능하고 네임드 뷰로 만들면 특정 영역을 여러 component로 렌더링 할 수 있습니다. 두 경우를 같이 사용하면 복잡하나 모듈화 된 어플리케이션을 만들 수 있습니다. 그러면 이제 네스티드 라우.. 더보기 [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 다음
