본문 바로가기

SPA/Vue18

vue.js todolist 만들기 [Helper함수 사용] --4 vuex로 todolist 리팩토링 ▼ solm-blog.tistory.com/13?category=858024 vue.js Todolist 만들기 [vuex 리팩토링] --3 Vuex로 해결할 수 있는 문제 1. MVC 패턴에서 발생하는 구조적 오류 2. 컴포넌트 간 데이터 전달 명시 3. 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제 vuex 라이브러 solm-blog.tistory.com Helper함수를 사용하여 vuex 속성들을 더 쉽게 사용해보자. -state -> mapState -getters - > mapGetters -mutations -> mapMutations -actions -> mapActions 1. store.js export const store = ne.. 2021. 5. 10.
vue.js Todolist 만들기 [vuex 리팩토링] --3 Vuex로 해결할 수 있는 문제 1. MVC 패턴에서 발생하는 구조적 오류 2. 컴포넌트 간 데이터 전달 명시 3. 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제 vuex 라이브러리의 주요 속성인 state, getters, mutations, actions를 사용하여 기존 Todolist 리팩토링을 해보자. 이전 게시물 보러 가기 ▼ solm-blog.tistory.com/12?category=858024 vue.js Todolist 만들기 [컴포넌트 통신O] --2 컴포넌트 통신하지 않은 Todolist 보러 가기 ▼ solm-blog.tistory.com/11 vue.js ToDoList 만들기 [컴포넌트 통신X] -Todolist 제작 header, input, list, fo.. 2021. 5. 10.
vue.js Todolist 만들기 [컴포넌트 통신O] --2 컴포넌트 통신하지 않은 Todolist 보러 가기 ▼ solm-blog.tistory.com/11 vue.js ToDoList 만들기 [컴포넌트 통신X] -Todolist 제작 header, input, list, footer 네 가지의 컴포넌트로 나누어 제작 -기능 설명 input : list 입력, list없을 시 작성 안내 문구, 입력칸이 공백인데 등록 버튼 클릭 시 작성 안내 모달창 출력 list :.. solm-blog.tistory.com 전에 올린 포스팅은 컴포넌트간 통신이 되지않아 데이터 교류가 되지 않는 오류가 있었다. 오류를 해결하기 위해 v-bind와 v-on을 이용하여 컴포넌트간 통신이 이루어지게 해보자. *주석으로 달아놓은 번호 따라가면 컴포넌트 통신 큰 줄기 이해 가능 1. Ap.. 2021. 5. 7.
vue.js ToDoList 만들기 [컴포넌트 통신X] --1 -Todolist 제작 header, input, list, footer 네 가지의 컴포넌트로 나누어 제작 -기능 설명 input : list 입력, list없을 시 작성 안내 문구, 입력칸이 공백인데 등록 버튼 클릭 시 작성 안내 모달창 출력 list : input으로 받은 list 출력, 할일 목록 진행중/완료 체크 기능, 일정 삭제 기능 footer : list 전체 삭제 -현재 문제점 1. list 입력 시 바로 적용되지 않고 새로 고침 후 화면에 일정이 등록됨 2. list 삭제 버튼 클릭 시 바로 적용이 안되고 새로 고침 후 삭제 확인 됨 2. list 전체 삭제 버튼 클릭 시 바로 적용되지 않고 새로 고침 후 삭제 확인 됨 => 각 컴포넌트간에 데이터 전달이 안돼서 갱신이 안됨 -해결 방법 .. 2021. 5. 7.
[Vue.js] 인스턴스, 컴포넌트, 라우터, axios, 템플릿 문법, CLI *Vue는 무엇인가? MVVM 패턴의 뷰모델 (viewModel) 레이어에 해당하는 화면(view)단 라이브러리 *Reactivity 구현 Object.defineProperty(대상 객체, 객체의 속성, { //정의할 내용 }) // 객체의 동작을 재정의 하는 문법 ​ Object.defineProperty(viewModel, 'str', { // 속성에 접근했을 때 동작을 정의 get : function(){ console.log('접근'); }, // 속성에 값을 할당했을 때 동작을 정의 set : function(newValue){ console.log('할당', (newValue)); div.innerHTML = newValue; } }); ​ *Reactivity 라이브러리화 하기 라이브러리화.. 2021. 5. 6.
Vuex - 프로젝트 구조화 및 모듈화 *프로젝트 구조화와 모듈화 방법1 -아래와 같은 store 구조를 어떻게 모듈화 할 수 있을까? ​ 예제) // store.js import Vue form 'vue' import Vuex from 'vuex' ​ export const store = new Vuex.Store({ state : {}, getter : {}, mutations : {}, actions : {} }); ​ 힌트 : Vuex.Store({})의 속성을 모듈로 연결 ​ -ES6의 import & Export를 이용하여 속성별로 모듈화 import Vue from 'vue' import Vuex form 'vuex' import * as getters from 'store/getters.js' import * as mutatio.. 2021. 5. 3.

티스토리툴바