![]()
Vue 프로젝트 빌드시(npm run build) 디폴트로 ROOT/dist 디렉토리로 결과물이 생성되게 된다. 이 빌드 결과물 경로를 설정하기 위해서는 약간의 설정이 필요하다. Vue cli3 이상 버전에서는 webpack 설정이 내부로 감춰져있기 때문에 설정파일을 따로 만들어줘야한다. vue.config.js를 ROOT에 생성하자. vue.config.js const path = require("path"); module.exports = { outputDir: path.resolve(__dirname, "./docker/dist"), }outputDir 옵션을 사용하면 되는데, 위와 같이 변경을 하고 npm run build를 시행하게 되면 ROOT/docker/dist 하위에 결과물이 떨어지게 된..
일단 라우터의 history 모드를 사용한다. history.pushState API를 활용하여 페이지를 다시 로드하지 않고도 URL을 탐색할 수 있다. const router = new VueRouter({ mode: 'history', routes: [...] }); history 모드를 사용하고 local devServer 에서 동작을 시키면, 우리가 원하는대로 동작이 된다. 하지만 vue 를 nginx 나 apache 같은 웹서버에 배포할 경우 문제가 생긴다. 예전에 처음 vue로 개발하고 nginx에 배포하였을 때 당황했던 적이 있었는데 바로 url 접근시 404에러가 뜬다는 것이다. nginx에 아무런 설정을 하지않고 vue를 번들링해서 배포한 후 http://cornsworld.com/use..
Vuex 소개 복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하는 라이브러리 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인함 Flux와 MVC 패턴 소개 및 Flux 등장 배경 Vuex 설치 및 등록 npm install vuex --savestore.js (src/store/store.js) import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); export const store = new Vuex.Store({ // });main.js import Vue from 'vue' import App from './App.vue' ..
라우팅이란? 라우팅 이란 웹 페이지 간의 이동 방법을 말함. 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA)에서 주로 사용 뷰 라우터 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수있도록 지원하는 공식 라이브러리. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있음 페이지 이동 태그. 화면에서는 로 표시되며 클릭하면 to에 지정한 URL로 이동 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역 뷰 라우터 실습하기 메인 컴포넌트로 이동 로그인 컴포넌트로 이동 네스티드 라우터 네스티드 라우터(Nested Router)는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있음 네임드 뷰 네임드뷰(Naed View)는 특정 페..
![]()
Vue의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없음 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위(Scope) 를 갖기 때문 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없음 상 하위 컴포넌트 관계 직접 다른 컴포넌트의 값을 참조할 수 없기 때문에, 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 한다. 기본적인 데이터 전달 방법은 바로 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법 하위 컴포넌트 — 이벤트발생 —> 상위 컴포넌트 상위 컴포넌트 — props 전달 —> 하위 컴포넌트 하위에서 상위는 기본적으로 이벤트만 전달할 수 있음 상위에서 하위 컴포넌트로 데이터 전달하기 상위컴포넌트에..
컴포넌트(component)란 조합하여 화면을 구성할 수 있는 블록을 의미 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있음. 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리함. 컴포넌트 등록하기 전역(Global) : 여러 인스턴스에서 공통으로 사용할 수 있는 컴포넌트 지역(Local) : 특정 인스턴스에만 유효한 범위를 갖음 전역 컴포넌트 등록 라이브러리 로딩 후 Vue 변수를 이용하여 등록 Vue.component("컴포넌트 이름", { // 컴포넌트 내용 }); 컴포넌트 이름 ⇒ template 속성에서 사용할 HTML 사용자 정의 태그(custom tag) 컴포넌트 내용 ⇒ 컴포넌트 태그가 실제 화면의 HTM..
![]()
뷰 인스턴스 라이프 사이클 뷰의 라이프 사이클을 이해해야 하는 이유는 그 시점에 원하는 로직을 구현할 수 있기 때문이다. 예를 들어, 컴포넌트가 생성되자마자 서버에 ajax요청을 날려서 데이터를 받아오고 싶으면, created나 beforeMount시점에 ajax요청을 보낼 수 있다. 주로 사용되는 라이프 사이클 훅 목록 created beforeMount mounted destroyed beforeCreate data속성과 methods속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없음 created data속성과 methods속성이 정의되었기 때문에 this.data, this.fetchData()같은 로직들을 이용하여 data속성과 methods속성 값에 접근하여 ..
뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 뷰 인스턴스 생성 new Vue({ ... }) new Vue() 생성자 Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있음. 생성자에 뷰로 개발할때 필요한 기능들을 미리 정의해놓고 그 기능을 재정의하여 편리하게 사용자들이 사용할 수 있음 뷰 인스턴스 옵션 속성 뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미 el : 뷰로 만든 화면이 그려지는 시작점을 의미. 뷰 인스턴스로 화면이 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정 template : 화면에 표시할 HTML, CSS등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그..
