대가는 결과를 만든다

Vue에는 slot이라는 개념이 있는데 무엇? Parent Component에서 Child Component의 Element Tag사이에 삽입하여 Child Component의 원하는 Element로 fallback해주고자 할때 사용하는 개념이다. 1. Basic Component를 다음과 같이 정의: Submit 그러면 이라는 Component를 사용할 때, Submit 다음과 같이 렌더링이 될 것이다. 하지만 전송 과같이 Component를 사용하면 전송 으로 렌더링이 된다. 앞서 말한 것처럼 Tag사이에 넣은 값을 Child Component의 Slot으로 fallback되는 것이다. 2. Named Slot *name을 정하지 않은 의 name은 "default" 이라는 Component를 다음과..

Vuex 란? Vue.js 의 상태관리 를 위한 패턴이자 라이브러리. 다른 상태관리 패턴이나 라이브러리와 비교했을 때 Vue 의 Reactivity 체계를 효율적으로 활용하여 화면 업데이트가 가능하다는 차이점이 있다. 상태관리 (State Management)의 필요성 컴포넌트 기반 프레임워크에서는 화면 구성을 위해 화면 단위를 컴포넌트로 구현하여 사용한다. 예를 들면, header, button, list 등의 컴포넌트들이 단위가 되어 한 화면에서 사용된다. 이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생긴다. 달리 말해, header -> button, button -> list , button -> footer 등의 컴포넌트 간 데이터 전달 및 이벤트 통신 등의..

vue 프로젝트도 jsdoc으로 생성해보기위해 jsdoc-vue를 설치하며 현재 프로젝트에 설정되어 있는 vue-template-compiler 버전이 업데이트 되 다음과 같은 build 에러가 갑자기 발생했다. ====================================================================== Vue packages version mismatch: - vue@2.5.22- vue-template-compiler@2.6.6 ====================================================================== 시도1. 해당 버전 vue-template-compiler를 uninstall 하고 @2.5.2 버전을 설치해도 안..

Vue Instance에서 computed의 활용에 대한 예를 정리한다. 1. HTML내에서 사용하는 data값의 가공이 필요한 경우: '나쁨' 경우와 같이 '{{}}' 안에서 해결하는 것보다 computed에서 해결하면, 코드도 깔끔해지고 재사용도 가능하므로 computed 활용 권장 나쁨{{ fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') }} 좋음 {{ normalizedFullName }} // The complex expression has been moved to a computed property computed: { normalizedFullName: funct..

Vue에서 구현하는 Class와 Style binding 기본적인 사용예제 공홈에서 가져와 정리함.v-bind:를 이용하여 Vue instance에서 정의한 데이터 값을 이용해 class와 style을 적용할 수 있다. 1. class 1-1)예시 data: { isActive: true, hasError: false } => Result Render는 다음과 같다. 1-2) 다음과 같이 object 자체 적용도 가능 data: { classObject: { active: true, 'text-danger': false } } 1-3) 배열형태로 적용도 가능 data: { activeClass: 'active', errorClass: 'text-danger' } => Result Render는 다음과 같..

Vue.js는 렌더링 된 DOM을 Vue 인스턴스의 데이터에 선언적으로 binding할 수 있는 HTML 기반 템플릿 구문을 사용한다.내부적으로 Vue는 템플릿을 Virtual DOM 렌더링 함수로 컴파일 한다.상태가 변경될 때 최소한으로 DOM을 조작하고 적용한다.템플릿 대신 렌더링 함수를 직접 작성도 가능하고, 선택사항으로 *JSX를 지원한다. *JSX란? : javascript + XML을 합쳐서 탄생한 기존 자바스크립트의 확장 문법. 개발자가 자바스크립트 내부에 마크업 코드를 작성할 수 있는 형태. React에서 사용하는 문법 1. v-html : '{{}}'는 일반 텍스트로 데이터를 해석하므로, 실제 HTML 출력을 원하는 경우 v-html을 사용Using mustaches: {{ rawHtml..

Vue를 사용하기 위한 방법 두가지를 메모한다. 1. 간단한 script 참조 방법 2. vue-cli를 이용한 webpack, browserify로 프로젝트 생성 (node.js 설치를 통해 npm을 사용할 수 있다는 전제 하에 cmd 창에서 진행) npm install vue-cli -global (vue-cli 패키지 설치) vue (사용할 수 있는 명령어, 옵션 보여줌) *vue-cli 명령어 참고*템플릿 종류설명vue init webpack고급 웹팩 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원vue init webpack-simple웹팩 최소 기능을 활용한 프로젝트 구성방식, 빠른 화면 프로토타이핑용vue init browserify고급 브라우저파리 기능을 활용한 프로젝트 ..