월 15,400원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
위에 질문하신 내용 저도 궁금합니다~!
삭제된 글입니다
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
Cannot use v-for on stateful component root element because it renders multiple elements. 가 뜹니다.
Cannot use v-for on stateful component root element because it renders multiple elements. 1 | 2 | <div v-for="user in users">{{user}}</div> | ^^^^^^^^^^^^^^^^^^^^^ 3 | 4 |
- 해결됨Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
시작페이지가 궁금합니다
http://localhost/8080으로 했을 때 제일 처음 시작하는 파일명이 무엇인지 궁금합니다. 그리고 시작페이지 파일을 따로 변경도 가능한가요?
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
영상에서는 오류가 안나는데 제가 하니 오류가 나서 문의드립니다.
영상에서는 컴퓨티드 속성에 d이런식으로 해도 빨간줄이 안뜨는데 제가 헬퍼함수를 이용해서 그런지 빨간줄이 뜨면서 오류가 생깁니다 실제적으로 실행은 잘됩니다. es-lint에서만 오류를 잡아주는것같은데 이유가 뭔지 알수있을까요? 이거는 computed는 데이터를 가공해그컴포넌트에 해당 컴포넌트의 데이터를 가공하지않아서 이런 오류가 생기는건가요? 제가 말한 코드입니다. 오류 내용입니다. 그리고 methods 에 같은 로직을 넣어주면 오류가 안나는데 이렇게 했을때의 문제점이나 단점이있나요? computed를 이용하는 이유를 알고싶습니다이렇게 메서드로 할시 빨간줄도 안뜨고 실행이 잘됩니다.
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
apply of undefined 에러입니다
NewsView.vue에서 bus.$emit('start:spinner')을 입력하는 순간 'cannot read property 'apply' of undefined' 라고 뜨면서 에러가 발생합니다. 코드 흐름은 동영상 따라왔는데 갑자기 apply of undefined 에러가 발생하는데 무슨 문제일까요?
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
댓글남겼는데 메일이 계속와요....
댓글남긴이후로 메일 계속옵니다. 하루에도 몇개씩 ㅠㅠㅠ!!!! subscribe 도 안했는데 자꾸옵니다..... 이래저래 해봐도 계속오네요..ㅋㅋ 어떻게해야하나요
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
Vuex Store 관련 질문
안녕하세요, Vuex 스토어 강의를 보던 중 궁금한 사항이 있어 질문드립니다. 강의에서는 store에서 state를 jobs, ask, news 를 각각의 배열로 관리 하고 있는데, 코드의 중복을 줄이고자 아래와 같이 코드를 변경해봤습니다. https://github.com/kimc1905/vue-advanced/blob/dev/vue-news/src/store/index.js 코드를 간략하게 설명하자면 store에 item이름(news, jobs...)을 key로 하고 해당 피드들을 값으로 하는 Map을 state로 만들어 사용하는 형식입니다. 그런데 이렇게 사용하니 getters를 사용할 때 값을 재대로 가져오지 못하는 상황이 발생하였습니다. 크롬 개발자도구에서 확인하니 state에는 값이 잘 저장이 되었지만 getters에는 값이 undefined 였습니다. 그렇다면 store에 저장하는 값은 타입이 정해져있는건가요?
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
갑자기 vue cli가 작동을 하지 않습니다
기존에 하던방식대로 다운을 받았었고 vue-news와 vue-news3파일을 만들때 까지만해도 금방금방 다운받아졌는데 그 파일들을 지우고 새로 vue-news프로젝트를 생성하니 30분이 넘도록 다운이 안받아지고 아예 다운로드를 멈추는데 바뀐부분은 source control 에 알림이하나 뜬거 밖에 없는데 무슨 문제인지 모르겠습니다 도와주시면 감사하겠습니다
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
newsview나 askview에서 사용자를 눌렀을때
사용자를 눌러서 사용자 상세페이지로 갈때 마다 사용자의 데이터값이 바뀌는데.. 기존에 있던 사용자가 먼저보여졌다가 다른 사용자로 변경되는건...어쩔수 없는건가요??
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
axios
아래 처럼 요청을 변경 하니 오류가 나네요... 서버는 다 확인 했는데... Vue 에서 뭔가 해주는게 있나요? Access to XMLHttpRequest at 'http://xxxx:8080/?num1=201911&num2=4028&num3=' from origin 'http://localhost:8080' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://xxxx' that is not equal to the supplied origin.
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
mapGetters에 관해 질문드립니다.
mapGetters를 이용한 store 데이터 이용은 필수적인건가요? 저는 주로 mapState를 통해서 접근하고 사용하였습니다. 자바의 getter 개념초롬 직접적인 접근을 피하기 위해서 mapGetters를 써야하는 건지 질문드립니다.
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
오류 처리에 대해서 궁금합니다.
강의 잘 들었습니다. 도움이 많이 되었습니다. 궁금한 사항이 있는데, 보통 api나 web단에서 경우에 따라 오류가 발생할 수 있는데 오류 처리를 보통 vuejs 환경에서는 어떻게 하는지 궁금합니다. 전역적으로 처리하는 방법에 대해 대략적인 관례나 좋은 케이스가 있을까요?
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
HOC에서 ListView를 이용해 ListItem을 render하는 이유
안녕하세요, 강의 정말 잘 듣고 있습니다. CreateListView.js에서 render할때 , createElement(ListView) 가 아니라 createElement(ListItem)을 직접 리턴해도 될거 같은데요. ListItem.vue를 직접 참조하지 않고 ListView.vue를 통해 참조하는 이유가 있다면 설명 부탁드립니다. 감사합니다.
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
네비게이션 가드 질문...
1. 네비게이션 가드를 썼을때와 created 라이프 사이클 훅을 사용하였을때, 전자의 경우는 이전의 결과물이 안뜨는 반면, created를 사용하면 잠깐 동안 이전의 라우트에 있던 화면이 뜹니다. 하지만, transition을 없앤 상태라면 이전의 화면이 뜨지 않습니다. --> transition의 문제가 아닌가 생각이 듭니다... 2. 현재, 코드를 네비게이션 가드(spinner start)+ mounted 라이프 사이클 훅(spinner end) 방식과 네비게이션 가드에서 모든 것을 처리하는 것과의 차이가 제 경우에는 발생하지 않습니다.. 스피너가 꺼진 다음에 리스트를 불러옵니다. --> 이 차이는 어디서 오는 것일까요? 이전에 질문했었던 props로 내려주는것과 하위 컴포넌트에서 바로 접근할때의 차이가 아닐까 싶습니다. 그런데 잘 모르겠어서 질문드립니다. 3. 어떤 방식을 취해도 transition을 삽입하면 스피너가 꺼지고 나서 잠깐동안 화면이 보였다가 사라졌다가(fade효과가 들어갔다가) 다시 나타납니다. 자세히 분석을 해보니 앞에 잠시 뜨는 부분은 transition의 leave-active 부분이고 뒤에 뜨는 부분은 enter-active 부분입니다. leave-active 부분이 왜 라우트가 옮겨지고 실행이 되는 걸까요? 이 부분은 어떻게 수정이 가능할까요
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
spinner가 바로 꺼지는 이유
강의에서 axios 요청이 너무 빨라서 뜨지 않는다라고 설명해주셨는데, 이부분은이 잘못된거 같습니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then // using a resolved promise, the 'then' block will be triggered instantly, // but its handlers will be triggered asynchronously as demonstrated by the console.logs const resolvedProm = Promise.resolve(33); let thenProm = resolvedProm.then(value => { console.log("this gets called after the end of the main stack. the value received and returned is: " + value); return value; }); // instantly logging the value of thenProm console.log(thenProm); mdn의 설명을 보면, promise가 resolve 된 이후, then() 메서드 안의 핸들러는 비동기적으로 호출 된다고 설명하고 있습니다. (복사붙여 넣기를 하니 포맷이 이상해져서 읽기 불편한점 죄송합니다) 그래서 테스트를 해보았습니다. //views/NewsView.vue created() { bus.$emit("start:spinner"); // setTimeout(() => { // }, 3000); this.$store.dispatch("FETCH_NEWS") .then(result => { bus.$emit("end:spinner"); console.log("result"); console.log(result); return result; }) .catch(err => { console.error(err); }); } //store/actions.js export default { FETCH_NEWS(context) { fetchNewsList() .then(res => { context.commit('SET_NEWS', res.data); console.log('actions'); console.log(res); return res; }) .catch(err => { console.error(err); }); }, } //api/index.js function fetchNewsList() { console.log('api call'); return axios.get(`${config.baseUrl}news/1.json`); } 이렇게 하니 콘솔창에 api call result undefined actions { data: .... } //result 객체 아마도 핸들러를 바로 처리하지 않고, 함수의 끝에 다다르게 되어서 흐름이 newsview로 넘어간것 같습니다. 그래서 spinne가 도는 시간(api를 부르고 가져오는시간)이 없어서 그런거 같습니다. 오히려 actions가 확실하게 promise를 리턴하는 방식을 하기위해서 return fetchNewsList().then(...) 과 같은 방식을 취하니 조금의 시간 동안 스패너가 보입니다.
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
settimeout 질문 드립니다.
spinner 부분에서 settimeout으로 3초간 하고 dispatch() 콜을 하는데, 처음에는 스피너가 끝날때랑 거의 비슷하게 화면이 로드되는데, 그 이후에는 계속 스피너가 끝나지도 않았는데 화면이 로드가 됩니다. 네트워크 창을 봐도 json 파일이 도착하지도 않았는데, 화면이 로딩이 되더라구요... 이게 브라우저 자체에서 캐싱되어서 그런거 같은데 정확한 이유가 무엇인지 알 수 있을까요??
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
v-slot 과 관련해서..
공식문서를 읽다보니 name이 있는 slot의 경우에는 <template v-slot:name> </template> 과 같은 방식과 같이 디렉티브를 사용해야하고, 속성으로 slot을 쓰는 것은 deprecated되었다고 하는데... 따라하다보니 span 태그를 사용할 때려고 하는데, template 태그가 div 태그로 치환 되버리는 문제가 생기는데 어떻게 해야하죠?
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
영상에서의 방식 vs prop
실습 구현할 때, page 단에서 create()와 computed를 통해서 각각 dispatch를 하고 computed를 동해서 값을 받아 온다음에, prop으로 넘겨 주어 구현을 하였습니다. 영상에서의 방식의 경우에는 해당 컴포넌트를 사용하는 상위의 컴포넌트가 늘어날 때마다, 로직을 적어줘야한다는 단점이 있다고 저는 생각을 하고 있습니다... props로 하는 방법의 문제점은 무엇이고 무엇이 더 나은 방법인지 궁금해서 질문 남깁니다. p.s 설날 잘 보내세요
- 해결됨Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
안녕하세요~ import 질문입니닷
import UserProfile from '../components/UserProfile.vue'; import { mapGetters } from 'vuex'; 이두가지의 차이가 무엇이죠 하나는 {} 하나는 그냥 입력하는데 궁금합니다.
- 미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
.then({data}) 이렇게 쓰는것을 JS 문법에서 뭐라 하는 건가요?
감사합니다.