전체 글56 vuejs 라우터 설치 및 구현 1. 라우터 설치 npm i vue-router --save 2. package.json 안에 dependencies에 "vue-router": "^3.5.1" 확인 3. routes 폴더 생성 index 파일 생성 -> index 파일에 vueRouter 등록 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); export const router = new VueRouter ({ mode : 'history', //url # 없애는 코드 routes : [ { //path : ' ' //component : } ] )}; 4. main.js에 router 등록 import Vue from 'vue'; impo.. 2021. 5. 10. 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. 이전 1 ··· 5 6 7 8 9 10 다음
