25%
57,750원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
vue3 에러 메세지...
piniaData.jsimport { defineStore } from 'pinia'; import { fetchAskList, fetchJobsList, fetchNewsList, fetchUserInfo, fetchItem, fetchList } from '../api/index'; export const usePiniaStore = defineStore('listData', { state: () => { return { news: [], ask: [], jobs: [], user: {}, item: {}, loading: true, list: [], } }, getters: { fetchedNews(state) { return state.news }, fetchedAsk(state) { return state.ask }, fetchedJobs(state) { return state.jobs }, fetchedUser(state) { return state.user }, fetchedItem: (state) => state.item, fetchedList: (state) => state.list }, actions: { async FETCH_NEWS(){ try { this.loading = true; const res = await fetchNewsList(); this.news = res.data; return res; }catch(error){ console.error(error); }finally{ this.loading = false; } }, async FETCH_ASK(){ try { this.loading = true; const res = await fetchAskList(); this.ask = res.data; return res; }catch(error){ console.error(error); }finally{ this.loading = false; } }, async FETCH_JOBS(){ try { this.loading = true; const res = await fetchJobsList(); this.jobs = res.data; return res; }catch(error){ console.error(error); }finally{ this.loading = false; } }, async FETCH_USER(id){ try { this.loading = true; const res = await fetchUserInfo(id); this.user = res.data; return res; }catch(error){ console.error(error); }finally{ this.loading = false; } }, async FETCH_ITEM(id){ try { this.loading = true; const res = await fetchItem(id); this.item = res.data; return res; }catch(error){ console.error(error); }finally{ this.loading = false; } }, async FETCH_LIST(pageName){ try { this.loading = true; const res = await fetchList(pageName); this.list = res.data; return res; }catch(error){ console.error(error); }finally{ this.loading = false; } }, } }) CreateListView.jsimport { h } from 'vue'; import ListView from './ListView'; import { useRoute } from 'vue-router' import { usePiniaStore } from '../store/piniaData' export default function createListView(componentName) { return { name: componentName, setup() { // store 를 쓰기위함 const store = usePiniaStore(); // store에 우리가 만든 state를 사용하고, api요청 함수를 사용하기 위해 const { FETCH_LIST } = store; const routeName = useRoute().name; FETCH_LIST(routeName). then(() => { console.log('fetched') }); return { routeName } }, render() { // ListView 컴포넌트를 렌더링하는 렌더링 함수 return h(ListView); } } } 로 작성을 해서 기능은 다 작동하는데요... 콘솔창에[Vue warn]: Property "name" was accessed during render but is not defined on instance. at <ListItem> at <ListView> at <NewsView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {_pStores: {…}, …} > > at <BaseTransition appear=false persisted=false mode=undefined ... > at <Transition name="page" > at <RouterView> at <App>에러가 계속나오는데 어떻게 해결할 수 있는지 알 수 있을까요?
- 해결됨Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
id ="app" 중복
안녕하세요. App.vue 소스를 보면 아래와 같이 <div id="app"></div> 태그가 있고,public/index.html 에도 <div id="app"></div> 태그가 있습니다.그래서 크롬 개발자 도구를 보면 #app 안에 #app 있는데요. 둘 중 하나만 있어야 하는 건 아닌지요? index.html #app 태크를 지우면 정상적으로 로딩되지 않더라고요. 감사합니다.
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
use undefined 에러가 나옵니다.
같은 질문들 답변 참고해서 버전 변경후 다시 시작해도 안 됩니다.소스 한번만 봐주세요.https://github.com/insuchoe/vue-news.git
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
깃허브 권한 요청드립니다.
인프런 아이디 : jhj951105@gmail.com인프런 이메일 : jhj951105@gmail.com깃헙 아이디 : jhj951105@gmail.com깃헙 Username : OngNyang 감사합니다 :)
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
권한요청드립니다.
권한요청드립니다.인프런 아이디 : soongin95인프런 이메일 : soongin95@naver.com깃헙 아이디 : gayoung106깃헙 Username : gazero
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
Vue3에서 구글 애드센스 탑재하기
안녕하세요. 선생님께 잘 배워서 웹사이트를 만들었습니다. timelessflash.com 아직 테스트중이고요. 조금 더 손봐야 합니다만 본기능은 사용할 수 있습니다. 마지막 관문이 남았습니다. 광고넣기입니다. vue3에서 작은 콤포넌트에 구글 애드센스 적용하고 싶은데 관련 강의클립이 제작된 것이 있나요? <vue.js 끝장내기>까지 소유하고 있는데 광고 삽입 관련 강의는 없는 것 같아요.추가 강의를 부탁드립니다. 감사합니다.
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
코드가 정상 작동 되는건지 ...
해당 코드 그대로 따라 쳤는데 안 되네요. 판교님 블로그에서도 예제 있어서 복붙 했는데, 마찬가지로 안 되요.흠... 혹시 막힌건지.. 다른 동일한 질문글이 있어서 수정해봤지만 역시 value가 undefined라 동작이 안 되네요 ㅜㅜ~
- 해결됨Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
강의에서 api를 따로 빼셨는데 얻는 이점이 뭐죠?
2:05초에서는 created()에서 getNewsList();함수 호출 하나로 axios.then.catch 코드를 줄일수 있다고 하셨는데,12:00 초에서는 import 후에 fetchNewsList() 호출 후 , then.catch그대로 있어서 결과론적으로 얻는 이점이 뭔지 모르겠습니다!
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
vuex 적용시 질문
vue3로 강의를 실습 중이라 vuex를 활용해 진행하고 있습니다. spinner처리 때문에 위 코드처럼 next()에 setTimeout을 걸었는데, 기존에 불러왔던 데이터가 상태에 남아있어서 그런지,예를들어 ask-> news탭을 누를 경우 news 데이터가 바로 반영이 되어 리스트 화면이 변경된 뒤에, 1초 후 화면이 깜빡 거리면서 다시 news 데이터가 뜹니다.이를 해결하기 위해, mutations에위와 같이 state를 비워 주는 코드를 추가하여 해결했는데, vuex를 사용하게되면 이런식으로 화면이 바뀔 때 상태값들을 초기화 시켜주어야 하는걸까요?
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
라우터 버전이 안맞는데 어떤걸 써야하나요
라우터 버전이 안맞는데 어떤걸 써야하나요
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
UserView에 id 속성만 undefined로 넘어오는데 이유를 모르겠습니다..
위 스샷처럼 id만 undefined로 넘어옵니다..https://api.hnpwa.com/v0/user/titaniumtown.json해당 주소로 요청을 보내면 제대로 id까지 나오는데.. 이유를 도저히 모르겠습니다... 해당 위치에서 console을 찍었을 때 이미 id는 undefined로 받은 상태입니다
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
권한요청 드립니다!
인프런 아이디 : pm@nuriapp.co.kr인프런 이메일 :pm@nuriapp.co.kr깃헙 아이디 : orinogcode@gmail.com깃헙 Username : jiYoung4868
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
동적 라우팅과 헬퍼함수 간의 오류 질문드립니다.
안녕하세요. 강사님. 항상 강의 잘 보고 있습니다.AskView에서 헬퍼함수(mapGetters)를 사용한 것과 같이 NewsView에서도 동일하게 적용해보았습니다.근데, 이 후 라우팅 파트에서 router-link를 구현할 때 오류가 발생 하더라구요.원인은 비동기로 가져오는 'fetchedNews' 값이 router-link를 렌더링 하는 시점보다 늦게 응답받기 때문이라고 생각했습니다.그러던 중 router-link를 다른 방식으로 작성 하였더니 정상동작해서 질문드립니다..하기 두 방식의 차이점이 무엇인지 잘 모르겠습니다.더불어, 위와 같이 router-link의 기반데이터를 얻는 비동기 응답의 시간이 지연될 때, router-link의 생성을 같이 늦출 수는 없을까요?..[1. 오류가 났던 사용 법]<router-link class="link-text" :to="{ name: 'user', params: { id: item.user } }"> {{ item.user }} <router-link>[2. 수정된 동작한 사용법]<router-link :to="`user/${item.user}`">{{ item.user }}</router-link>
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
mixin 질문있습니다.
라우트에서 다음과 같이 전부 리스트 컴포넌트를 불러오고 mixin을 하면 왜 처음에 들어간 글 리스트에서 다른 페이지로 갔을 때, 데이터가 업데이트 되지 않는 걸까요??mixin 내부에서는 route.name에 따라서 넘기는 변수가 달라져서 원래는 각각 페이지에 맞는 데이터가 fetch되어야 하는게 아닌가요?? mixinimport bus from "@/utils/bus"; // mixin export default { // 재사용할 컴포넌트 옵션 & 로직 created() { bus.$emit("start:spinner"); this.$store .dispatch("FETCH_LIST", this.$route.name) .then(() => { console.log("fetched", this.$route.name); bus.$emit("end:spinner"); }) .catch((err) => { console.error(err); }); }, };routes/index.jsexport const router = new VueRouter({ mode: "history", // 표시되는 url => root/#/ 형식을 없애줌 routes: [ { path: "/", redirect: "/news", }, { path: "/news", // 주소 name: "news", // component: createListView("NewsView"), // HOC component: ListView, }, { path: "/ask", name: "ask", component: ListView, }, { path: "/jobs", name: "jobs", component: ListView, }, { path: "/user/:id", component: UserView, }, { path: "/item/:id", component: ItemsView, }, ], });
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
참고링크가 잘못 되어 있습니다.
참고링크 주소에https://github.com/joshua1988/vue-advanced라고 표기 되어있는데, 실제 링크되어 있는 URL은https://gist.github.com/joshua1988/da1b9ab5703480f71cef88b2f8cb6edehttps://github.com/joshua1988/vue-advanced입니다. https://gist.github.com/joshua1988/da1b9ab5703480f71cef88b2f8cb6ede https://github.com/joshua1988/vue-advanced 두개의 주소가 같이 붙어있네요.. ^^;;;
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
권한 요청드립니다.
인프런 id : chic.jin83@gmail.com인프런 이메일 : chic.jin83@gmail.com깃헙 아이디 : karisjin02깃헙 Username : karisjin02요청 드립니다.
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
vue3 에서는 computed의 get 과 set
해당 방법도 좋은 방법이지만vue3 와서는 computed프로퍼티의 get과 set 으로 퍼포먼스 최적화 하는 방법이 있습니다
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
깃허브 private 리포지토리 권한 부탁드립니다.
깃허브 private 리포지토리 권한 부탁드립니다.인프런 아이디 : jaeminche@gmail.com인프런 이메일 : jaeminche@gmail.com깃헙 아이디 : jaeminche@gmail.com깃헙 Username : jaeminche 감사합니다.
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
CreateListView.js 파일에서 $store 가 불러와지나요???
main.js에도 잘 연결되어있는데해당 에러가 납니다이유가 무엇인지 잘 모르겠네요
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
권한요청 드립니다.
인프런 아이디 : @rnrn48159인프런 이메일 : rnrn48159@gmail.com깃헙 아이디 : rnrn48159@gmail.com깃헙 Username : thomasisong