코드공부방

Vue.js To Do List 만들기 #4 컴포넌트 구현(3), 문제해결 컴포넌트 생성 및 등록(3) 컴포넌트 구현 > TodoFooter 이제 마지막 TodoFooter 컴포넌트 구현만 남겨두고있다. TodoFooter컴포넌트에서는 전체 목록을 삭제하는 버튼을 넣고 버튼을 클릭하면 clearTodo메소드를 실행한다. 전체삭제 /* /src/components/TodoFooter.vue > */ export default { methods: { clearTodo(){ localStorage.clear(); } } } 전체삭제 버튼을 누르면 localStorage의 모든 목록이 삭제된다. 화면의 할 일 목록은 새로고침을 해야만 삭제가 된다. TodoInput컴포넌트 에서 할 일을 추가했을때와 TodoFo..

Vue.js To Do List 만들기 #3 컴포넌트 구현(2) 컴포넌트 생성 및 등록(2) 컴포넌트 구현 > TodoList TodoList컴포넌트는 localStorage에 저장되어있는 item 목록을 화면에 보여주는 역할을 한다. 순서가 없는 목록은 ul, li 요소를 사용한다. 먼저 localStorage에 저장되어있는 목록을 vue 데이터 todoItems에 저장한다. /* /src/components/TodoList.vue > */ export default { data(){ return { todoItems: [] } }, created(){ if(localStorage.length > 0){ for(var i = 0; i < localStorage.length; i++){ this.todo..

Vue.js To Do List 만들기 #2 컴포넌트 구현(1) 컴포넌트 생성 및 등록(1) 프로젝트 초기 구성을 완료하였으니 애플리케이션에 필요한 컴포넌트들을 생성하고 등록한다. To Do List에 필요한 컴포넌트는 TodoHeader, TodoInput, TodoList, TodoFooter 4개이다. /src/경로 아래에 components 폴더를 생성 후 TodoHeader.vue, TodoInput.vue, TodoList.vue, TodoFooter.vue 파일을 생성한다. 각각의 파일을 열어 아래와 같이 컴포넌트의 기본 구조를 잡는다. 각 컴포넌트 명 생성한 컴포넌트를 등록하여 화면에 나타내기 위하여 최상위 컴포넌트인 App.vue에 등록한다. /src/App.vue에 기본적으로 들어있는 ..

Vue.js To Do List 만들기 #1 프로젝트 생성 난 이미 포스팅을 하기 전 책을 보고 한번 쭉 따라 만들어보았다. 지겨운 To Do List 이다. 구글에 "Vuejs to do list" 라고 검색하면 수많은 검색결과가 나온다. 그만큼 간단하지만 매우 중요한 것을 담고 있는 예제라는 것을 증명하는 것이라 생각된다. 실제로 한번 따라해보니 CRUD(Create, Read, Update, Delete)를 모두 경험할 수 있었다. 프로젝트를 통해 경험하는 것이 가장 학습에 도움이 되겠지만 실무에서는 사용 할일이 없다보니 제한적이다. 때문에 사이드 프로젝트를 통해 익숙해져야 하는데 아직은 문법도 익숙치 않으니 To Do List를 한번 더 만들어보려고 한다. 설치, 프로젝트 생성 이 예제에서는 웹팩..