본문 바로가기

전체 글

[Vue.Js] 9. Vue.Js 화면 구성 요소 변경 (Router) 뷰는 일단 SPA를 지원하는 프레임워크입니다. SPA(Single Page Application)는 단일 페이지로 콘텐츠를 동적으로 업데이트하는 웹 응용 프로그램입니다. 새 링크로 이동할 때마다 새 페이지를 로드하는 웹 애플리케이션과 반대 되죠. SPA를 구현하기 위해 화면 구성 요소 중 일부를 변경할 예정입니다. 라우터(Router)라는 것을 사용해서 라우팅(Routing)을 할 것인데요. 라우팅: 웹 페이지간 이동하는 방법 (화면에 깜빡거림 없이 전환 가능) 뷰에서는 라우터를 지원하고 있어 어렵지 않게 가능할 것입니다. 뷰 라우터를 사용하려면 아래의 구분을 script에 추가해야 사용 가능합니다. 아래가 이번에 사용할 문법입니다. 페이지를 이동할 때 사용되는 태그입니다. 클릭 시 지정해둔 “URL l.. 더보기
[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.. 더보기
[D2Lang] 3. D2에서 화살표 모양을 바꿔보자! 오늘은 화살표의 다양한 모양과 색상 설정하는 방법을 알아보겠습니다. 아래의 예제 코드를 입력하시고 돌려보시면 아래의 사진과 같이 출력됩니다. x1 -> y1 x2 -- y2 x3 dst로 "(시작 Box ) (화살표) ( 도착 Box )"의 형태를 기본으로 가지고 갑니다. 화살표의 종류는 아래와 같이 4종류이며 화살표의 머리 종류는 총 8개 있습니다. x5와 y5의 두번째 노란색 화살표를 보시면 triangle과 arrow의 차이가 안 보이는데요. 일단 문서에 따르면 arrow의 경우 triangle보다 더 뾰족하다고 합니다. x5 y5를 보시면 제가 style.filled속성을 사용했는데요. filled의 경우 현재 rectangle과 circle만 지원되고 있습니다. 또한 label속성으로 직접 화살.. 더보기
[Vue.Js] 3. Vue.Js에서의 인스턴스를 알아 보자! Vue에서 인스턴스란 Vue 생성자를 사용하여 생성된 개체를 의미합니다. 그러면 생성된 인스턴스는 고유한 데이터, 메서드 및 옵션을 가질 수 있고 이를 통해 화면에 원하는 것을 보여줄 수 있게 됩니다. Vue가 가지는 여러 속성이 있는데 속성에 관해서는 사용할 때 설명드리겠습니다. 일단 이전 예제에서 new Vue({~})를 통해 Vue 인스턴스를 만들어 사용했습니. 이전에 만든 index.html을 열고 F12를 눌러 개발자 도구를 통해 html코드를 확인해 볼 경우 {{ message }}로 입력했던 부분이 아래의 new Vue 안의 message뒤에 있는 ‘Hello Vue!’가 되어있는 것을 확인하실 수 있습니다. 또한 확장 프로그램인 Vue 아이콘이 활성화 됨을 확인할 수 있으며 F12를 통해 .. 더보기

티스토리툴바