IT&컴퓨터공학/Vue
-
[Vuex] GettersIT&컴퓨터공학/Vue 2021. 3. 10. 10:58
Getters 앞에서 Vuex 의 property 중 state 와 mutations 에 대해 다뤄봤다. 쉽게말하면 state 는 전역으로 사용될 데이터의 집합이고 mutations 는 이 state 의 값에 접근해서 값을 바꾸는 함수의 모음이다. 그럼 Getters 란 무엇일까 ? 여러 컴포넌트에서 Vuex state 를 각자 참조하고 계산하면 효율이 떨어진다. 때문에, state 에 기반한 별도의 값을 만들어 getters 내에 속성으로 저장(캐쉬) 해두고, 이 getters 내에 저장된 속성을 참조해서 사용하게 한다. // store.js (Vuex) getters: { doubleCounter: function (state) { return state.counter * 2; } }, // App...
-
[Vue.js] 6. 라우팅 - 동적 라우팅IT&컴퓨터공학/Vue 2021. 3. 5. 14:41
앞 포스트에서 /post/detail 은 포스트 상세 화면을 조회하기 위한 화면으로 설계했다. 상세화면은 포스트 아이디(id)에 따라 내용이 달라지는데 이를 라우트 경로에 추가한다면 화면을 그릴때 단서가 될수 있을 것이다. /post/1 /post/2 이런식으로 detail 대신 아이디 값이 온다면 어떨까? 뷰 라우터는 이러한 동적 라우트 매칭을 위한 설정도 제공한다. 먼저 라우터의 PostDetail 의 path 를 '/post/:id 로 바꾼다. import Vue from "vue" import VueRouter from "vue-router" import Home from '../views/home.vue' import Login from '../views/login.vue' import Logo..
-
[Vue.js] 6. 라우팅 - 중첩된 라우팅IT&컴퓨터공학/Vue 2021. 3. 5. 11:50
중첩된 라우팅 블로그 예제를 위한 중첩된 라우팅을 설계해보자 . 아래의 6가지 경로를 선정했다. / 홈 /login 로그인 /logout 로그아웃 /posts 포스트 목록 /posts/detail 포스트 상세 /posts/new 포스트 추가 일단 router 를 생성한 router/index.js 에 들어가자. 생성된 router 에 routes 속성에 path 와 component 들을 배열로 추가한다. import Vue from "vue" import VueRouter from "vue-router" // 뷰 어플리케이션에 라우터 플러그인을 추가한다. Vue.use(VueRouter) const router = new VueRouter({ mode: "history", routes: [ {path:..
-
[Vue.js] 5. 라우팅IT&컴퓨터공학/Vue 2021. 3. 5. 11:24
공식 라우터인 vue-router 를 사용해서 라우팅에 대해 알아보자 vue-router 설치 npm install vue-router router 객체 생성 뷰 인스턴스 생성 객체에는 'router' 라는 속성이 있다. Vue router 를 사용하기위해서는 이 속성을 통해 Vue router 객체를 넘겨줘야 한다. main.js 안에 뷰 인스턴스를 생성하므로 이 안에 넣어주자 //main.js import Vue from 'vue' import App from './App.vue' import router from "./router" Vue.config.productionTip = false new Vue({ render: h => h(App), router, }).$mount('#app') 이제 실..
-
[Vuex]1. Vuex 란 ?IT&컴퓨터공학/Vue 2021. 3. 4. 14:23
Vuex Vue.js 어플리케이션에서 상태 관리 패턴을 지원하는 라이브러리이다. 애플리케이션 내부의 모든 컴포넌트들이 공유하며, 사용되는 state 가 모두 담겨있는 저장소의 역할을 한다. 이 state들은 전역에서 store 라는 객체를 통해 관리한다. Vuex를 사용하지 않는 경우, 부모에서 자식으로 props 를 이용해 속성을 전달해야하는 번거로움이 있지만, Vuex를 사용함으로서 이런 번거로움에서 벗어날 수 있다. 의 그림을 보면 화살표가 한방향으로만 흘러간다. "단방향 데이터 흐름"이라는 용어를 쓰는데 전체적인 처리 흐름은 다음과 같다. 1) 컴포넌트가 action을 일으킨다.(버튼 클릭 이벤트 같은) 2) 액션에서는 외부 API를 호출한 뒤 그 결과를 이용해 변이(mutation)을 일으킨다...
-
[vue.js] 4. Directive 두번째 v-onceIT&컴퓨터공학/Vue 2021. 3. 3. 18:21
앞에서 html 속성 안에 변수를 이용하고싶을때 사용하는 Directive 인 v-bind 에 대해 공부해봤다. 다음으로 알아볼 Directive는 v-once 이다. v-once [HTML] {{hello}} {{sayHello()}} [JAVASCRIPT] new Vue({ el : "#app1", data : { // 객체형태 hello : "Welcome Back !" }, methods : { sayHello : function(){ this.hello = "No, i'll go home !" return this.hello; } } }); 첫째줄에는 "Welcome Back" 이 출력되고 두번째에 "No, i'll go home !" 이 출력될 줄 알았지만 sayHello() 함수가 호출되는 ..
-
[Vue.js] 3. v-bind/DirectiveIT&컴퓨터공학/Vue 2021. 3. 3. 16:41
앞에서 data 안의 변수 title 에 접근 시 {{ }} 기호를 사용한다고 배웠다. [HTML] {{title}} 그런데 이렇게 문자열을 출력하는 간단한 경우가 아니라 HTML 속성 안에 직접 사용하고 싶은 경우엔 어떻게 해야될까 ? [HTML] [JAVASCRIPT] new Vue({ el : "#app1", data : { // 객체형태 link : "https://www.google.com/" }, }); 속성에 직접 넣어주고싶은경우 {{ }} 를 사용할 수 없다. 대신 vue.js 에서 Directive 의 하나인 v-bind 를 사용한다 ! Directive HTML 태그 안에 들어가는 속성의 역할을 하며, v-라는 접두사가 붙는 것이 특징이다 a 태그 내에 href="링크주소" 속성이 있어..
-
[Vue.js]2. data 와 methodIT&컴퓨터공학/Vue 2021. 3. 2. 22:51
data 객체 혹은 함수의 형태로 정보를 가지고 있다. 아래는 data 안에 title 이라는 변수를 넣어준 javascript 코드다. new Vue({ el : "#app1", data : { // 객체형태 title : "Hello it's object", } }); new Vue({ el : "#app2", data() { // 함수형태 return { title : "Hello it's function !", } } }); 이 title이라는 변수를 HTML 상에서 사용하고싶은경우, 아래처럼 {{ }} 안에 변수명을 써주면 접근이 가능하다. {{ title }} {{ title }} 물론 이렇게 정적인 코딩도 가능하지만, Hello it's function! 우린 반응형 data , 즉 titl..