computed와 watch 속성 computed {{ num }} {{ doubleNum }} computed 속성 사용 시 데이터에 대한 의존성을 가진다. 그리고 기본적으로 getter 함수를 가지고 있다. vm.doubleNum 값은 vm.num 값에 의존하게 된다. doubleNum에 대한 로직이 실행될 때 기준이 되는 값이 num인 것이다. 따라서 num 값이 변경될 때마다 doubleNum 값도 변경된다. computed 속성 대신 methods 속성을 사용하여 doubleNum 값을 불러올 수도 있다. ..., methods: { doubleNum: function() { return this.num * 2; } } ... 이는 결과 값을 불러오는 데에 있어서는 똑같다. 그러나 의존성이라는 ..
Axios 뷰에서 권고하는 Promise 기반 HTTP 통신 라이브러리이다. CDN 방식 또는 NPM 방식을 통해 사용할 수 있다. 예제 get user {{ users }} https://jsonplaceholder.typicode.com JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com JSON 데이터를 불러올 때 시험하기 좋은 사이트이다..
컴포넌트(Component) 조합하여 화면을 구성할 수 있는 블록을 뜻한다. 화면 영역을 각각 Header, Content, Footer, Aside, Main으로 구분한 것이다. 이를 아래와 같은 트리 형태로 나타낼 수 있다. 트리 구조로 컴포넌트를 살펴보면 컴포넌트가 어떻게 구성되어있는지 더 알아보기 쉽다. Root는 화면 전체 영역을 의미한다. 화면 전체를 Header, Content, Footer 세 개의 컴포넌트로 분할하였다. 이후 Content 컴포넌트에서도 Aside, Main 두 개의 컴포넌트로 분할한다. Content를 부모 컴포넌트 또는 상위 컴포넌트라 하고, Aside, Main을 자식 컴포넌트 또는 하위 컴포넌트라 말한다. 이는 Root와 Header, Content, Footer ..
인스턴스(Instance) Vue에서 제공하는 API와 속성으로, 뷰로 개발하기 위하여 필수적으로 생성해야 한다. {{ message }} new Vue()로 뷰 인스턴스를 생성할 때의 Vue를 생성자라고 한다. (생성자 인자에는 객체가 들어간다.) 위 예제에서는 뷰 인스턴스 옵션 속성에 el 속성과 data 속성을 사용하였다. 이 외에 template, methods, created, watch 속성 등 여러 속성들이 뷰 인스턴스 옵션 속성으로 미리 정의되어 있다. el 속성 값을 지정해주어야 태그 안 Vue의 기능과 속성들이 유효해진다. el 속성으로 뷰 인스턴스가 그려질 지점을 설정하는 것이다. 참고로 el 속성 값에 html이나 body를 넣는 경우 콘솔 창에 아래와 같은 경고가 발생하고, 제대로..
