728x90 반응형 전체 글170 [Vue.js] ES6 ES5 ECMAScript 5로 기존 ES3에서 업그레이드된 버전으로 ES4는 문제가 많이 폐기된 상태 www.w3schools.com/js/js_es5.asp 특징 변수의 Scope 기존 자바스크립트(ES5)는 { }에 상관없이 스코프가 설정됨 var sum = 0; for(var i = 1; i 로 대체 흔히 사용하는 콜백 함수의 문법을 간결화 // ES5 함수 정의 방식 var sum = function(a, b) { return a + b; } // ES6 함수 정의 방식 var sum = (a, b) => { return a + b; } sum(10, 20); Enhanced Object Literals - 향상된 객체 리터럴 객체의 속성을 메서드로 사용할 때 function예약어를 생략하고 생.. 2020. 9. 11. [Vue.js] Todo App 사용자 경험 개선하기 개선사항 입력란 빈 값일 때 추가 시 확인 알람(모달 컴포넌트 등록), 트랜지션 구현 모달 컴포넌트 등록 구조 및 코드 // Modal.vue default header default body default footer OK 참고 vuejs.org/v2/examples/modal.html Modal Component — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org TodoInput에 등록 기능 빈 값으로 추가 시 Modal창으로 경고 출력 // TodoInput.vue 경고 ! 값을 입력하세요. slot 특정 컴포넌트에서 다른 컴포넌트를 등록하여 사용 시 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포.. 2020. 9. 10. [Vue.js] Todo App 개선하기 개선사항 할 일 추가, 삭제나 Clear All 시 리스트에 바로 반영하기 원인 할 일 추가(TodoInput), 리스트(TodoList), Clear All(TodoFooter) 컴포넌트가 나뉘어져 있어 컴포넌트끼리 변경사항을 전달하지 않았기 때문에 localStorage에서는 변경사항이 보이지만 화면에서는 확인되지 않는다. [리팩토링] 할 일 목록 표시 기능 기능 App.vue로부터 props 통신을 사용하여 todoItems를 받아 TodoList에 출력 // App.vue // TodoList.vue {{ todoItem.item }} [리팩토링] 할 일 추가 기능 기능 TodoInput에서 event emit 통신을 사용하여 입력 값 전달 및 추가 후 리스트에 바로 반영 // App.vue //.. 2020. 9. 10. [Vue.js] Todo App 만들기 Todo App 간단한 일정관리 App으로 기본 CRUD를 구현하기 적합하다. 구조 컴포넌트 생성 및 등록하기 1. src/components에 필요한 컴포넌트용 vue파일 생성 2. App.vue에 컴포넌트용 vue파일 import // App.vue 파비콘, 반응형 웹, 폰트, 아이콘 태그 설정하기 // index.html ... ... TodoHeader 구현 기능 App 제목 // TodoHeader.vue TODO it! TodoInput 구현 기능 할 일 추가 (버튼 클릭, 엔터키 이벤트) localStorage에 객체로 할 일, 완료여부 저장 저장 후 입력란 비우기 // TodoInput.vue LocalStorage 확인 TodoList 구현 기능 localStorage에 저장된 할 일 목.. 2020. 9. 10. [Vue.js] 싱글 파일 컴포넌트 싱글 파일 컴포넌트 화면의 특정 영역에 대한 HTML, CSS, JS코드를 한 파일에서 관리하는 방법으로 .vue 확장자를 가진 파일을 말한다. .vue 파일 구조 동작 원리 뷰 로더에 의해 HTML, CSS, JS와 같은 웹 자원으로 분리되어 실행된다. 뷰 로더는 웹팩의 로더 종류중 하나로 뷰 CLI 프로젝트를 생성하면 기본적으로 설정된다. 컴포넌트 등록하기 1. src/components에 컴포넌트 용 vue파일 생성 // AppHeader.vue Header 2. App.vue에서 컴포넌트 용 vue파일 import 및 components속성 등록 // App.vue 동작 확인 Props 속성 사용하기 1. props 통신 할 data 속성 추가 및 v-bind 지정 // App.vue 2. 컴포넌.. 2020. 9. 9. 이전 1 ··· 18 19 20 21 22 23 24 ··· 34 다음