25%
41,250원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
컨테이너 컴포넌트(App.vue) 에 관해 질문드립니다!
하위 컴포넌트들은 프레젠테이션 컴포넌트로 단순히 데이터를 표현하는 용도로 사용하고, App.vue에서 모든 데이터들을 관리한다고 하셨는데 그렇게 되면 App.vue가 비대해 지지 않나요?질문 1) 지금까지 배운 내용 바탕으로는 모든 하위 컴포넌트 이벤트에 대해서 App.vue의 methods 속성에서 처리한다고 이해를 하면 될 까요?질문 2) 그렇다면 실제 실무에서는 App.vue에 들어갈 각 비즈니스 로직을 파일로 분리하여 import 하는 식으로 진행되나요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vuex 실행시 새로고침해야지만 리스트에 나타나는 현상
안녕하세요!강의 듣으며 코드 작성중에 있는데vuex로 코드를 작성하게 되면서 props데이터를 삭제하고 store.js로 mutation로 app.js에 있는 methodsf를 옮기게 되면서 새로고침해야지만 리스트가 추가/삭제되는 현상이 나타나고 있습니다. 다시 삭제했다가 작업해도 마찬가지네요.. 코드양이 너무 방대해서 올리기는 어려울것 같고 혹시 버전차이에 문제일수도 있나요? vue devtools에는 실시간으로 나타나는걸로 보입니다...
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
export default 관련한 질문
안녕하세요 Modules 단계를 듣다가 궁금한 점이 생겨서 여쭤봅니다. export default {} 를 해야 import 를 할 수 있는 것으로 이해 하였습니다. 그런데 TodoHeader.vue 의 경우 스크립트 단을 아예 만들지 않아서 export default {} 가 없는데 어떻게 App.vue 에서는 TodoHeader를 import 할 수 있는 걸까요? 제가 예상하기로는 export default 단위 블록 안에 아무 내용이 없으면 생략 가능한 것 아닐까 라는 생각을 해보았는데 혹시 맞을까요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 vue-todo 접근불가에 따른 확인요청
깃허브 권한이 별도 없다고해주셨는데, 아래와같이 vue-todo 접근이 불가해서 확인부탁드리려합니다.
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브에 문제있는것 같습니다.
깃허브에 문제있는것 같습니다.vue-todo 폴더에 들어가지지 않습니다.확인 바랍니다.
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
인프런 강의 재생 화면 구성 변경 문의드립니다
안녕하세요. 캡쳐 드린것과 같이, 현재 커리큘럼 ,질문등이 갑자기 하단으로 내려가서 강의가 작게 나오는 불편함을 겪고 있었습니다. 원래는 브라우저의 오른쪽에 위치해서 마우스를 가져다대면 그제서야 커리큘럼이 나오거나 했었는데요.어떻게 변경해야하는지 모르겠어요 ㅠㅠ
- 미해결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')이렇게 적어야 하나요?