기술/Vue.js7 뷰 라우터 뷰 라우터 - 뷰 페이지 전환을 위한 공식 라이브러리 라우팅 Routing 은 웹 페이지 간의 이동 방법이다. 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 사용한다. 싱글 페이지 애플리케이션은 페이지를 이동할 때마다 서버에 웹 페이지를 요청하고 새로 갱신하지 않고, 미리 해당 페이지를 받아 놓고 페이지 이동 시 클라이언트의 라우팅을 이용해 화면을 갱신하는 패턴을 적용한 애플리케이션이다. 장점은 페이지간 전환시 깜빡임 없이 부드럽게 전환하며 화면 조작이 빨라 사용자 경험이 향상된다. 뷰, 리엑트, 앵귤러 같은 프런트엔드 프레임워크 사용을 하지 않고도, HTML 과 라우팅 자바스크립트 라이브러리를 이용해 라우팅 방식의 페이지 이동을 구현할 수 있다.. 2021. 1. 20. 뷰 컴포넌트 통신 뷰 컴포넌트 통신 뷰는 컴포넌트, 블록 단위로 화면을 구성하고, 컴포넌트 마다 고유한 유효 범위를 갖기 때문에, 동일한 웹 페이지 상이더라도 데이터를 공유할 수 없다. 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따른다. 가장 기본적인 데이터 전달 방법은 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법이다. 가족 관계로 보면 1촌간은 전달이 가능하고, 2촌 이상은 직접 전달이 안된다. 2촌 이상 직접 전달을 하기 위해서는 이벤트 버스를 이용한다. 이벤트 버스가 많아지면 관리가 필요한데 이 때 사용하는 상태관리도구로 뷰엑스 Vuex 가 있다. 상위 컴포넌트에서 하위로의 전달은 props.. 2020. 12. 18. 뷰 컴포넌트 뷰 컴포넌트 컴포넌트는 조합해서 화면을 구성할 수 있는 블록을 말한다. 뷰에서는 웹 화면을 구성할 때 일반적으로 사용하는 내비게이션바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다. 전역 컴포넌트와 지역 컴포넌트가 있다. 지역 컴포넌트는 특정 인스턴스에서만 유효하고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 전역 컴포넌트 등록 Vue.component('컴포넌트 이름', { // 컴포넌트 내용}); 컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그 이름을 말한다. 컴포넌트 내용에는 컴포넌트 태그가 실제 화면 HTML 요소로 변환될 때 표시될 속성들을 작성한다. 여기에는 template, data, methods 등.. 2020. 12. 17. 뷰 인스턴스 구조적으로 UI를 설계하기 위해서는 컴포넌트가 필요하고, 화면을 그리기 위해서는 인스턴스가 필요하다. 뷰 인스턴스는 필수적으로 생성해야 하는 기본 단위이다. 인스턴스가 있어야 화면에 표시된다. 뷰 인스턴스 생성 new Vue({ ... }); {{ message }} 뷰 인스턴스 생성자 new Vue() 에서 Vue 를 생성자라고 한다. 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. 이 생성자에는 필요한 기능을 미리 정의해 놓고 사용자가 기능을 재정의하여 편리하게 사용하게 한다. 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장하고, 새로 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법 일반적인 객체 지향 프로그래밍에서 사용하는 객체 정.. 2020. 12. 16. 개발 환경 설정 뷰로 웹 앱을 개발하기 위한 환경 설정 필요한 도구1. 크롬 브라우저2. 아톰 Atom 또는 비쥬얼스튜디오코드 VS Code 와 같은 텍스트 에디터3. 노드제이에스 Node.js4. 뷰 개발자 도구 (Vue.js devtools, 크롬 확장 플로그인) Atom 으로 vue.js 개발시 설치할 패키지1. language-vue - hedefalk - 설치 후 확인 방법 : main.vue 파일 생성 후 temp 치고 텝하면 기본 코드 자동 입력 - Atom 다운로드 : https://atom.io/ VS Code 로 vue.js 개발시 유용한 plugin 1. Vetur - Pine Wu : vue.js 코드 문법강조, 자동완성, 디버깅, Lint 등 지원2. Vue 2 Snippets - Hoolowtr.. 2020. 12. 15. Vue.js 특징 Vue.js 특징 뷰는 UI 화면단 라이브러리다 뷰는 UI화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델 ViewModel 에 해당하는 화면단 라이브러리이다. MVVM 패턴이란 화면을 모델 Model - 뷰 View - 뷰 모델 ViewModel 로 구조화하여 개발하는 방식이다. 화면 요소 제어 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 유지보수가 편해진다. 용어정의 뷰 View 사용자에게 보이는 화면 돔 DOMHTML 문서에 들어가는 태그, 클래스, 속성 등의 정보를 담고 있는 데이터 트리 돔 리스너 DOM Listener돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 모델 Model서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장하는 데이.. 2018. 7. 9. Vue.js 란 Vue.js 란 프런트엔드 시장에서 가장 주목 받고 있는 프런트엔드 프레임워크이다. 뷰는 화면단 라이브러리이면서 프레임워크이다. 라이브러리는 자주 사용하는 기능을 모아 재사용할 수 있도록 정리한 기술 모음이고, 프레임워크는 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 밀 구조를 정의해 놓은 도구이다. 뷰 공식사이트 http://www.vuejs.org 에서는 뷰를 점진적인 프레임워크 Progressive Framework라고 부른다. 프런트엔드 프레임워크에는 뷰 외에도 리액트 React 앵귤러 Angular 등이 많이 사용되고 있다. 뷰에 비해 오래전에 나왔던 프레임워크이고 이미 많은 사이트에서 사용하고 있다. 뷰의 창시자인 에반 유 Evan You도 구글에서 앵귤러로 많은 프로토타이핑.. 2018. 7. 9. 이전 1 다음
