🧶 𝗪𝗲𝗯

🧶 𝗪𝗲𝗯/Vue
[to-do-app] 리팩토링: 할 일 모두 삭제 기능
App.vue clearAll 이벤트가 발생하면 해당 컴포넌트의 clearAllItems 함수가 수행됩니다. // 할 일 모두 삭제 clearAllItems() { localStorage.clear(); this.todoItems = []; }, clearAllItems() 함수를 이용하여 로컬 스토리지도 비우고 todoItems 배열도 비워줍니다. todoItems 배열이 비워야지 화면에 즉각적으로 반영됩니다. TodoFooter.vue clearAll 이벤트를 emit 으로 발생합니다. 결과 화면 [Clear All] 버튼을 클릭했을 시 전부 다 삭제되는 것을 확인할 수 있습니다. vue clear vue 모두 삭제 vue 로컬 스토리지 vue all clear
→2022.02.24
🧶 𝗪𝗲𝗯/Vue
[to-do-app] 리팩토링: 할 일 완료 기능
App.vue toggleItem 이벤트가 발생하면 해당 컴포넌트의 toggleOneItem 함수가 수행됩니다. // 할 일 완료 toggleOneItem(todoItem, index) { this.todoItems[index].completed = !this.todoItems[index].completed; localStorage.removeItem(todoItem.item); localStorage.setItem(todoItem.item, JSON.stringify(todoItem)); // 갱신 }, todoItems[index] 로 접근을 합니다. 해당 요소의 completed 를 반대로 변경해줍니다. 그리고나서 로컬 스토리지에서 키를 이용하여 삭제를 하고 다시 해당 키로 JSON 형태로 다시 저..
→2022.02.24
🧶 𝗪𝗲𝗯/Vue
[to-do-app] 리팩토링: 할 일 삭제 기능
App.vue removeItem 이벤트가 발생하면 removeOneItem 함수가 발생합니다. // 할 일 삭제 removeOneItem(todoItem, index) { localStorage.removeItem(todoItem.item); this.todoItems.splice(index, 1); }, 로컬 스토리지에서 todoItem.item 키를 삭제합니다. 그리고나서 todoItems 안에 들어있는 요소를 삭제해야지 화면에 즉각적으로 반영이 됩니다. TodoList.vue // 리스트 요소 삭제 removeTodo(todoItem, index) { this.$emit("removeItem", todoItem, index); }, removeItem 이벤트를 발생시키며 뒤의 데이터를 상위 컴포넌..
→2022.02.24
🧶 𝗪𝗲𝗯/Vue
[to-do-app] 리팩토링: 할 일 추가 기능
App.vue 하위 컴포넌트 → 상위 컴포넌트 데이터 전달하기 v-on:하위 컴포넌트에서 발생하는 이벤트 명="현재 컴포넌트의 메서드 명" v-on 키워드를 사용합니다. 현재 컴포넌트에서 addOneItem() 함수를 만들고, 하위 컴포넌트에서 addTodoItem 이벤트를 전달하도록 하겠습니다. 즉, 하위 컴포넌트에서 addTodoItem 이벤트가 발생하면 addOneItem() 함수가 수행됩니다. data() { return { todoItems: [], // app.vue 에서 관리가 된다. }; }, methods: { // input에서 입력된 메모를 추가 addOneItem(todoItem) { var obj = { completed: false, item: todoItem }; // JSON..
→2022.02.24
🧶 𝗪𝗲𝗯/Vue
[to-do-app] 리팩토링: 할일 목록 표시 기능
현재 애플리케이션에서 고쳐야 하는 부분 1. 할 일 추가 시 즉각적으로 화면 목록 반영 ❌ 2. 모두 삭제 시 즉각적으로 화면 목록 목록 반영 ❌ 현재 애플리케이션에서 고쳐야할 문제점은 위와 같습니다. 화면에 바로바로 반영이 되지 않습니다. App.vue data 선언 data() { return { todoItems: [], }; }, todoItems 를 배열로 선언합니다. 이렇게 되면 [TodoList.vue] 에 있었던 todoItems 가 [App.vue] 에서 관리가 됩니다. todoItems 에는 로컬 스토리지에서 가져온 데이터가 들어갑니다. localStorage 에서 데이터 가져오기 // vue life cycle created() { console.log("created"); // 로컬..
→2022.02.24
🧶 𝗪𝗲𝗯/Firebase
[memo-app] Firebase 7.데이터 수정과 삭제
데이터 수정하기 선택한 메모 수정하기 if (selectedKey) { // key가 있다면 메모 update let memoRef = database.ref( "memos/" + userInfo.uid + "/" + selectedKey ); // 메모 내용 let memo = { txt: txt, updateDate: new Date().getTime(), }; // 메모 업데이트 memoRef.update(memo); } 만약 선택된 메모가 수정이 된다면 해당 내용을 데이터 베이스에 다시 저장합니다. 하지만 수정이 되었다고 화면에서 곧바로 변경되지 않습니다. 화면에 수정된 내용 갱신하기 // 메모 수정 function on_child_changed(data) { console.log(data.key..
→2022.02.24

• 이전
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 다음