전체 글 (32) 썸네일형 리스트형 [ Vue.js ] Vuex _ Helper함수 각 속성들을 더 쉽게 사용하는 방법 - HelperStore 에 있는 4가지 속성들을 간편하게 코딩하는 방법 state - > mapStategetters -> mapGettersmutations -> mapMutationsactions -> mapActions 헬퍼를 사용하고자 하는 vue 파일에서 해당 헬퍼를 로딩한다import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'export default{ computed(){ ...mapState(['num']), ...mapGetters(['countedNum'])}, methods: { ...mapMutations(['clickBtn']), ...mapActions.. [ Vue.js ] Vuex Vuex란?무수히 많은 컴포넌트의 데이터를 효율적으로 관리하기 위한 상태관리 패턴이자 라이브러리▷ React의 Flux패턴에서 기인▷ Vue.js 중고급 개발자로 성장하기 위한 필수 관문 컴포넌트의 개수가 많아질수록 데이터전달이 어려워지는데이벤트 버스로 해결한다고 하면?//Login.vueeventBus.$emit('fetch', loginInfo);// List.vueeventBus.$on('display', data => this.displayOnScreen(data));// Chart.vueeventBus.$emit('refreshData',chartData);어디서 이벤트를 보냈는지, 어디서 받았는지를 알기가 어렵다컴포넌트 간 데이터 전달이 명시적이지 않다! Flux - Unidirec.. [ Vue.js ] Todo App _ Modal, Transition 지금까지 구현한 투두앱은 기능적으로는 잘 작동하지만, 아무것도 입력하지 않고 + 버튼을 클릭하면 뭐라고 하는 경고를 주고싶은데, alert창은 너무 심심하니까 모달을 만들어보자! 어디서든 사용할 수있게 모달파일을 따로 생성해주자 모달파일안에 아래의 페이지에서 내용을 가져오면 되는데, HTML이랑 CSS를 그대로 긁어서 내 파일에 복사해준다. https://v2.ko.vuejs.org/v2/examples/modal.html 모달 컴포넌트 — Vue.jsVue.js - 프로그레시브 자바스크립트 프레임워크v2.ko.vuejs.org 할일기능이 추가되고 삭제되는 컴포넌트는 TodoInput.vue이다. AlertModal.vue파일을 import해주자(강의에서는 Modal로 진행되었는데, 나는 Moda.. [ Vue.js ] ES6 ECMAScript FE Framework인 React, Angular, Vue에서 권고하는 언어 형식, 문법이 간결해진다. Babel ES6의 문법을 모든 브라우저가 호환 가능한 형태 즉 ES5로 변환하는것을 바로 트랜스파일링이라고 하고,이 역할을 해주는게 Babel이다 https://babeljs.io/ const & let ● 블록 단위 { }로 변수의 범위가 제한되었다. ● const : 한번 선언한 값에 대해서 변경할 수 없음(상수개념) ● let : 한번 선언한 값에 대해서 다시 선언할 수 없음 const .. [ Vue.js ] Todo App 구현 _ 리팩토링 리팩토링 기존에 만들어둔 컴포넌트들은 서로서로 연결이 되어있지 않다.( 할일을 추가해도 화면에서는 바로 추가되지않는 등.. )전체적인 컴포넌트에서 하나의 데이터만 바라보게끔 구조화를 해야한다. App.vue에 각각의 컴포넌트에서 처리하던 데이터 로직들을 다 끌어올거다. TodoList.vue부터 가져와보자'created' 라이프사이클훅을 들고오자data: function(){ return { todoItems: [] } },methods: {...},created: function () { if (localStorage.length > 0) { for (var i = 0; i 컴포넌트가 생성되자마자 배열을 담아놓을건데 TodoItems 배열을 선언하고 이 빈배.. [ Vue.js ] Todo App 구현 _ 할일 목록(완료, 전체지우기 ) 할일 완료 기능 체크박스(체크아이콘)을 추가해서 할일을 다 했으면 완료처리를 만들어주자스타일은 대략 추가해주고 기존에 쓰던 방식대로 어썸폰트에서 아이콘을 추가해준다. 일단 이렇게넣어주고 지금부턴 앞에 작성했던 input부분의 코드를 수정해야한다.TodoInput.vue파일로 넘어가서 methods에 오브젝트를 하나 만들어준다. methods: { addTodo: function () { if (this.newTodoItem !== "") { var obj = { completed: false, item: this.newTodoItem }; // 저장하는 로직 localStorage.setItem(this.newTodoItem, JSON.stringif.. [ Vue.js ] Todo App 구현 _ 할일 목록(추가, 삭제) 할일 추가 기능 구현 'addTodo' 메서드를 분리하는 작업부터 하자input박스의 값을 비우는 기능을 분할할껀데, clearInput메서드를 생성해서 넣어준다. methods: { addTodo: function () { // 저장하는 로직 localStorage.setItem(this.newTodoItem, this.newTodoItem); this.clearInput(); }, // 비우는 메서드 만들기(분할) clearInput: function () { this.newTodoItem = ""; }, }, 이제 스타일링을 한다 인풋박스를 먼저 꾸며주자클래스에 이름 넣어주고, add버튼을 꾸며줄건데, font.. [ Vue.js ] Todo App 구현 _ 플젝생성, 컴포넌트 구성 등 1. 프로젝트 생성vue create vue-todoDefault ([Vue 3] babel, eslint) 선택cd vue-todo npm run serve 2. 기본 컴포넌트 등록src > components > TodoHeader.vue, TodoList.vue, TodoInput.vue, TodoFooter.vue 파일 생성 App.vue에 컴포넌트 생성 및 등록 이렇게 하고 화면 새로고침하면 잘 등록이 되었다 ! 모바일 웹에서도 잘 동작할 수 있도록 반응형 웹을 만든다이때 필요한게 View port(메타 뷰포트)모바일, PC, 태블릿 등 어떤 기기에서 웹사이트를 로딩을 하던 그 웹사이트가 해당 기기에 가장 최적화된 형태로 레이아웃이 깨지지 않고 나오게 하는.. 이전 1 2 3 4 다음
