묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결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 끝장내기 - 실무에 필요한 모든 것
혹시 node.js 10.24 버전으로 해도 상관없나요?
10.16 으로 nvm인스톨해도 계속 10.24 로 버전이 채킹이되더라구요
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
pinia 사용할려고 하는데 에러가 나옵니다.
import { defineStore } from "pinia"; import { getUserFromCookie, getAuthFromCookie } from "@/utils/cookies"; import { loginUser } from "@/api"; export const usePiniaStore = defineStore("userData", { state: () => { return { storeUsername: getUserFromCookie() || "", token: getAuthFromCookie() || "", }; }, getters: { isLogin: (state) => state.storeUsername !== "", }, actions: {}, });에러 내용Uncaught ReferenceError: Cannot access 'usePiniaStore' before initializationloginUser 요거 불러올때 에러나는거 같은데,왜 그런지 모르겠습니다.
-
미해결Vue로 Nodebird SNS 만들기
해당 강의는 리뉴얼 예정은 따로 없나요?
React는 리뉴얼된 자료가 있던데 Vue NodeBird는 따로 없는것같아서요! 감사합니다.
-
미해결프로젝트로 배우는 Vue.js 3
numberOfPages 결과 nan
const numberOfPages = computed(() => {return Math.ceil(Number(numberOfTodos.value)/limit)}); 이 부분에서 NaN 에러가 납니다.혹시나해서 강사님 깃허브 소스 들고와서 복붙해도 똑같이 그러네요.페이징 마지막 34번 깃허브 소스도 붙여넣기 해보니 아예 리스트가 안 나오는 현상이 발생합니다.(데이터는 잘 불러옵니다.)뭐 때문에 그러는걸까요? 소스 확인 부탁드립니다!
-
미해결프로젝트로 배우는 Vue.js 3
todos 질문입니다.
todos 에 내용이 없을 때 화면에 []이 표시됐었는데, 마지막에 내용을 지워도 화면에 []이 표시되지 않네요?? 어떤 로직때문에 화면에 todos가 없어도 []가 표시되지 않는걸까요?
-
해결됨프로젝트로 배우는 Vue.js 3
작동은 되긴 하는데 해당 메세지는 왜 뜨는걸까요?
(사진)
-
해결됨Vue로 Nodebird SNS 만들기
강의는 언제까지 업데이트 된 내용인가요?
오랜만에 다시 강의를 들어보려고 하는데 최근 Vue 업데이트가 많아서 최신버전에서도 문제 없이 작동할지 모르겠네요. Vue3 기반으로 작업해도 문제 없을까요?
-
미해결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 3
강의노트 문의
안녕하세요.예전에 수강하다가 다시 기본부터 재수강중입니다.강의노트는 따로없나요? 전에 수강시에는 강의 정리 노트가 있었던 것 같은데...없어진 건지 문의드립니다.
-
미해결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 3
x-total-count 및 db.json id값 문제
x-total-count가 undefined로 나옵니다 ㅠㅠ무슨 일일까요.. 그리고..db.json - id값 문제,,uuid로 들어가는 거 같은데,,,또 id값이 스트링으로 또 들어가네요ㅠㅠ ***혹시 몰라서 저렇게 x-total-count 추가해놓긴했는데페이징 번호 눌러도 첫번째 페이지말고는 데이터를 가져오질 않네요..깃허브에 올려놓으신 코드 봐도 x-total-count 헤더에 추가한 코드말고는 다른 게 없습니다. &버전차이일까요? node.js 일부러 낮은 버전 설치하면 json-server가 node랑 버전이 안맞는다고 안돌아가더라고요. 그래서 node 버전을 LTS최신버전으로 설치하긴했는데.. const getTodos = async (page = currentPage.value) => { currentPage.value = page; try { const res = await axios.get( `http://localhost:3000/todos?_page=${page}&_limit=${limit}` ); const total = await axios.get('http://localhost:3000/todos'); //전체 리스트 가져오기 const totalList = total.data.length; //가져온 전체리스트의 길이 res.headers.set("Access-Control-Expose-Headers", "x-total-count"); res.headers.set( "x-total-count", totalList ) //그냥..어거지로 만들어 줌.. console.log(res.headers["x-total-count"]) numberOfTodos.value = res.headers["x-total-count"]; console.log(res.data) todos.value = res.data; } catch (err) { console.log(err); error.value = 'Something went wrong!'; } }
-
미해결Vue로 Nodebird SNS 만들기
실습 환경 문의(Node 버전)
안녕하세요.실습을 위해서 Node 버전은 어떤 버전을 설치 해야 할까요 ?최신 버전을 받아서 설치하니 에러가 있어서, 답변바랍니다.
-
미해결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으로 적어야 한다해서 이렇게 작성했어요