res.data는 객체이기 때문에 todo.value = res.data 와origivalTodo.value = res.data 는다른 메모리 주소에 할당되는 것이 아닌가요?

<template> <div> <ul> <li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem.item" class="shadow"> <span v-on:click="toggleComplete(todoItem, index)"> <i class="checkBtn fas fa-check" v-bind:class="{ checkBtnCompleted: todoItem.completed }"></i> </span> <span v-bind:class="{ textCompleted: todoItem.completed }">{{ todoItem.item }}</span> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fas fa-trash-alt"></i> </span> </li> </ul> </div> </template>i 태그를 span 안에 넣은 이유는 클릭해도 아무 반응이 없어서 span 안에 넣었습니다.completed 관련한 v-bind는 새로고침 안해도 바로 반영되는데 checkBtnCompleted 관련한 v-bind는 새로고침 해야지 체크표가 회색으로 변합니다.어디가 문제인지 모르겠습니다

computed 와 검색 기능 추가 영상 보면서 힘든 부분이 있어 작성해 보았습니다.- filteredTods = computed() => {~~~}searchText 를 변경했다고, 해당 computed가 작동하는 이유를 알고 싶습니다.- todos Add 하는 작업에서는 어째서,filteredTods = computed() => {~~~} 가 작동하지 않는 이유도 알고 싶습니다.- 결국 filteredTods = computed()에 정확한 이벤트 타이밍을 알고 싶습니다.[내가 원치 않는 곳에서 작동하면 안되니까]

메일 알람 안오게 할려면 어떻게 해야 하나요? repositories에서는 이미 삭제해서 unsubscribe를 할수가 없는 상태입니다 답변 부탁 드리겠습니다

Clusters의 Database Access를 클릭해서 Database Access 의 user 중 edit 버튼을 클릭한 후Database User Privileges의 Built-in Role 을 Atlas admin으로 하면 에러가 해결됩니다.그 후에도 에러가 난다면본인이 화이트리스트에 설정을 제대로 했는지 확인하시면 해결 될거에요!

<template> <div class="inputBox shadow"> <input type="text" v-model="newTodoItem"> <span class="addContainer" @click="addTodo"> <i class="fa-solid fa-plus addBtn"></i> </span> </div> </template> <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, #8763F8); display: block; width: 3rem; border-radius: 0 5px 5px 0; } .addBtn { color: white; vertical-align: middle; } </style>위처럼 아예 input창 크기도 안맞춰지고 span 태그도 사라져있더라구요..왜 이상하게 나왔는지를 몰라서 임시로 아래처럼 바꿨는데 요즘은 flex를 현업에 안쓴다고 들었는데 그게 맞을까요 ??아직 git 허가를 못받아서 ..😭input:focus { outline: none; } .inputBox { display: flex; align-items: center; background: white; height: 50px; line-height: 50px; border-radius: 5px; } .inputBox input { height: 100%; width: calc(100% - 3rem); border-style: none; font-size: 0.9rem; } .addContainer { background: linear-gradient(to right, #6478FB, #8763F8); display: block; height: 100%; width: 3rem; border-radius: 0 5px 5px 0; } .addBtn { color: white; vertical-align: middle; }

aaa

github권한부여 부탁드립니다.인프런 아이디 : woojoo216인프런 이메일 : woojoo216@naver.com깃헙 아이디 : woojoo216@naver.com깃헙 Username : woojoo216

인프런 아이디 : jeongwon.been@gmail.com인프런 이메일 : jeongwon.been@gmail.com깃헙 아이디 : jeongwon.been@gmail.com깃헙 Username : jbeen0606

1. 다시 루트에 모든 컴포넌트를 합칠시vuex를 사용할때 컴퓨티드에 tableData를 사용하다보니 각 td각 다 다시 계산되서 그냥 하나의 컴포넌트로 작업하시는 걸 보여주셨는뎅 그러면 다시 처음으로 돌아가서 store를 안써도 되지 않을까 생각이 들어서용store를 쓰는 이유는 자식컴포넌트로 분리시켰을때 props로 부모에게 정보를 받는게 불편해져서 하는거라고 생각하는데, 부모자식없이 하나의 컴포넌트로 돌아가면 store를 쓰지 않아도 될거같아서 문의드려요~2. 루트에 모든 컴포넌트를 합치지 않을시, 예제에서 vue-devtools에서 하나의 셀만 변경해도 한번에 9개셀이 모두 계산되더라도 가상돔에서 실제데이터 변경여부를 체크해서 실제 렌더로 이어지지는 않는다고 하셨는데 그냥 저렇게 계산되어도 가상돔 계산방식을 믿고 그냥 store를 쓰면 되는건가요? 실제데이터변경여부를 체크하는 데이터가 object일 경우에도 그냥 믿고 쓰면되는지 궁금해서 문의드려용~

안녕하세요. 현재 강의보고하다가 요즘은 책을 보고 공부중인데 app.vue안에 있는 nav를 따로 분리 하고 싶은데 방법이 있을까요?   이유는 특정 서브페이지에서는 nav가 안보여야하는데 그 특정 서브페이지에서도 nav가 보여서요 ㅠ css로 처리했더니 다시 돌아가면 그페이지들도 nav가 사라지더라구요 ㅠㅠ 혹시 방법이 잇을까요?

강의내용과 똑같이 작성하고 실행해 보았고 혹시나 해서 깃헙에서 코드 가져와 실행했음에도 모달이 부드럽게 사라지는 것은 되지만 부드럽게 나타나는 것은 잘 되지 않았습니다. 혹시 어떻게 해결 할 수 있을까요?

index.html에 설정하는 Font Awesome 태그는 기존버전태그(5.x) 대신 (<link.... ) 제가 강의를 듣고 있는 시점기준(8월 2일) 현재버전태그(6.1.2) 로 사용하시면 될 듯 싶습니다. (저는 요걸로 해결했습니다.)   <script defer src="https://use.fontawesome.com/releases/v6.1.2/js/all.js" integrity="sha384-11X1bEJVFeFtn94r1jlvSC7tlJkV2VJctorjswdLzqOJ6ZvYBSZQkaQVXG0R4Flt" crossorigin="anonymous"></script>   <TodoInput.vue> plus icon 태그: <i class="fa-solid fa-plus addBtn"></i>   6버전 CDN에 대한 내용은 아래 공식사이트 주소 들어가서 보시면 됩니다~ https://fontawesome.com/v6/docs/web/use-with/wordpress/install-manually

안녕하세요 강의 잘 듣고있습니다. 저장소 체크아웃 이후에 설정까지 수업대로 한후에 npm t를 입력하니 아래와 같은 오류가 나는데 혹시 어떤게 문제가 있는지 봐주실수 있으신가요?

강의 초반부에 말씀하신 웹서비스는 동시성을 보장에 대해 헷갈려서 질문 드립니다. 제가 이해 하기로는 여러사람이 하나의 ID에 대해 수정을 할때, 중간에 수정된 최근정보를 제공하는것이 좋기때문에, 페이지 진입시 Id값을 이용해 최신 정보를 불러와야한다.라는 뜻으로 이해하는것이 맞을까요? 그리고 그 최신데이터 보장은 페이지의 성격에 따라 협의를 봐야한다?라고 이해하면 되는것일까요?   그리고 지금 강의 들으면서 드는 질문인데, 강의 초반부에 페이지 컴포넌트는 드라이하게 작성하는것이 좋다고 말씀하시면서 비즈니스 로직(form submit등)이 없이 작성하고 비즈니스 로직은 components안에서 작성하는것이 좋다고 하셨는데, 이번에 view폴더에있는 MainPage.vue에는 비즈니스로직을 작성을 하신 이유가 있을까요?

`` <-- 요거 안에서 자동완성 기능이 안되는데, 비주얼스튜디오 코드에서 작업중입니다. ``<-- 요것들 안에 있는내용은 스트링으로 됩니다. 방법이 있을까요?

강의를 보면서 따라서 타이핑하고 있는데, i 태그에서 이벤트랑 클래스 바인딩이 안됩니다. 아래에 span태그에서는 적용되는데, 이유가 뭔지 알 수 있을까요?  <template> <div> <ul> <li v-for="(todoItem, index) in todoItems" v-bind:key="index" class="shadow"> <span v-on:click="toggleComplete(todoItem, index)"> <i class="checkBtn fas fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}"></i> </span> <span v-bind:class="{textCompleted: todoItem.completed}">{{todoItem.item}}</span> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fas fa-trash-alt"></i> </span> </li> </ul> </div> </template> <script> export default { data: function() { return { todoItems: [], } }, methods: { removeTodo: function(todoItem, index) { console.log('ffff'); localStorage.removeItem(todoItem); this.todoItems.splice(index, 1); }, toggleComplete: function(todoItem) { todoItem.completed = !todoItem.completed; } }, created: function() { if(localStorage.length > 0) { for (var i = 0; i < localStorage.length; i++) { this.todoItems.push(JSON.parse(localStorage.getItem(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; align-self: center; } .checkBtnCompleted { color: #b3adad; } .textCompleted { text-decoration: line-through; color: #b3adad; } </style>

안녕하세요 강사님!아래 댓글에 코멘트 남겨주신 강사님 댓글 중에서, bcrypt 로 진행하면 된다고 하시길래 npm 공식 사이트를 들어가 봤더니, 비슷한 이름의 라이브러리가 "2개" 있다는 것을 확인했습니다. bcrypt github wiki에서 kelektiv 제작자님 코멘트를 보면bcrypt 가 더 성능상 우수하지만, 브라우저에서 동작하지 않기 때문에 웹 브라우저 환경에서는 bcryptjs 를 사용하라고 하는데, 여기서 질문있습니다.1. 어떤 라이브러리로 설치하나요?(순간, swagger 문서를 웹 브라우저를 통해 확인하는 것이니 bcryptjs 가 아닌가 했었는데, 정확히 어떤게 맞나요?)

파비폰 아이콘을 index.html과 같은 경로인 public폴더에 넣고 태그 경로를 ./favicon.ico로 설정하면 잘 적용이 되는데   강의에서처럼 src/assets/경로에 넣고   (index.html이 public폴더에 있으므로 이에 접근하기위해) ../src/assets/favicon.ico로 설정하면 왜 정상적으로 적용이 되지 않을까요?   그리고 npm돌릴때 local로 들어갈때는 파비콘이 안뜨고 network로 들어갈땐 파비콘이 뜨는 이유도 알려주세요  

안녕하세요 코지코더님 ! 유튜브 부터 시작해서 코지코더님의 Vue 강의를 완강한지 어언 3달째 입니다. 다름이 아니라 오랜만에 소스코드를 확인해보고 싶어서 실행해 보았더니 분명 처음 완강했을 당시에는 잘 동작했는데 오랜만에 돌려보니까 사이트는 잘 접속 되는데 데이터는 연결되지 않고 오류가 발생하여 몇 시간 가까이 구글링을 해보았지만 소득이 없어 결국 여기까지 돌아오게 되었네요   Failed to load resource: net::ERR_CONNECTION_REFUSED -> npm run serve 입력 후 사이트가 실행되고 몇 초 후 발생하는 에러 POST net::ERR_CONNECTION_REFUSED -> Create Todo를 이용하여 Todo를 생성했을때 뜨는 에러 GET net::ERR_CONNECTION_REFUSED -> Todo 생성 실패 후 To-Do List로 넘어온 후 실행되는 에러   혹시 어떤 문제인지 또 어떤 방법을 사용하여야 오류를 고칠 수 있을지 싶어서 질문 남깁니다 !