깃허브 권한이 별도 없다고해주셨는데, 아래와같이 vue-todo 접근이 불가해서 확인부탁드리려합니다.

위의 화면캡처와 같이 알려주신대로 코딩하였으나 아래 화면캡처와 같이 브라우저에서 정상적으로 표시되지 않습니다. 

vue-til-server 때문에 node 버전 10 버전대로 하면 vue cli 가 설치가안됩니다. 그래서 노드 버전을 올려서 vue cli 설치하고 나면 맨위 서버가 스타트가 안됩니다. 이 문제를 도대체 어떻게 해야하나요. 진도를 못나가서 답답하네요.

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는 새로고침 해야지 체크표가 회색으로 변합니다.어디가 문제인지 모르겠습니다

Todo-Header.vue 파일에 코딩된 내용은 아래와 같습니다.<template> <header> <!-- <h1>TODO it!</h1>--> <h1>{{ this.$store.state.headerText }}</h1> </header> </template>위 코드를 실행했을때 store 못 찾는 다고 나오는데 이유를 모르겠네요 ㅠ.ㅠ[Vue warn]: Property or method "store" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.found in---> <TodoHeader> at src/components/TodoHeader.vue<App> at src/App.vue<Root>

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으로 하면 에러가 해결됩니다.그 후에도 에러가 난다면본인이 화이트리스트에 설정을 제대로 했는지 확인하시면 해결 될거에요!

실무에서 쓸일이 있어서 복습하다보니 Vue 버전이 바뀌어서 강의 내용보면서 Vue3 에 맞게 적용중인데요. 우선 아래 레퍼런스 참고하시면 될 듯 합니다. 강의내용과는 크게 다른건 없긴합니다.https://vuejs.org/guide/built-ins/transition.html#the-transition-componenthttps://vuejs.org/examples/#list-transitionTodoList.vue<template> <div> <!-- name 은 하단의 css 클래스 transition class 와 연관--> <TransitionGroup tag="ul" name="list" class="container"> <li v-bind:key="todoItem.item" v-for="(todoItem, index) in propsdata" class="shadow"> <i class="checkBtn fa-solid fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i> <span v-bind:class="{textCompleted : todoItem.completed}" >{{ todoItem.item }} </span> <!--{{ index }}--> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fa-solid fa-trash"></i> </span> </li> </TransitionGroup> </div> </template> <style> /* 기존 css 는 생략, 아래 레퍼런스 css 참고 https://vuejs.org/examples/#list-transition */ /* 리스트 아이템 트랜지션 효과 */ /* 1. declare transition */ .list-move, .list-enter-active, .list-leave-active { transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); } /* 2. declare enter from and leave to state */ .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(30px); } /* 3. ensure leaving items are taken out of layout flow so that moving animations can be calculated correctly. */ .list-leave-active { position: absolute; transition: all 1s; } </style>

<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

어제 강의 신청해서 동영상 강좌 듣기시작했는데오늘 회사에 와서 개발중인 프로젝트 vue버전을 확인해보니 2.6이네요~ ㅜㅜvue2랑 vue3 이랑 많이 차이가 날까요?? 

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

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

eslint, prettier 설정하고 컨솔에서 아래와 같은 오류가 계속나네요.. 강의에서는 에디터에서 나는 걸로 설명하셨는데요.. 컨솔에서 계속 에러가 나네요.. node module 폴더 삭제도 해보고 setting.json 파일 수정해도 동일합니다.확인 부탁드려요. 

폰트 어썸 사이트가 버전업이 됐는지 밑에 있는 질문들에서 대응하기 힘들어서 제가 한 방식 적어볼게요. 혹시나 막히는 분들은 도움이 되면 좋겠습니다. 2022-9-15기준 홈페이지 화면에서 kits선택로그인 하면 해당 화면이 보이는데 이름 클릭script 태그를 index.html 에 link대신 추가했습니다.강의에 적힌 디자인이 없는지 대응이 안되길래 plus로 검색해서 비슷한 디자인 넣었습니다 

인프런 아이디 : 인프런 이메일 : 깃헙 아이디 : 깃헙 Username:

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

인프런 아이디 : dtg3431@gmail.com인프런 이메일 : dtg3431@gmail.com깃헙 아이디 : dtg3431@gmail.com깃헙 Username: jaehong2