묻고 답해요
132만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한 요청 드립니다.
깃허브에 코멘트를 남기긴 했는데 여기 게시판에도 남깁니다.인프런 아이디 : @sangho235인프런 이메일 : isking235d@gmail.com깃헙 아이디 : isking235@hanmail.net깃헙 Username : sangho || isking235 감사합니다.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한 요청 드립니다.
인프런 아이디 : zzyoungjin@naver.com인프런 이메일 : zzyoungjin@naver.com깃헙 아이디: zzyoungjin@naver.com깃헙 Username : youngjin-yu
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한 요청드립니다
인프런 아이디 : huandag4545@naver.com인프런 이메일 : huandag4545@naver.com깃헙 아이디: huandag4545@daum.net깃헙 Username : 전현덕
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한 요청드립니다.
인프런 아이디 : 1996pp@naver.com인프런 이메일 : 1996pp@naver.com깃헙 아이디: zvvz33@daum.net깃헙 Username : zvvz33
-
미해결프로젝트로 배우는 Vue.js 3
Composition API?
강의 소개에 Composition API 라고 적혀있어서 신청했습니다.24강까지 수강했는데 내용이 Options API 위주인 것 같은데 맞을까요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한 요청드립니다
안녕하세요. 깃허브에 같은내용으로 comment를 남겼지만 빠른 강의진행을 위해서 게시판에도 남깁니다. 감사합니다인프런 아이디 : anytime0105@naver.com인프런 이메일 : anytime0105@naver.com깃헙 아이디 : anytime877@gmail.com깃헙 Username : nameisjhC
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한 요청
깃허브 페이지에 권한 요청 글 올렸는데 확인이 안된 것 같아 이곳에 다시 글 남깁니다!인프런 아이디 : songhaeun111@gmail.com인프런 이메일 : songhaeun111@gmail.com깃헙 아이디 : java.she123@gmail.com깃헙 Username : yaho111
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
개발환경 문의드립니다.
'개발 환경 설정 및 깃헙 리포지토리 클론' 강의에서 개발환경 구성 시 아래 강의 참고하라고 하셨는데 현재는 없나보네요~ 어떤 것 참고해서 구성하면 될까요?<누구다 다루기 쉬운 Vue.js 프론트 개발 - 3시간 안에 배우기 강좌의 Node.js, Chrome, Vue.js 크롬 플러그인, Github 설치>
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 권한 요청합니다.
인프런 아이디 : @leejs인프런 이메일 : leejs@hdc-labs.com깃헙 아이디 : asooso1212@gmail.com깃헙 Username : asooso12
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 요청드립니다.
인프런 아이디 : skswngusslab@gmail.com인프런 이메일 : skswngusslab@gmail.com깃헙 아이디: skswngussla@naver.com깃헙 Username : lyd1040
-
미해결프로젝트로 배우는 Vue.js 3
24강에서 computed의 종속성이 변경도록 return하는데, 그러면 computed가 다시 실행되나요?
24강 검색기능 추가의 filteredTodos에서const filteredTodos = computed(() => { if (searchText.value) { return todos.value.filter(todo => { return todo.subject.includes(searchText.value); }); } return todos.value; });제가 알기로 computed는 반응형 종속성 변수가 변경될때마다 실행되는것으로 이해했습니다.그러면 여기서 반응형 종속성 변수는 todos와 searchText인데return에서 todos의 value가 변경되므로, computed가 총 두번실행되는 것인가요?1.searchText 변경을감지하고 computed 실행2.return 에서 todos.value를 변경3.todos의 변경을 감지하고 computed 재실행4.searchText와 todos모두 변경되지 않아 computed종료
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
왜 저는 todoItem.item 하면 값이 안나오는걸까요?
TodoList.vue코드<template><div><ul><!-- <li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem.item" class="shadow">{{todoItem}}<i class="checkBtn fa-solid fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i>v-bind:class="{A:a}" A클래스의 a속성이 false면 안나타남, true면 나타남 --><!-- <span v-bind:class="{textCompleted: todoItem.completed}">{{ todoItem.item }}</span><span class="removeBtn" v-on:click="removeTodo(todoItem, index)"><i class="fa-solid fa-trash-can"></i></span></li>> --><li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem" class="shadow"><i class="checkBtn fa-solid fa-check" v-bind:class="{ checkBtnCompleted: todoItem.completed }" v-on:click="toggleComplete(todoItem, index)"></i>{{ todoItem.item }} {{ index }}<!-- //v-bind:class="{A:a}" A클래스의 a속성이 false면 안나타남, true면 나타남 --><span v-bind:class="{ textCompleted: todoItem.completed }">{{ todoItem}}</span><span class="removeBtn" v-on:click="removeTodo"><i class="fa-solid fa-trash-can"></i></span></li></ul></div></template> <script>export default {data: function () {return {todoItems: []}},methods: {removeTodo: function (todoItem, index) {console.log('remove items');console.log(todoItem, index);localStorage.removeItem(todoItem);this.todoItems.splice(index, 1);},toggleComplete: function (todoItem, index) {todoItem.completed = !todoItem.completed;console.log(index);console.log(todoItem.item);//로컬스토리지 갱신localStorage.removeItem(todoItem.item);localStorage.setItem(todoItem.item, JSON.stringify(todoItem));}},created: function () {if (localStorage.length > 0) {for (var i = 0; i < localStorage.length; i++) {if (localStorage.key(i) !== 'loglevel:webpack-dev-server') {console.log(JSON.parse(localStorage.getItem(localStorage.key(i))));this.todoItems.push(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;}.checkBtnCompleted {color: #b3adad;}.textCompleted {text-decoration: line-through;color: #b3adad;}</style> TodoInput.vue코드<template> <div class="inputBox shadow"> <input type= "text" v-model="todoItems" v-on:keyup.enter="addTodo"> <span class="addContainer" v-on:click="addTodo"> <i class="fas fa-plus addBBtn"></i> </span> </div> </template> <script> export default { data: function(){ return{ todoItems: "" } }, methods:{ addTodo: function(){ if(this.todoItems !== ''){ //저장하는 로직 //localStorage.setItem(key, value); //localStorage.setItem(this.newTodoItem, this.newTodoItem); var obj = {completed: false, item: this.todoItems}; //localStorage.setItem(this.newTodoItem,obj); localStorage.setItem(this.todoItems, JSON.stringify(obj)); //obj 객체 > string화 this.clearInput(); } }, clearInput: function(){ this.todoItems = ''; } } } </script> <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, #8763FB); display: block; width: 3rem; border-radius: 0 5px 5px 0; } .addBtn { color: white; vertical-align: middle; } </style>
-
미해결프로젝트로 배우는 Vue.js 3
구조가 다름...
예전 강의라 그런지 구조도 다르고 레퍼런스도 달라서 따라가기가 어렵습니다..강의에서는 package.json에 scripts도 vue-cli 기반으로 돼있는데 전 이렇게 되어있고. 강의와 똑같이 해서 npm run serve해도 이런 오류만 나옵니다 .이 강의는 이미 만들어진 소스에서 추가하는 식인가요? 섹션0까지만 들어서 그런지 처음 만들때와 구조가 달라서 불친절하다는 생각이 드네요,,
-
미해결웹 게임을 만들며 배우는 Vue
Vue.Js 3를 사용하시면 Vue.set , this.$set 메서드가 없습니다.
제로초님 강의를 보면서 현재 Vue.js 3를 가지고 학습 중에 있습니다.강의 내용을 보면서 저는 실시간으로 화면에 대한 변화가 일어나고 있길래 Vue.js 3에서 Vue.set과 this.$set을 확인한 결과 Vue.js 3 에서는 제거가 되었다고 알게 되었습니다.혹시 제로초님의 강의를 Vue.js 3로 들으시는 분들은 도움 되실 수 있지 않을까 해서 남깁니당
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한요청합니다
인프런 아이디 : @tkfkdgoll인프런 이메일 : ttkfkdgolll@naver.com깃헙 아이디 : ttkfkdgolll@naver.com깃헙 Username : ryuwonhui
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 권한 요청드립니다.
- 인프런 아이디: secondwarren@gmail.com- 인프런 이메일: secondwarren@gmail.com- 깃허브 아이디: secondwarren@gmail.com- 깃허브 username: weritas247
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
섹션 14. 학습 노트 데이터 삭제 _ 삭제 API 함수 및 기능 구현 질문입니다.
현재 게시글이 2개가 있고 게시글 '안녕핫요' 를 삭제하려고 합니다.근데 click으로 deleteItem 함수를 호출하는데 매개변수에 id값이 없잖아요??근데 '안녕핫요'게시글의 휴지통버튼을 누른뒤 this.postitem을 하면 '안녕핫요'의 객체정보만 콘솔화면에 찍히는데. 이를 어떻게 판단했는지가 궁금합니다.(props로 내려받은 객체 2개가 찍혀야 하는게 아닌가요?)mainPage에서 반복문을 통해 자식컴포넌트에 props로 정보를 내려준건 알겠는데요, 어떻게 deleteitem의 매개변수에 정보가 없는데도, 제가 무엇을 삭제하려고 했는지 알고 객체 정보를 가져오는 것일까요?this.postItem을 하면 props로 내려받은 postitem 2개를 가져와야하는거 아닐까요?this.postItem
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
뷰엑스 설치 및 연결 &amp;gt; vuex를 적용했는데 개발자도구에 base state 모양이 없어요.
vue개발자도구로 넘어가는 순간 콜솔에 이 에러가 나고 개발자도구에서 선생님과 다르게 나타나는데 콘솔에러때문일까요? 선생님 git으로 checkout해서 코드 똑같이 해도 이런 문제가 발생하네요.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 요청합니다
깃헙 요청합니다인프런 아이디 : gogyuja@gmail.com인프런 이메일 : gogyuja@gmiail.com 깃헙 아이디 : gogyuja@gmail.com깃헙 Username : good-game-yo
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃 허브 권한 요청드립니다.
인프런 아이디 : dongju.shin@wezon.com 인프런 이메일 : dongju.shin@wezon.com 깃헙 아이디 : ehdwn0528@gmail.com 깃헙 Username : dongju.shin