24강 검색기능 추가의 filteredTodos에서const filteredTodos = computed(() => { if (searchText.value) { return todos.value.filter(todo => { return todo.subject.includes(searchText.value); }); } return todos.value; });제가 알기로 computed는 반응형 종속성 변수가 변경될때마다 실행되는것으로 이해했습니다.그러면 여기서 반응형 종속성 변수는 todos와 searchText인데return에서 todos의 value가 변경되므로, computed가 총 두번실행되는 것인가요?1.searchText 변경을감지하고 computed 실행2.return 에서 todos.value를 변경3.todos의 변경을 감지하고 computed 재실행4.searchText와 todos모두 변경되지 않아 computed종료

TodoList.vue코드<template><div><ul><!-- <li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem.item" class="shadow">{{todoItem}}<i class="checkBtn fa-solid fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i>v-bind:class="{A:a}" A클래스의 a속성이 false면 안나타남, true면 나타남 --><!-- <span v-bind:class="{textCompleted: todoItem.completed}">{{ todoItem.item }}</span><span class="removeBtn" v-on:click="removeTodo(todoItem, index)"><i class="fa-solid fa-trash-can"></i></span></li>> --><li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem" class="shadow"><i class="checkBtn fa-solid fa-check" v-bind:class="{ checkBtnCompleted: todoItem.completed }" v-on:click="toggleComplete(todoItem, index)"></i>{{ todoItem.item }} {{ index }}<!-- //v-bind:class="{A:a}" A클래스의 a속성이 false면 안나타남, true면 나타남 --><span v-bind:class="{ textCompleted: todoItem.completed }">{{ todoItem}}</span><span class="removeBtn" v-on:click="removeTodo"><i class="fa-solid fa-trash-can"></i></span></li></ul></div></template> <script>export default {data: function () {return {todoItems: []}},methods: {removeTodo: function (todoItem, index) {console.log('remove items');console.log(todoItem, index);localStorage.removeItem(todoItem);this.todoItems.splice(index, 1);},toggleComplete: function (todoItem, index) {todoItem.completed = !todoItem.completed;console.log(index);console.log(todoItem.item);//로컬스토리지 갱신localStorage.removeItem(todoItem.item);localStorage.setItem(todoItem.item, JSON.stringify(todoItem));}},created: function () {if (localStorage.length > 0) {for (var i = 0; i < localStorage.length; i++) {if (localStorage.key(i) !== 'loglevel:webpack-dev-server') {console.log(JSON.parse(localStorage.getItem(localStorage.key(i))));this.todoItems.push(localStorage.key(i));}}}}}</script> <style scoped>ul {list-style-type: none;padding-left: 0px;margin-top: 0;text-align: left;}li {display: flex;min-height: 50px;height: 50px;line-height: 50px;margin: 0.5rem 0;padding: 0 0.9rem;background: white;border-radius: 5px;}.removeBtn {margin-left: auto;color: #de4343;}.checkBtn {line-height: 45px;color: #62acde;margin-right: 5px;}.checkBtnCompleted {color: #b3adad;}.textCompleted {text-decoration: line-through;color: #b3adad;}</style> TodoInput.vue코드<template> <div class="inputBox shadow"> <input type= "text" v-model="todoItems" v-on:keyup.enter="addTodo"> <span class="addContainer" v-on:click="addTodo"> <i class="fas fa-plus addBBtn"></i> </span> </div> </template> <script> export default { data: function(){ return{ todoItems: "" } }, methods:{ addTodo: function(){ if(this.todoItems !== ''){ //저장하는 로직 //localStorage.setItem(key, value); //localStorage.setItem(this.newTodoItem, this.newTodoItem); var obj = {completed: false, item: this.todoItems}; //localStorage.setItem(this.newTodoItem,obj); localStorage.setItem(this.todoItems, JSON.stringify(obj)); //obj 객체 > string화 this.clearInput(); } }, clearInput: function(){ this.todoItems = ''; } } } </script> <style scoped> input:focus{ outline: none; } .inputBox { background: white; height: 50px; line-height: 50px; border-radius: 5px; } .inputBox input { border-style: none; font-size: 0.9rem; } .addContainer { float: right; background: linear-gradient(to right, #6478FB, #8763FB); display: block; width: 3rem; border-radius: 0 5px 5px 0; } .addBtn { color: white; vertical-align: middle; } </style>

예전 강의라 그런지 구조도 다르고 레퍼런스도 달라서 따라가기가 어렵습니다..강의에서는 package.json에 scripts도 vue-cli 기반으로 돼있는데 전 이렇게 되어있고. 강의와 똑같이 해서 npm run serve해도 이런 오류만 나옵니다 .이 강의는 이미 만들어진 소스에서 추가하는 식인가요? 섹션0까지만 들어서 그런지 처음 만들때와 구조가 달라서 불친절하다는 생각이 드네요,,

제로초님 강의를 보면서 현재 Vue.js 3를 가지고 학습 중에 있습니다.강의 내용을 보면서 저는 실시간으로 화면에 대한 변화가 일어나고 있길래 Vue.js 3에서 Vue.set과 this.$set을 확인한 결과 Vue.js 3 에서는 제거가 되었다고 알게 되었습니다.혹시 제로초님의 강의를 Vue.js 3로 들으시는 분들은 도움 되실 수 있지 않을까 해서 남깁니당

인프런 아이디 : @tkfkdgoll인프런 이메일 : ttkfkdgolll@naver.com깃헙 아이디 : ttkfkdgolll@naver.com깃헙 Username : ryuwonhui

- 인프런 아이디: secondwarren@gmail.com- 인프런 이메일: secondwarren@gmail.com- 깃허브 아이디: secondwarren@gmail.com- 깃허브 username: weritas247

현재 게시글이 2개가 있고 게시글 '안녕핫요' 를 삭제하려고 합니다.근데 click으로 deleteItem 함수를 호출하는데 매개변수에 id값이 없잖아요??근데 '안녕핫요'게시글의 휴지통버튼을 누른뒤 this.postitem을 하면 '안녕핫요'의 객체정보만 콘솔화면에 찍히는데. 이를 어떻게 판단했는지가 궁금합니다.(props로 내려받은 객체 2개가 찍혀야 하는게 아닌가요?)mainPage에서 반복문을 통해 자식컴포넌트에 props로 정보를 내려준건 알겠는데요, 어떻게 deleteitem의 매개변수에 정보가 없는데도, 제가 무엇을 삭제하려고 했는지 알고 객체 정보를 가져오는 것일까요?this.postItem을 하면 props로 내려받은 postitem 2개를 가져와야하는거 아닐까요?this.postItem

vue개발자도구로 넘어가는 순간 콜솔에 이 에러가 나고 개발자도구에서 선생님과 다르게 나타나는데 콘솔에러때문일까요? 선생님 git으로 checkout해서 코드 똑같이 해도 이런 문제가 발생하네요.

깃헙 요청합니다인프런 아이디 : gogyuja@gmail.com인프런 이메일 : gogyuja@gmiail.com 깃헙 아이디 : gogyuja@gmail.com깃헙 Username : good-game-yo 

인프런 아이디 : dongju.shin@wezon.com 인프런 이메일 : dongju.shin@wezon.com 깃헙 아이디 : ehdwn0528@gmail.com 깃헙 Username : dongju.shin

안녕하세요.router로 페이지 이동 시 값을 전달하는 방식이 query 와 params가 있는걸로 알고있는데요,query로 보내면 새로고침해도 값이 남아있지만 url에 파라미터가 보이고params로 보내면 url에 파라미터가 안보이지만 새로고침하면 값이 날라가는데요페이지를 이동할때 url에도 값이 안보이고 새로고침해도 값이 날라가지 않게 파라미터를 넘기려면 어떤 방식으로 값을 넘겨야 하나요??

인프런 아이디 : ksr92923@naver.com인프런 이메일 : ksr92923@naver.com깃헙 아이디 : complete9261깃헙 Username : complete9261

인프런 아이디 : wish3111@naver.com인프런 이메일 : wish3111@naver.com깃헙 아이디 : wish31깃헙 아이디 : wish31

59강 TodoForm onSave 함수에서 API를 호출할 때, data 객체를 생성하지 않고 API 바디에 곧바로 todo.value를 넣으면 안될까요?

인프런 아이디 : suzin.jang@samsung.com인프런 이메일 : suzin.jang@samsung.com깃헙 아이디 : susan3722@snu.ac.kr깃헙 Username : suziinee

.

인프런 아이디 : minsun.yun@samsung.com인프런 이메일 : minsun.yun@samsung.com깃헙 아이디 : miinsun깃헙 Username : miinsun

인프런 아이디 : mwkang@ecstel.co.kr인프런 이메일 : mwkang@ecstel.co.kr깃헙 아이디 : mwkang@ecstel.co.kr깃헙 Username : goo1949

저같은 경우는 애초에 eslint나 prittier를 사용하고 싶지 않아서 설정을 중단하고 싶은데 어떻게 방법이 없을까요 ?5분짜리 강의를 멈추고 수정하는대만 10분을 쓰고 있습니다

인프런 아이디 : illb인프런 이메일 : illb@illb.co.kr깃헙 아이디 : goodmanrabbit@gmail.com깃헙 Username : kangguchul