묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결프로젝트로 배우는 Vue.js 3
52강의 originalTpdp ref 와 todo ref
res.data는 객체이기 때문에 todo.value = res.data 와origivalTodo.value = res.data 는다른 메모리 주소에 할당되는 것이 아닌가요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
아이콘의 경우 새로 고침해야지 checkBtnCompleted가 적용됩니다
<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는 새로고침 해야지 체크표가 회색으로 변합니다.어디가 문제인지 모르겠습니다
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
왜 발생하는 걸까요??Property or method "store" is not defined on the instance but referenced during render.
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>
-
미해결프로젝트로 배우는 Vue.js 3
computed 와 검색 기능 추가 질문드려요.
computed 와 검색 기능 추가 영상 보면서 힘든 부분이 있어 작성해 보았습니다.- filteredTods = computed() => {~~~}searchText 를 변경했다고, 해당 computed가 작동하는 이유를 알고 싶습니다.- todos Add 하는 작업에서는 어째서,filteredTods = computed() => {~~~} 가 작동하지 않는 이유도 알고 싶습니다.- 결국 filteredTods = computed()에 정확한 이벤트 타이밍을 알고 싶습니다.[내가 원치 않는 곳에서 작동하면 안되니까]
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
메일 알람 설정 문의
메일 알람 안오게 할려면 어떻게 해야 하나요? repositories에서는 이미 삭제해서 unsubscribe를 할수가 없는 상태입니다 답변 부탁 드리겠습니다
-
해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
/signup 아이디 새로 만들어도 409 error 뜨시는 분들
Clusters의 Database Access를 클릭해서 Database Access 의 user 중 edit 버튼을 클릭한 후Database User Privileges의 Built-in Role 을 Atlas admin으로 하면 에러가 해결됩니다.그 후에도 에러가 난다면본인이 화이트리스트에 설정을 제대로 했는지 확인하시면 해결 될거에요!
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
저는 스타일이 이상하게 적용되네요 ㅠ
<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; }
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
권한요청드립니다.
aaa
-
미해결프로젝트로 배우는 Vue.js 3
문의드려요~
어제 강의 신청해서 동영상 강좌 듣기시작했는데오늘 회사에 와서 개발중인 프로젝트 vue버전을 확인해보니 2.6이네요~ ㅜㅜvue2랑 vue3 이랑 많이 차이가 날까요??
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
github권한부여 부탁드립니다.
github권한부여 부탁드립니다.인프런 아이디 : woojoo216인프런 이메일 : woojoo216@naver.com깃헙 아이디 : woojoo216@naver.com깃헙 Username : woojoo216
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한 요청 드립니다.
인프런 아이디 : jeongwon.been@gmail.com인프런 이메일 : jeongwon.been@gmail.com깃헙 아이디 : jeongwon.been@gmail.com깃헙 Username : jbeen0606
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
폰트 어썸 사이트 - Kit's Code로 넣기
폰트 어썸 사이트가 버전업이 됐는지 밑에 있는 질문들에서 대응하기 힘들어서 제가 한 방식 적어볼게요. 혹시나 막히는 분들은 도움이 되면 좋겠습니다. 2022-9-15기준 홈페이지 화면에서 kits선택로그인 하면 해당 화면이 보이는데 이름 클릭script 태그를 index.html 에 link대신 추가했습니다.강의에 적힌 디자인이 없는지 대응이 안되길래 plus로 검색해서 비슷한 디자인 넣었습니다
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
권한요청드립니다.
인프런 아이디 : 인프런 이메일 : 깃헙 아이디 : 깃헙 Username:
-
미해결웹 게임을 만들며 배우는 Vue
vuex관련질문이용
1. 다시 루트에 모든 컴포넌트를 합칠시vuex를 사용할때 컴퓨티드에 tableData를 사용하다보니 각 td각 다 다시 계산되서 그냥 하나의 컴포넌트로 작업하시는 걸 보여주셨는뎅 그러면 다시 처음으로 돌아가서 store를 안써도 되지 않을까 생각이 들어서용store를 쓰는 이유는 자식컴포넌트로 분리시켰을때 props로 부모에게 정보를 받는게 불편해져서 하는거라고 생각하는데, 부모자식없이 하나의 컴포넌트로 돌아가면 store를 쓰지 않아도 될거같아서 문의드려요~2. 루트에 모든 컴포넌트를 합치지 않을시, 예제에서 vue-devtools에서 하나의 셀만 변경해도 한번에 9개셀이 모두 계산되더라도 가상돔에서 실제데이터 변경여부를 체크해서 실제 렌더로 이어지지는 않는다고 하셨는데 그냥 저렇게 계산되어도 가상돔 계산방식을 믿고 그냥 store를 쓰면 되는건가요? 실제데이터변경여부를 체크하는 데이터가 object일 경우에도 그냥 믿고 쓰면되는지 궁금해서 문의드려용~
-
해결됨웹 게임을 만들며 배우는 Vue
app.vue안에 있는 nav를 따로 분리하고 싶은데 잘안됩니다..
안녕하세요. 현재 강의보고하다가 요즘은 책을 보고 공부중인데 app.vue안에 있는 nav를 따로 분리 하고 싶은데 방법이 있을까요? 이유는 특정 서브페이지에서는 nav가 안보여야하는데 그 특정 서브페이지에서도 nav가 보여서요 ㅠ css로 처리했더니 다시 돌아가면 그페이지들도 nav가 사라지더라구요 ㅠㅠ 혹시 방법이 잇을까요?
-
미해결웹 게임을 만들며 배우는 Vue
3-3 웹팹 로더 사용하기
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>웹팹 로더에 실패해서.. 다음 단계로 못 넘어가고 있습니다.혹시 버전의 차이가 있을까 구글링 열심히 해봤지만 결국 에러 한 개는 해결하지 못했어요.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
모달이 부드럽게 뜨지 않습니다.
강의내용과 똑같이 작성하고 실행해 보았고 혹시나 해서 깃헙에서 코드 가져와 실행했음에도 모달이 부드럽게 사라지는 것은 되지만 부드럽게 나타나는 것은 잘 되지 않았습니다. 혹시 어떻게 해결 할 수 있을까요?
-
미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
vue cli 문제
npm install -g @vue/cli를 붙이면 아래처럼 많은 것이 뜨는데 왜 이럴까요ㅜㅜ??
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
+ 아이콘 안보이실때2
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
-
해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
명령어 실행 오류 질문 드립니다.,
안녕하세요 강의 잘 듣고있습니다. 저장소 체크아웃 이후에 설정까지 수업대로 한후에 npm t를 입력하니 아래와 같은 오류가 나는데 혹시 어떤게 문제가 있는지 봐주실수 있으신가요?