묻고 답해요
135만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
App.vue가 필요한 이유
안녕하세요. 수업 정말 재밌게 잘 듣고 있습니다.근데 듣다 보니 App.vue가 점점 왜소해지네요.앞으로는 store가 데이터 저장과 중앙 처리 역할을 모두 수행하는 것 같은데 App.vue가 있어야 할 이유는 무엇일까요?궁금하여 질문 남깁니다.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
getter가 정의되어 있지 않아 오류가 발생합니다.
안녕하세요 강사님중급강의 스토어 모듈화까지 마치고 정상작동을 확인 한 후터미널에서 프로젝트를 재실행 하였지만오류로 인해 TodoList, TodoInput 등 작동 되지 않습니다.오류는 다음과 같고main.js와 store.js, todoApp.js 모두 import가 올바른 경로로 되어있습니다.main.jsimport Vue from 'vue' import App from './App.vue' import { store } from './store/store.js' new Vue({ el: '#app', store : store, render: h => h(App), }) store.jsimport Vue from 'vue' import Vuex from 'vuex' import todoApp from './modules/todoApp.js' Vue.use(Vuex); export const store = new Vuex.Store({ modules : { todoApp } });todoApp.jsconst storage = { fetch(){ const arr = []; console.log('created') if(localStorage.length > 0 ){ for(let i = 0; i < localStorage.length; i ++){ if (localStorage.key(i) !== 'loglevel:webpack-dev-server'){ arr.push(JSON.parse(localStorage.getItem(localStorage.key(i)))); } } } return arr; } } const state= { todoItems: storage.fetch() }; const getters = { getTodoItems(state) { return state.todoItems; } }; const mutations= { addOneItem(state, todoItem) { const obj = {completed: false, item: todoItem} localStorage.setItem(todoItem, JSON.stringify(obj)); state.todoItems.push(obj); }, removeOneItem(state, payload){ localStorage.removeItem(payload.todoItem.item); state.todoItems.splice(payload.index,1); }, toggleOneItem(state, payload){ state.todoItems[payload.index].completed = !state.todoItems[payload.index].completed; localStorage.removeItem(payload.todoItem.item); localStorage.setItem(payload.todoItem.item, JSON.stringify(payload.todoItem)); }, clearAllItems(state){ localStorage.clear(); state.todoItems=[]; } }; export default{ state, getters, mutations }
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
뷰 라이프사이클
Vue2는 created가 있지만,Vue3는 없기때문에 혼용해서쓴다면(누가하던 작업을 이어받음)Api호출을 mounted 시점에하는게 나을까요? created시점에 호출하는것과 차이 많이날까요?
-
미해결웹 게임을 만들며 배우는 Vue
숫자 야구 npm run build시 오류
ERROR in app.js from TerserError: error:0308010C:digital envelope routines::unsupported구글링해보니 리액트밖에 안뜨네요.. 어떻게 해야 하나요?
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
TSLint 말고 TSLint Vue 설치해도 되나요?
TSLint가 Deprecated 됐다고 나와서요TSLint Vue 설치해도 되나요?
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
로컬 스토리지는 어디에 있나요?
강사님 수업 정말 잘 듣고 있습니다.단순한 궁금증이 생겨 문의드립니다.Local Storage는 어디에 있는 걸까요?어떤 저장소를 사용하는 것인지 알고 싶네요
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
AppHeader.vue에 vue 디폴트 만들에 Delete `␍` 오류나면
Delete ␍ 오류나면prettier/prettier 쪽에 아래것 추가,endOfLine: 'auto',
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
vue3로 따라오시다가 import axios 에러 뜨시는 분들
jest.config.js 파일에서preset 밑에 transformIgnorePatterns: ['node_modules/(?!axios)'],이거 한 줄 추가해주시면 됩니다..이유는 axios 버전이 높아서 jest에서 es6를 인식 못하는것이 문제라고 합니다.. 감사합니다..
-
해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
$router 를 이용한 메인 페이지로 이동
안녕하세요. 5_styling 브랜치를 받고 2개의 에러를 수정이후 메인페이지 이동을 위한 this.$router.push('/main') ; 코드를 입력하면 아래와 같은 의존성 문제가 발생합니다.어떻게 해야 할까요?routers/index.js 에는 .. 아래 코드 추가해 주었습니다. { path: '/main', component: () => import('@/views/MainPage.vue'), },
-
미해결프로젝트로 배우는 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
Vue3 쓰시는분들 트랜지션 설정 팁
실무에서 쓸일이 있어서 복습하다보니 Vue 버전이 바뀌어서 강의 내용보면서 Vue3 에 맞게 적용중인데요. 우선 아래 레퍼런스 참고하시면 될 듯 합니다. 강의내용과는 크게 다른건 없긴합니다.https://vuejs.org/guide/built-ins/transition.html#the-transition-componenthttps://vuejs.org/examples/#list-transitionTodoList.vue<template> <div> <!-- name 은 하단의 css 클래스 transition class 와 연관--> <TransitionGroup tag="ul" name="list" class="container"> <li v-bind:key="todoItem.item" v-for="(todoItem, index) in propsdata" class="shadow"> <i class="checkBtn fa-solid fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i> <span v-bind:class="{textCompleted : todoItem.completed}" >{{ todoItem.item }} </span> <!--{{ index }}--> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fa-solid fa-trash"></i> </span> </li> </TransitionGroup> </div> </template> <style> /* 기존 css 는 생략, 아래 레퍼런스 css 참고 https://vuejs.org/examples/#list-transition */ /* 리스트 아이템 트랜지션 효과 */ /* 1. declare transition */ .list-move, .list-enter-active, .list-leave-active { transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); } /* 2. declare enter from and leave to state */ .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(30px); } /* 3. ensure leaving items are taken out of layout flow so that moving animations can be calculated correctly. */ .list-leave-active { position: absolute; transition: all 1s; } </style>
-
미해결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