Vue 썸네일형 리스트형 Vue 에서 vo, dto 원활한 컨트롤을 위한 개발방법 VO 별로 컨트롤을 위해 vo 구조대로 class 도 만들어보고 class TestVO { this.idx = 0; this.pidx = 0; this.name = "TEST"; } vat testVO = new this.TestVO() Object로만 만들어보고 var testVO = { idx : 0 pidx: 0, name: 'TEST' } function 으로도 만들어 봤더니 TestVO: function() { this.idx = 0 this.pidx = 0 this.name = "TEST" } var testVO = new this.TestVO() function이 제일 낫더라 vo 객체 모은 내용만 js로 따로 뺄까 고민중 더보기 Vue 컴포넌트 간의 통신 Introduction Icon 1장과 3장에서 Vue의 특징중 컴포넌트 기반 프레임워크라는 내용과 인스턴스의 유효 범위에 대해서 설명하였습니다. 결국 인스턴스를 생성하여 컴포넌트로 사용하기 때문에 결국 컴포넌트가 유효 범위가 있다고 할 수 있습니다. 따라서 Vue의 컴포넌트는 유효 범위가 있기 때문에 서로 다른 컴포넌트 끼리 값을 직접적으로 참조할 수 없습니다. 그렇다면 서로 다른 컴포넌트 끼리 데이터 공유가 필요할 경우 어떻게 해야할까요? 이번장에서는 서로 다른 컴포넌트간의 통신에 대해서 설명하겠습니다. 1. 컴포넌트 간 통신과 유효 범위 2. 상위 하위 컴포넌트 관계 3. 상위에서 하위 컴포넌트로 데이터 전달하기 4. 하위에서 상위 컴포넌트로 이벤트 전달하기 5. 관계 없는 컴포넌트 간 통신 - 이.. 더보기 Vue 의 화면 개발 단위 (인스턴스 & 컴포넌트) Introduction Icon Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위는 인스턴스(Instance)입니다. 앞 2장에서 'Hello Vue.js!' 가 출력될 수 있었던 것은 인스턴스가 생성되었기 때문입니다. 그리고 1장에서 Vue의 특징 중 하나를 컴포넌트(Component)기반 이라고 설명하였습니다. 컴포넌트란 화면을 블록처럼 조합하여 화면을 구성할 수 있도록 하는 단위입니다. 이 글에서는 인스턴스와 컴포넌트에 대해서 설명하겠습니다. 1. 인스턴스 생성 2. 인스턴스의 유효 범위 3. 인스턴스 라이프 사이클 4. 컴포넌트 등록 Conclusions Prerequisite Icon 생성자 - https://ko.wikipedia.org/wiki/%EC%83%9D%EC%84%B.. 더보기 Hello Vue & 개발환경 설정 Introduction Icon Vue.js 의 초기 개발환경은 그다지 어려운 설정이 없습니다. Angular 상위 버전(2 이상)에서는 Node.js 가 필수이지만 Vue.js는 일반 Javascript 라이브러리처럼 사용할 수 있고, Node.js로 프로젝트를 구성할 수도 있습니다. 간단한 개발 프로젝트에서는 텍스트 에디터와 대부분 사용하는 브라우저 Chrome에서 개발자 도구 설치만 하면 개발 할 수 있습니다. 1. Hello Vue.js! 2. Vue 개발자 도구 설치 및 사용방법 3. Vue 개발자 도구 사용 방법 Conclusions Prerequisite Icon Text Editor - Notepad, Atom, Sublime Text, VSCode 등... Browser - Chrome .. 더보기 Vue.js 란? Introduction Icon Vue.js 는 웹 페이지 화면을 개발하기 위한 Front-end Framework 입니다. 기존 웹 개발자뿐만 아니라 HTML, CSS, Javascript 기초만 아는 웹 개발 입문자 및 컴퓨터 비전공자들도 배우기 쉽게 만들어졌습니다. 뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있습니다. 어떤 의미인지 다음 그림으로 알아보겠습니다. (점진적인 Framework로서의 Vue의 의미) 위 그림은 Vue의 창시자인 에반 유가 2017년 Vue.js 컨퍼런스에서 발표한 내용 중에 있는 그림입니다. Vue 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공됩니.. 더보기
