55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
addTodo Helper 함수 적용
안녕하세요. 강의 중에는 TodoInput.vue addTodo()를 ...mapMutation로 변경하는 내용이 없습니다. git 에도 $store.commit이 적용된 소스만 있고요.addTodo()는 helper로 대체할 수 없는 건가요? 감사합니다.
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vuex 헬퍼 전역 설정
안녕하세요. 강사님의 명쾌한 강의 덕분에 vuex에 대한 이해도가 높아졌습니다.실무에서는 Todo app 보다 더 복잡한 컴포넌트를 다루기 때문에 vuex 헬퍼를 왠만한 컴포넌트에 다 import할텐데요. 이렇게요. import {mapGetters, mapMutation 등등} from "vuex";이럴 경우에 한 번만 import해서 전역적으로 사용할 수 있는 방법이 궁금합니다. 감사합니다.
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
github 권한요청드립니다.
인프런 아이디 : 카카오톡(010-8570-0292)깃헙 : luna7698@gmail.com 좋은 강의 감사합니다.
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
이벤트 위치에 대한 궁금증 입니다.
리스트에서 실행하는 함수를 App으로 빼는 이유가 궁금합니다.그외에 이벤트 같은 경우 다른 자식 컴포넌트에 영향도가 있기때문에 App으로 이동시키는거는 이해가 되나, 토글 이벤트 같은 경우는 다른 자식 컴포넌트에 영향도가 없을것 같은데 App으로 이동하는 이유가 궁금합니다.해당 방식으로 컴포넌트를 설계하면 결합도가 높아 다른곳에서 사용이 불가능하거나 확장성이 낮지 않나요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
구조 차이에 대한 문의
안녕하세요.vue cli (@vue/cli 5.0.8)로 프로젝트를 생성하니강의 구조와 다르게 /public/ 에 index.html이 생성되며,<script src="dist/build.js"> 도 없습니다.어떻게 main.js intex.html에 붙는 건지 궁금합니다. 감사합니다.
- 해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
TodoList.vue에서 삭제 처리를 위한 emit이 작동하지 않습니다.
TodoList.vue에서 removeBtn으로 removeTodo함수를 호출하면서 부모창으로 emit을 요청했지만app.vue에서 콘솔로그를 출력해봤을때 해당 함수를 호출이 안되는데, 원인이 뭔지를 모르겠습니다.강의 내용대로 입력했는데, 해당 기능이 수행되지 않고 있습니다. localhost:8080 으로 접속했을 때 아래와 같은 오류가 뜹니다.app.vue소스에서 methods 영역에 아래와 같이 선언했는데 못찾는 이유가 무엇인가요?removeOneItem: function(todoItem){에러메시지 -main.js:4 [Vue warn]: Property "removeOneItem" was accessed during render but is not defined on instance. at <App> TodoList.vue<template> <div> <ul> <li v-for="(todoItem , index) in propsdata" v-bind:key="todoItem.item" class="shadow"> <i class="checkBtn fa-solid fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i> <span v-blind:class="{textCompleted: todoItem.completed}">{{ todoItem.item }}</span> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fa-solid fa-trash"></i> </span> </li> </ul> </div> </template> <script> export default { props:['propsdata'], methods: { removeTodo : function(todoItem, index){ this.$emit('removeItem', todoItem, index); }, toggleComplete: function(todoItem, index){ console.log(todoItem.item + " " + index); todoItem.completed = !todoItem.completed; localStorage.removeItem(todoItem.item); localStorage.setItem(todoItem, JSON.stringify(todoItem)); } } } </script>app.vue<template> <div ip="app"> <TodoHeader></TodoHeader> <TodoInput v-on:addTodoItem="addOneItem"></TodoInput> <!-- <TodoInput v-on:하위 컴포넌트에서 발생시킨 이벤트 이름="현재 컴포넌트 매소드명"></TodoInput> --> <TodoList v-bind:propsdata="todoItems" v-on:removeItem="removeOneItem"></TodoList> <!-- <TodoList v-bind:propsdata="todoItems"></TodoList> --> <!-- <TodoList v-bind:내려보낼 프롭스 속성 이름="현재 위치의 컴포넌트 데이터 속성"></TodoList> --> <TodoFooter></TodoFooter> </div> </template> <script> import TodoHeader from './components/TodoHeader.vue' import TodoInput from './components/TodoInput.vue' import TodoList from './components/TodoList.vue' import TodoFooter from './components/TodoFooter.vue' export default { data: function(){ return { todoItems:[] } }, methods:{ addOneItem: function(todoItem){ console.log("addOneItem:[" + todoItem + "]"); var obj = { completed : false, item: todoItem }; // console.log(this.newTodoItem); //저장하는 로직 localStorage.setItem(todoItem,JSON.stringify(obj)); this.todoItems.push(obj); } }, removeOneItem: function(todoItem){ // console.log("removeOneItem app remove items:[" + index + "]:" + todoItem.item); console.log("removeOneItem app remove items:[:" + todoItem.item); localStorage.removeItem(todoItem.item); // this.todoItems.splice(index, 1); },
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vue3 모달창 트랜지션
<template> <transition appear name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <!-- Modal Header --> <div class="modal-header"> <slot name="header"> default header </slot> </div> <!-- Modal Body --> <div class="modal-body"> <slot name="body"> default body </slot> </div> <!-- Modal footer --> <!-- <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')"> OK </button> </slot> </div> --> </div> </div> </div> </transition> </template> <style scoped> .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: table; transition: opacity 0.3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-container { width: 300px; margin: 0px auto; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); transition: all 0.3s ease; font-family: Helvetica, Arial, sans-serif; } .modal-header { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } .modal-enter-from { opacity: 0; } .modal-leave-active { opacity: 0; } .modal-enter-from .modal-container, .modal-leave-active .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); } </style>vue3인데 모달창 띄울 때 애니매이션 효과가 잘 작동하는데 왜 닫을 때는 작동을 안하는 지 잘 모르겠어요<AlertModal v-if="showModal" @close="showModal = false"> <!-- you can use custom content here to overwrite default content --> <template v-slot:header> <h3>경고! <span class="closeModalBtn" @click="showModal = false">x</span></h3> </template> <template v-slot:body> 아무것도 입력하지 않으셨습니다. </template> <!-- <template v-slot:footer> copy right </template> --> </AlertModal>참고로 vue3에서는 slot을 template 태그 안에 v-slot으로 적어야 한다해서 이렇게 작성했어요
- 해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 권한 요청드립니다.
- 인프런 아이디: sju02135@hanmail.net- 인프런 이메일: sju02135@hanmail.net- 깃허브 아이디: sju02135@hanmail.net- 깃허브 username: minsung1129
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
2:46 created 가... init() 메소드와 상관관계..?
최초 한번만 실행되는 메소드처럼 보이는데... 맞습니까?
- 해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vuejs 중급 깃허브 권한 요청
인프런 아이디: tastybusango@gmail.com인프런 이메일: tastybusango@gmail.com깃허브 아이디: sonyeonghwa@gmail.com깃허브 username: sonyeonghwa
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
import 시 뜨는 에러 (타입스크립트 파일에서만 사용할 수 있습니다.)
안녕하세요! 강의 잘 보고 있습니다 ㅎㅎ다름이 아니라, import * as getters from './getters' 를 했는데 'import ... ='는 TypeScript 파일에서만 사용할 수 있습니다. ts(8002)라며 에러가 나네요 ㅠㅠ저는 뷰 3를 이용하고 있습니다!
- 해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
store 등록 재문의
저는 강의대로 vue2를 사용하고 있습니다.그런데 영상에선 main.js에 내용이new Vue({ el: '#app, render: h => h(App), });이렇게 되어있어서 el 밑에 store을 추가하셨는데,new Vue({ render: h => h(App), }).$mount('#app')저는 이렇게 되어있어서요. .$mount('#app')을 지우고영상과 같이 el: '#app'으로 변경하고 그 밑에 store을 추가하라는 말씀이신가요?
- 해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
mutations, commit 형식문의
state: { num: 10 }, mutations: { printNumbers(state) { return state.num; }, sumNumbers(state, anotherNum) { return state.num + anotherNum; } } this.$store.commit('sumNumber', 20);여기서첫번째 인자는 무조건 state라고 하셨는데, 그게 문법인가요? 아니면, printNumbers(state)처럼 값을 넣었기 때문인가요? state: { storeNum: 10 }, mutations: { modifyState(state, payload) { console.log(payload.str); return state.storeNum += payload.num; } } this.$store.commit('modifyState', { str: 'passed from payload', num: 20 });여기서도 modifyState를 호출하면서 같이 넘기는 값이, payload에 담기는건 항상 처음은 state이기 때문인가요?
- 해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
store 등록문의
저는 main.js 파일을 보면new Vue({ render: h => h(App), }).$mount('#app')이렇게 되어있습니다.이게 el:'#app' 과 같다는건 아는데,store은 강의 내용과 같이 new Vue({ })안에넣으면 될까요? 아니면,.$mount('#app').$mount('store')이렇게 적어야 하나요?
- 해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
modal 컨포넌츠 등록 문의
앞서 App.vue에선,import TodoHeader from './components/TodoHeader.vue'하여components: { 'TodoHeader': TodoHeader, },이렇게 컴포넌츠를 등록했습니다. 그런데 왜 모달은 TodoInput.vue 파일에서components: { popModal: popModal, },이렇게 작은따옴표('') or 큰따옴표("")를 사용하지 않고 등록하는건가요? (정상작동은 합니다~!)
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
toggleComplete(todoItem, index)에러
이 부분에서 index에 에러 메세지가 나옵니다.'index' is defined but never used 내용의 메세지가 나오는데, removeTodo(todoItem, index)에는 안나오는데 toggleComplete에만 나와요. <i class="checkBtn fa-solid fa-square-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i>toggleComplete: function(todoItem, index){ todoItem.completed = !todoItem.completed; }찾아보다가devServer: { overlay: false }이걸 추가하라는 글을 보고 추가했는데, 변화가 없길래 서버를 다시 실행 해봤습니다.그런데 오히려 저거 때문에 다른 오류가 발생하여 서버실행이 안됩니다.지우니까 다시 실행은 되는데.. 어떻게 해결해야 하나요? +) 처음 구현때 안되어서 주석처리하고 그대로 진행하다, 리팩토링때 다시 해봤는데, 리팩토링 코드로는 할일완료 기능이 정상 작동합니다. 무슨 차이가 있을까요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vue3 강의 영상보고 여기 왔습니다. Volar로 설치하고 진행중인데요
안녕하세요저는 일단 vue3 기초영상보고 왔습니다그리고 여기 강의 실습하는 상황에 막히는 부분이 있어서 질문 드립니다.설치는 vue3 볼라로 하고 있고요뭔가 웹팩 설치도 막혔지만.. 그냥 넘겼습니다. 우선 11장까지는 잘 따라가고 있는데 12장부터 문제네요todo앱을 vuex로 바꾸는 부분부터 뭔가 잘 안되는거 같아요...volar와 vuter에 대해 vuex랑vuex헬퍼 설치나 사용법 차이가 있나요?vue3에 volar로도 vuex나 헬퍼 사용 가능하죠?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
fontawesome의 icon이 제대로 작동하지 않습니다.
위의 화면캡처와 같이 알려주신대로 코딩하였으나 아래 화면캡처와 같이 브라우저에서 정상적으로 표시되지 않습니다.
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브에서 강사님의 소스가 보이지 않습니다.
아래 화면캡처와 같이 깃허브에 강사님이 작성하신 스크립트가 보이지 않습니다. 실습 시 참조하기 위해 반드시 필요합니다. 기초강의때처럼 소스를 다운받을 수 있을까요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한 요청 드립니다.
- 인프런 아이디: renoyar@naver.com- 인프런 이메일: renoyar@naver.com- 깃허브 아이디: skshhj@gmail.com- 깃허브 username: RENOYAR