vuejs (17) 썸네일형 리스트형 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로 따로 뺄까 고민중 서버 설정 예제 Apache RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] #nginx location / { try_files $uri $uri/ /index.html; } #Native Node.js const http = require("http") const fs = require("fs") const httpPort = 80 http.createServer((req, res) => { fs.readFile("index.htm", "utf-8", (err, conten.. 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 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공됩니.. 네비게이션 가드 이름에서 알 수 있듯이 vue-router가 제공하는 네비게이션 가드는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용됩니다. 라우트 탐색 프로세스에 연결하는 방법에는 전역, 라우트별 또는 컴포넌트가 있습니다. Params 또는 쿼리를 변경하면 네비게이션 가드가 실행되지 않습니다. 단순히 $route 객체를 감시하고 그 변화에 반응하십시오. 또는 컴포넌트 가드의 beforeRouteUpdate를 사용하십시오 #전역 가드 router.beforeEach를 사용하여 보호하기 이전에 전역 등록을 할 수 있습니다. const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 네비게이션이 트리거될 때마다 가.. 동적 라우트 매칭 주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 자주 있습니다. 예를 들어 모든 사용자에 대해 동일한 레이아웃을 가지지만 하지만 다른 사용자 ID로 렌더링되어야하는 User 컴포넌트가 있을 수 있습니다. vue-router에서 우리는 경로에서 동적 세그먼트를 사용하여 다음을 할 수 있습니다. const User = { template: 'User' } const router = new VueRouter({ routes: [ // 동적 세그먼트는 콜론으로 시작합니다. { path: '/user/:id', component: User } ] }) 이제 /user/foo와 /user/bar 같은 URL은 모두 같은 경로에 매핑됩니다. 동적 세그먼트는 콜론 :으로 표시됩니다. 라우트가 일치하면.. 이전 1 2 3 다음 목록 더보기
