JS 썸네일형 리스트형 [Vue.Js] 15. Vue.Js template (3 methods, computed, watch) methods, computed, watch에 대해 알아보겠습니다. methods는 호출하는 경우에만 로직이 실행되며 computed의 경우 데이터의 값이 변경되면 알아서 자동적으로 실행되어 주는 차이가 있습니다. computed는 연산 결과를 캐싱(보관)하고 있다. 쓰는 경우에 가져다 쓸 수 있어 복잡한 연산에 특화 되어있다 생각하시면 됩니다. watch의 경우는 데이터의 변화를 감지하고 특정 로직을 수행하는데 computed와 다르게 비동기 처리(웹 통신 등)에 적합합니다. 아래는 전체 코드입니다. {{ method_message }} {{ computedMessage }} click me! 버튼을 클릭할 때 마다 methods의 methodsMessage()를 호출해서 변환시켜 줍니다. comput.. 더보기 [Vue.Js] 14. Vue.Js template (2 디렉티브 속성) 디렉티브 속성들 입니다. ‘v-’가 들어가는 모든 속성이 여기에 해당됩니다. v-text: {{}} 와 동일합니다. v-html: innerHTML을 업데이트 합니다. v-show: css의 display 속성과 동일합니다. v-if: 조건부로 렌더링을 합니다, v-else: v-if 또는 v-else-if 다음에 와야 됩니다. v-else-if: v-if 다음에 와야 됩니다. v-for: 요소를 반복해서 렌더링 합니다. v-on: event Listener를 연결합니다. v-bind: component의 props 혹은 여러 속성을 동적으로 바인딩 합니다. v-model: input 타입의 요소 혹은 component에서 양방향 바인딩을 만듭니다. v-slot: props를 받을 slot에 지정해 줍니.. 더보기 [Vue.Js] 13. Vue.Js template (1 데이터 바인딩) Vue Js의 template은 Vue의 객체나 데이터와 HTML. CSS 등을 묶고 브라우저에 보여지는 형태로 변환하는 속성입니다. template에서 결국 render()함수로 변환되어 사용되기 때문에 render()에 대한 이해가 높다면 render()로 작업하셔도 괜찮습니다만 template에 대해 배워보겠습니다. 일단 맨 처음에 사용했던 **’{{ }}’**을 기억하시나요. 이는 데이터 바인딩의 문법입니다. {{}}을 사용하는 방법과 v-bind를 사용하는 방법이 있죠. 먼저 {{}}는 아실겁니다. 사용하면 해당되는 data를 가져와 치환했죠. 그게 변경되어도 처음 1회만 하고 싶다면 아래와 같이 v-once를 붙여 한번만 바뀌게 할 수 있습니다. {{ message }} 아래는 v-bind 코.. 더보기 [Vue.Js] 12. Vue.Js Http 통신(axios) 일단 Http통신이 무엇인지 알아야 합니다. 간략하게 말씀드리면 HTTP(Hypertext Transfer Protocol)는 인터넷 통신 프로토콜입니다. www(World Wide Web)에서 사용되는 기본 프로토콜이며 웹 브라우저와 웹 서버가 통신하기 위해 사용됩니다. 대표적으로 ajax(jQuery)가 흔히 사용되고 있습니다. Vue에서도 ajax를 지원하기 위한 라이브러리로 Vue Resource와 axios가 있는데 Vue Resource는 더 이상 사용되지 않습니다. 그래서 axios를 사용하겠습니다. axios는 promise기반의 API 형식이 제공되어 곧 바로 사용하기 편합니다. Promise기반의 API란 실행 흐름에서 비동기 처리를 유연하게 처리하기 위한 API입니다. axios를 사.. 더보기 [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] 3. Vue.Js에서의 인스턴스를 알아 보자! Vue에서 인스턴스란 Vue 생성자를 사용하여 생성된 개체를 의미합니다. 그러면 생성된 인스턴스는 고유한 데이터, 메서드 및 옵션을 가질 수 있고 이를 통해 화면에 원하는 것을 보여줄 수 있게 됩니다. Vue가 가지는 여러 속성이 있는데 속성에 관해서는 사용할 때 설명드리겠습니다. 일단 이전 예제에서 new Vue({~})를 통해 Vue 인스턴스를 만들어 사용했습니. 이전에 만든 index.html을 열고 F12를 눌러 개발자 도구를 통해 html코드를 확인해 볼 경우 {{ message }}로 입력했던 부분이 아래의 new Vue 안의 message뒤에 있는 ‘Hello Vue!’가 되어있는 것을 확인하실 수 있습니다. 또한 확장 프로그램인 Vue 아이콘이 활성화 됨을 확인할 수 있으며 F12를 통해 .. 더보기 [Vue.Js] 1. Vue.Js란? Vue.Js는 웹 개발에 사용되는 언어입니다. Java Script로 이루어진 프레임워크이며 Vue를 통해 웹 상에서 보여지는 화면을 구성할 수 있습니다. 기존의 Html, Css, Js를 모르셔도 쉽고 빠르게 배울 수 있고 개발 속도 또한 빠르다는 강점이 있습니다. 일단 장단점에 대해 알아보겠습니다. 장점 학습 용이 - 구문과 개념이 간단하여 비교적 쉽게 시작할 수 있습니다. 다양성 및 유연성 - 유연하여 기존 프로젝트와 통합하기도 유리하며 간단한 UI 구성 요소 또는 복잡한 SPA(단일 페이지 응용 프로그램)를 구축 등 다양하게 사용할 수 있습니다. 구성 요소 기반 아키텍처 - 구성 요소 기반 아키텍처를 따라 재사용 및 유지 관리가 가능합니다. 이는 재사용, 모듈 및 유지 보수를 수월하게 만들어 개발.. 더보기 이전 1 다음
