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

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

asset app.js 325 KiB [compared for emit] (name: app)runtime modules 1.13 KiB 5 modulescacheable modules 303 KiB  ./main.js 138 bytes [built] [code generated]  ./NumberBaseball.vue 39 bytes [built] [code generated] [1 error]  ./node_modules/vue/dist/vue.runtime.esm.js 303 KiB [built] [code generated] ERROR in ./NumberBaseball.vueModule build failed (from ./node_modules/vue-loader/dist/index.js):TypeError: Cannot read properties of undefined (reading 'styles')    at Object.loader (C:\Users\samsung\OneDrive\바탕 화면\CODE\vue-webgame\3.숫자야구\node_modules\vue-loader\dist\index.js:70:34) @ ./main.js 2:0-50 4:8-22 webpack 5.74.0 compiled with 1 error in 506 ms         --------------------------------------------NumberBaseball.vue 코드 //Vue 컴포넌트<template> <div> <h1>{{ result }}</h1> <form v-on:submit="onSubmitForm"> <input type="text" ref="answer" maxlength="4" v-model="value"> <button>입력</button> </form> </div></template><script> export default { data() { return { value: '', result: '', }; }, methods: { onSubmitForm(e) { e.preventDefault(); }, }, };</script><style></style>웹팹 로더에 실패해서.. 다음 단계로 못 넘어가고 있습니다.혹시 버전의 차이가 있을까 구글링 열심히 해봤지만 결국 에러 한 개는 해결하지 못했어요.

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

npm install -g @vue/cli를 붙이면 아래처럼 많은 것이 뜨는데 왜 이럴까요ㅜㅜ??

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에는 비즈니스로직을 작성을 하신 이유가 있을까요?

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

인프런 아이디: tsseo.dev@gmail.com 인프런 이메일: tsseo.dev@gmail.com 깃헙 아이디: tsseo.dev@gmail.com 깃헙 username: 3rd-big

강의를 보면서 따라서 타이핑하고 있는데, 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>

npm run build 한 후 localhost에서 어떻게 확인하나요...?