본문 바로가기

SPA25

Vue CLI 2.x / CLI 3.x 비교 CLI 2.x vs CLI 3.x -명령어 -2.x : vue init '프로젝트 템플릿 이름', '파일 위치' -3.x L vue create '프로젝트 이름' ​ -웹팩 설정 파일 -2.x : 노출 0 -3.x : 노출 X ​ -프로젝트 구성 -2.x : 깃헙의 템플릿 다운로드 -3.x : 플러그인 기반으로 기능 추가 ​ -ES6 이해도 -2.x : 필요 X -3.x : 필요 O ​ 2021. 5. 10.
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.

티스토리툴바