Vue CLI로 프로젝트를 생성하고 나서 Vue 개발을 진행하다 보면 다음과 같은 화면을 많이 마주할 것이다. 뭐 대충 이런 에러메시지를 화면 전체에 띄워서 "당장 이 에러를 수정하지 않으면 너의 어플리케이션은 너또한 건드릴 수 없을 것이야" 라는 직접적인 표시로 보인다.. 하지만 내가 이 에러는 마주하는 이유는 바로.... 선언된 var a 라는 변수가 10을 할당받았는데... 이걸 사용하지 않아서 발생하는 에러이다. 단지 warn 정도일 뿐 에러는 아니라는 것이다. 그런데도 ESLint라는 녀석은 이걸 아주 강력하게 잡고 개발하는데 생산성을 엄청나게!!! 저하시키곤 한다. 이걸 수정하고 나면 다시 화면을 왔다 갔다하는 시간이 너무 아깝다!!! ESLint 에러 해결 현재 이 프로젝트는 vue crea..
안녕하세요. 오늘은 Vue.js의 인스턴스에서 this 키워드에 관하여 포스팅해보고자 합니다. 일반적으로 자바스크립트에서의 this키워드는 다음과 같이 사용됩니다. var obj = { num : 10, plusNum : function(){ this.num++; } } obj.plusNum(); console.log(obj.num); //11 obj이라는 변수에 num과 num에 +1을 더하는 plusNum이라는 함수를 정의하였을 때, num++하는 부분에서 this 키워드가 사용되는 것을 볼 수 있을 것입니다. 자바스크립트에서는 일반적으로 객체의 인스턴스를 가져올 때 this키워드를 사용합니다. this를 내부에서 obj 변수처럼 활용하는 것이지요. 하지만 Vue 인스턴스를 생성했을 때는 약간 다르게..
안녕하세요. 오늘은 vue.js의 특징중 Reactivity에 관해서 포스팅해보고자 합니다. 먼저, vue.js의 특징중에서 뷰 모델의 내용이 바뀌면 새로고침이 필요없이 즉각적으로 화면에 반영된다는 장점이 있습니다. 기존 웹개발에서의 소스를 보시죠. 기존 소스 우리가 일반적으로 html, css, javascript를 코딩할 때의 모습과 똑같은 모습입니다. 여기서 주목해야할 점이 str이라는 변수를 바꿔주고 innerHTML을 이용해서 두번 바인딩해주었다는 것입니다. 즉, 기존 웹개발에서는 데이터가 변경이 될때마다 개발자가 프로그래밍을 통해서 직접 바인딩해주어야 했습니다. 하지만 Vue.js에서는 Vue.js 소스 {{ message }} Vue 객체의 data의 message 속성이 변할 때마다 브라우..
컴포넌트간 통신 - 뷰의 경우는 컴포넌트로 화면을 구성하기 때문에 같은 웹페이지라도 데이터를 공유할 수 없는 경우가 많다. - 각 컴포넌트들의 scope(유효범위)가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없다. 상/하위 컴포넌트 관계 - 뷰의 가장 기본적인 데이터 전달방법. - 상위(Parent) 컴포넌트에서 props라는 속성으로 전달. - props : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성. 하위 컴포넌트의 속성에 정의. Vue.component('child-component',{ props:['props 속성 이름'], }); - 상위 컴포넌트의 HTML 코드에 정의된 child-component 태그에 v-bind 속성을 정의. 예제로 확인 ..
컴포넌트 - 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역) - 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 가능해진다. - 패턴이 있으므로 남이 작성한 코드도 보기 편해진다. 컴포넌트 등록 - 전역 컴포넌트와 지역 컴포넌트로 나뉨 - 지역(local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 가짐 - 전역(Global) 컴포넌트는 여러 인스턴스에서 공통으로 사용 가능 전역컴포넌트 컴포넌트 등록 - Vue.component('컴포넌트 이름', { // 컴포넌트 내용 }; - 컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그 이름을 의미함. - 뷰 생성자로 컴포넌트 등록 -> 인스턴스 객체 생성 -> 특정 화면 요소에 인스턴스 부착 순서로 진행됨. - my-comp..
개발환경 : window10 개발툴 : Atom Vue 버전 : 2.5 Vue.js를 이용해서 Hello Vue.js 찍기 {{message}} - Vuejs도 기본구조는 html이기 때문에 html template 안에 작성되는 코드이다. - new Vue로 선언되는 것이 뷰 인스턴스라고 한다. - el 속성은 뷰 인스턴스가 그려질 지점을 지정한다. 이 속성은 CSS 선택자 규칙을 준수합니다. - data 속성은 message 값을 정의하여 화면의 {{message}} 에 연결합니다. -> message가 m 이 되면 {{m}} 으로 출력하면 됩니다. 실제로 바꾸어서 브라우저에 띄우고 vue 개발자도구( Chrome 확장기능 )를 이용해서 Root 태그를 확인해보니 data 속성의 자식으로 nn이 지정..
