todos 에 내용이 없을 때 화면에 []이 표시됐었는데, 마지막에 내용을 지워도 화면에 []이 표시되지 않네요?? 어떤 로직때문에 화면에 todos가 없어도 []가 표시되지 않는걸까요?

(사진)

오랜만에 다시 강의를 들어보려고 하는데 최근 Vue 업데이트가 많아서 최신버전에서도 문제 없이 작동할지 모르겠네요. Vue3 기반으로 작업해도 문제 없을까요?

안녕하세요. 강의 중에는 TodoInput.vue addTodo()를 ...mapMutation로 변경하는 내용이 없습니다. git 에도 $store.commit이 적용된 소스만 있고요.addTodo()는 helper로 대체할 수 없는 건가요? 감사합니다.

안녕하세요. 강사님의 명쾌한 강의 덕분에 vuex에 대한 이해도가 높아졌습니다.실무에서는 Todo app 보다 더 복잡한 컴포넌트를 다루기 때문에 vuex 헬퍼를 왠만한 컴포넌트에 다 import할텐데요. 이렇게요. import {mapGetters, mapMutation 등등} from "vuex";이럴 경우에 한 번만 import해서 전역적으로 사용할 수 있는 방법이 궁금합니다. 감사합니다. 

안녕하세요.예전에 수강하다가 다시 기본부터 재수강중입니다.강의노트는 따로없나요? 전에 수강시에는 강의 정리 노트가 있었던 것 같은데...없어진 건지 문의드립니다.

인프런 아이디 : 카카오톡(010-8570-0292)깃헙 : luna7698@gmail.com 좋은 강의 감사합니다.

리스트에서 실행하는 함수를 App으로 빼는 이유가 궁금합니다.그외에 이벤트 같은 경우 다른 자식 컴포넌트에 영향도가 있기때문에 App으로 이동시키는거는 이해가 되나, 토글 이벤트 같은 경우는 다른 자식 컴포넌트에 영향도가 없을것 같은데 App으로 이동하는 이유가 궁금합니다.해당 방식으로 컴포넌트를 설계하면 결합도가 높아 다른곳에서 사용이 불가능하거나 확장성이 낮지 않나요?

안녕하세요.vue cli (@vue/cli 5.0.8)로 프로젝트를 생성하니강의 구조와 다르게 /public/ 에 index.html이 생성되며,<script src="dist/build.js"> 도 없습니다.어떻게 main.js intex.html에 붙는 건지 궁금합니다. 감사합니다.

TodoList.vue에서 removeBtn으로 removeTodo함수를 호출하면서 부모창으로 emit을 요청했지만app.vue에서 콘솔로그를 출력해봤을때 해당 함수를 호출이 안되는데, 원인이 뭔지를 모르겠습니다.강의 내용대로 입력했는데, 해당 기능이 수행되지 않고 있습니다. localhost:8080 으로 접속했을 때 아래와 같은 오류가 뜹니다.app.vue소스에서 methods 영역에 아래와 같이 선언했는데 못찾는 이유가 무엇인가요?removeOneItem: function(todoItem){에러메시지 -main.js:4 [Vue warn]: Property "removeOneItem" was accessed during render but is not defined on instance. at <App>  TodoList.vue<template> <div> <ul> <li v-for="(todoItem , index) in propsdata" v-bind:key="todoItem.item" class="shadow"> <i class="checkBtn fa-solid fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i> <span v-blind:class="{textCompleted: todoItem.completed}">{{ todoItem.item }}</span> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fa-solid fa-trash"></i> </span> </li> </ul> </div> </template> <script> export default { props:['propsdata'], methods: { removeTodo : function(todoItem, index){ this.$emit('removeItem', todoItem, index); }, toggleComplete: function(todoItem, index){ console.log(todoItem.item + " " + index); todoItem.completed = !todoItem.completed; localStorage.removeItem(todoItem.item); localStorage.setItem(todoItem, JSON.stringify(todoItem)); } } } </script>app.vue<template> <div ip="app"> <TodoHeader></TodoHeader> <TodoInput v-on:addTodoItem="addOneItem"></TodoInput> <!-- <TodoInput v-on:하위 컴포넌트에서 발생시킨 이벤트 이름="현재 컴포넌트 매소드명"></TodoInput> --> <TodoList v-bind:propsdata="todoItems" v-on:removeItem="removeOneItem"></TodoList> <!-- <TodoList v-bind:propsdata="todoItems"></TodoList> --> <!-- <TodoList v-bind:내려보낼 프롭스 속성 이름="현재 위치의 컴포넌트 데이터 속성"></TodoList> --> <TodoFooter></TodoFooter> </div> </template> <script> import TodoHeader from './components/TodoHeader.vue' import TodoInput from './components/TodoInput.vue' import TodoList from './components/TodoList.vue' import TodoFooter from './components/TodoFooter.vue' export default { data: function(){ return { todoItems:[] } }, methods:{ addOneItem: function(todoItem){ console.log("addOneItem:[" + todoItem + "]"); var obj = { completed : false, item: todoItem }; // console.log(this.newTodoItem); //저장하는 로직 localStorage.setItem(todoItem,JSON.stringify(obj)); this.todoItems.push(obj); } }, removeOneItem: function(todoItem){ // console.log("removeOneItem app remove items:[" + index + "]:" + todoItem.item); console.log("removeOneItem app remove items:[:" + todoItem.item); localStorage.removeItem(todoItem.item); // this.todoItems.splice(index, 1); },

x-total-count가 undefined로 나옵니다 ㅠㅠ무슨 일일까요..   그리고..db.json - id값 문제,,uuid로 들어가는 거 같은데,,,또 id값이 스트링으로 또 들어가네요ㅠㅠ  ***혹시 몰라서 저렇게 x-total-count 추가해놓긴했는데페이징 번호 눌러도 첫번째 페이지말고는 데이터를 가져오질 않네요..깃허브에 올려놓으신 코드 봐도 x-total-count 헤더에 추가한 코드말고는 다른 게 없습니다. &버전차이일까요? node.js 일부러 낮은 버전 설치하면 json-server가 node랑 버전이 안맞는다고 안돌아가더라고요. 그래서 node 버전을 LTS최신버전으로 설치하긴했는데.. const getTodos = async (page = currentPage.value) => { currentPage.value = page; try { const res = await axios.get( `http://localhost:3000/todos?_page=${page}&_limit=${limit}` ); const total = await axios.get('http://localhost:3000/todos'); //전체 리스트 가져오기 const totalList = total.data.length; //가져온 전체리스트의 길이 res.headers.set("Access-Control-Expose-Headers", "x-total-count"); res.headers.set( "x-total-count", totalList ) //그냥..어거지로 만들어 줌.. console.log(res.headers["x-total-count"]) numberOfTodos.value = res.headers["x-total-count"]; console.log(res.data) todos.value = res.data; } catch (err) { console.log(err); error.value = 'Something went wrong!'; } } 

안녕하세요.실습을 위해서 Node 버전은 어떤 버전을 설치 해야 할까요 ?최신 버전을 받아서 설치하니 에러가 있어서, 답변바랍니다.

<template> <transition appear name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <!-- Modal Header --> <div class="modal-header"> <slot name="header"> default header </slot> </div> <!-- Modal Body --> <div class="modal-body"> <slot name="body"> default body </slot> </div> <!-- Modal footer --> <!-- <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')"> OK </button> </slot> </div> --> </div> </div> </div> </transition> </template> <style scoped> .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: table; transition: opacity 0.3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-container { width: 300px; margin: 0px auto; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); transition: all 0.3s ease; font-family: Helvetica, Arial, sans-serif; } .modal-header { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } .modal-enter-from { opacity: 0; } .modal-leave-active { opacity: 0; } .modal-enter-from .modal-container, .modal-leave-active .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); } </style>vue3인데 모달창 띄울 때 애니매이션 효과가 잘 작동하는데 왜 닫을 때는 작동을 안하는 지 잘 모르겠어요<AlertModal v-if="showModal" @close="showModal = false"> <!-- you can use custom content here to overwrite default content --> <template v-slot:header> <h3>경고! <span class="closeModalBtn" @click="showModal = false">x</span></h3> </template> <template v-slot:body> 아무것도 입력하지 않으셨습니다. </template> <!-- <template v-slot:footer> copy right </template> --> </AlertModal>참고로 vue3에서는 slot을 template 태그 안에 v-slot으로 적어야 한다해서 이렇게 작성했어요

- 인프런 아이디: sju02135@hanmail.net- 인프런 이메일: sju02135@hanmail.net- 깃허브 아이디: sju02135@hanmail.net- 깃허브 username: minsung1129

강의 화면에 보이는 개발툴 글자체, 크기, 색깔이어떻게 되나요?똑같이 세팅 하고 싶습니다^^ 

package.json "dependencies": { "vue": "^2.6.12" }, "devDependencies": { "vue-loader": "^15.0.2", "vue-template-compiler": "^2.6.12", "webpack": "^5.4.0", "webpack-cli": "^4.2.0" }오류 내용Failed to load 'D:\Vue\FirstProject\vue-project\숫자 야구\webpack.config.js' config[webpack-cli] Error: Cannot find module 'webpack/lib/RuleSet'Require stack:- D:\Vue\FirstProject\vue-project\숫자 야구\node_modules\vue-loader\lib\plugin.js- D:\Vue\FirstProject\vue-project\숫자 야구\webpack.config.js- D:\Vue\FirstProject\vue-project\숫자 야구\node_modules\webpack-cli\lib\webpack-cli.js- D:\Vue\FirstProject\vue-project\숫자 야구\node_modules\webpack-cli\lib\bootstrap.js- D:\Vue\FirstProject\vue-project\숫자 야구\node_modules\webpack-cli\bin\cli.js- D:\Vue\FirstProject\vue-project\숫자 야구\node_modules\webpack\bin\webpack.js at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15) at Module._load (node:internal/modules/cjs/loader:985:27) at Module.require (node:internal/modules/cjs/loader:1235:19) at require (node:internal/modules/helpers:176:18) at Object.<anonymous> (D:\Vue\FirstProject\vue-project\숫자 야구\node_modules\vue-loader\lib\plugin.js:4:17) at Module._compile (node:internal/modules/cjs/loader:1376:14) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Module.load (node:internal/modules/cjs/loader:1207:32) at Module._load (node:internal/modules/cjs/loader:1023:12) at Module.require (node:internal/modules/cjs/loader:1235:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'D:\\Vue\\FirstProject\\vue-project\\숫자 야구\\node_modules\\vue-loader\\lib\\plugin.js', 'D:\\Vue\\FirstProject\\vue-project\\숫자 야구\\webpack.config.js', 'D:\\Vue\\FirstProject\\vue-project\\숫자 야구\\node_modules\\webpack-cli\\lib\\webpack-cli.js', 'D:\\Vue\\FirstProject\\vue-project\\숫자 야구\\node_modules\\webpack-cli\\lib\\bootstrap.js', 'D:\\Vue\\FirstProject\\vue-project\\숫자 야구\\node_modules\\webpack-cli\\bin\\cli.js', 'D:\\Vue\\FirstProject\\vue-project\\숫자 야구\\node_modules\\webpack\\bin\\webpack.js' ]} 계속 오류난거 해결하다가 여기까지 왔는데 여기선 해결이 안되네요ㅠㅠ

최초 한번만 실행되는 메소드처럼 보이는데... 맞습니까?

현재 강의 기점으로 authorized에러가 난 적이 없었습니다. 그리고 강의 코드와 현재 똑같습니다. 그런데 Swagger UI에서 예시 게시글 1개를 작성하려하면 다음과 같이 에러 메시지가 뜹니다.. ㅠㅠ 제 console 창에 Authorized 문제가 발생했다고 서버에서 401이라고 하는데.. 혹시 어떻게 해야할까요? 

인프런 아이디: tastybusango@gmail.com인프런 이메일: tastybusango@gmail.com깃허브 아이디: sonyeonghwa@gmail.com깃허브 username: sonyeonghwa

안녕하세요~현재 4-10까지 수강 완료 했습니다~프론트에서 새로고침시 로그인이 풀리는 부분에 대한처리를 뒤 수업에서 다루는지,필요하다면 스스로 해봐야하는건지,궁금합니다~답변 주시면 감사하겠습니다~