Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

갑자기 vue cli가 작동을 하지 않습니다 이창환 1일 전

기존에 하던방식대로 다운을 받았었고 vue-news와 vue-news3파일을 만들때 까지만해도 금방금방 다운받아졌는데 

그 파일들을 지우고 새로 vue-news프로젝트를 생성하니 

30분이 넘도록 다운이 안받아지고 아예 다운로드를 멈추는데 

바뀐부분은 source control 에 알림이하나 뜬거 밖에 없는데 무슨 문제인지 모르겠습니다 도와주시면 감사하겠습니다

newsview나 askview에서 사용자를 눌렀을때 career87 6일 전

사용자를 눌러서 사용자 상세페이지로 갈때 마다 사용자의 데이터값이 바뀌는데..

기존에 있던 사용자가 먼저보여졌다가 다른 사용자로 변경되는건...어쩔수 없는건가요??

axios 달마다서쪽 7일 전

아래 처럼 요청을 변경 하니 오류가 나네요... 서버는 다 확인 했는데... 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.

mapGetters에 관해 질문드립니다. jinhyun0504 7일 전

mapGetters를 이용한 store 데이터 이용은 필수적인건가요? 저는 주로 mapState를 통해서 접근하고 사용하였습니다.

자바의 getter 개념초롬 직접적인 접근을 피하기 위해서 mapGetters를 써야하는 건지 질문드립니다.

오류 처리에 대해서 궁금합니다. Hyunchul Ma 13일 전

강의 잘 들었습니다. 도움이 많이 되었습니다.

궁금한 사항이 있는데, 보통 api나 web단에서 경우에 따라 오류가 발생할 수 있는데

오류 처리를 보통 vuejs 환경에서는 어떻게 하는지 궁금합니다.

전역적으로 처리하는 방법에 대해 대략적인 관례나 좋은 케이스가 있을까요?

HOC에서 ListView를 이용해 ListItem을 render하는 이유 조성규 20일 전

안녕하세요, 강의 정말 잘 듣고 있습니다.

CreateListView.js에서 render할때 ,

createElement(ListView) 가 아니라 createElement(ListItem)을

직접 리턴해도 될거 같은데요.

ListItem.vue를 직접 참조하지 않고 ListView.vue를 통해 참조하는

이유가 있다면 설명 부탁드립니다.

감사합니다.

네비게이션 가드 질문... pius712 20일 전

1. 네비게이션 가드를 썼을때와 created 라이프 사이클 훅을 사용하였을때, 전자의 경우는 이전의 결과물이 안뜨는 반면, created를 사용하면 잠깐 동안 이전의 라우트에 있던 화면이 뜹니다. 하지만, transition을 없앤 상태라면 이전의 화면이 뜨지 않습니다. 
--> transition의 문제가 아닌가 생각이 듭니다... 

2. 현재, 코드를 네비게이션 가드(spinner start)+ mounted 라이프 사이클 훅(spinner end) 방식과 네비게이션 가드에서 모든 것을 처리하는 것과의 차이가 제 경우에는 발생하지 않습니다.. 스피너가 꺼진 다음에 리스트를 불러옵니다. 
--> 이 차이는 어디서 오는 것일까요? 이전에 질문했었던 props로 내려주는것과 하위 컴포넌트에서 바로 접근할때의 차이가 아닐까 싶습니다. 그런데 잘 모르겠어서 질문드립니다. 

3. 어떤 방식을 취해도 transition을 삽입하면 스피너가 꺼지고 나서 잠깐동안 화면이 보였다가 사라졌다가(fade효과가 들어갔다가) 다시 나타납니다.  자세히 분석을 해보니 앞에 잠시 뜨는 부분은 transition의 leave-active 부분이고 뒤에 뜨는 부분은 enter-active 부분입니다. leave-active 부분이  왜 라우트가 옮겨지고 실행이 되는 걸까요? 이 부분은 어떻게 수정이 가능할까요

spinner가 바로 꺼지는 이유 pius712 23일 전

강의에서 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`);
}

settimeout 질문 드립니다. pius712 23일 전

spinner 부분에서 settimeout으로 3초간 하고 dispatch() 콜을 하는데, 처음에는 스피너가 끝날때랑 거의 비슷하게 화면이 로드되는데, 그 이후에는 계속 스피너가 끝나지도 않았는데 화면이 로드가 됩니다. 

네트워크 창을 봐도 json 파일이 도착하지도 않았는데, 화면이 로딩이 되더라구요... 이게 브라우저 자체에서 캐싱되어서 그런거 같은데 정확한 이유가 무엇인지 알 수 있을까요??

v-slot 과 관련해서.. pius712 23일 전

공식문서를 읽다보니 name이 있는 slot의 경우에는

  <template v-slot:name>

  </template>

과 같은 방식과 같이 디렉티브를 사용해야하고, 속성으로 slot을 쓰는 것은 deprecated되었다고 하는데... 따라하다보니 span 태그를 사용할 때려고 하는데, template 태그가 div 태그로 치환 되버리는 문제가 생기는데 어떻게 해야하죠?

영상에서의 방식 vs prop pius712 24일 전

실습 구현할 때, page 단에서 create()와 computed를 통해서 각각 dispatch를 하고 computed를 동해서 값을 받아 온다음에, prop으로 넘겨 주어  구현을 하였습니다. 
영상에서의 방식의 경우에는 해당 컴포넌트를 사용하는 상위의 컴포넌트가 늘어날 때마다, 로직을 적어줘야한다는 단점이 있다고 저는 생각을 하고 있습니다... props로 하는 방법의 문제점은 무엇이고 무엇이 더 나은 방법인지 궁금해서 질문 남깁니다. 
p.s 설날 잘 보내세요

안녕하세요~ import 질문입니닷 전지용 27일 전

.then({data}) 이렇게 쓰는것을 JS 문법에서 뭐라 하는 건가요? 황인규 1달 전

감사합니다.

await 이후 동작 원리 Aredra 1달 전

 캡틴판교님 안녕하세요.

먼저, 좋은 강의를 해주셔서 감사합니다.

다름이 아니라 이번 강의 수강 중 async/await 관련하여 문의가 있어 질문글을 남깁니다.

위와 같은 코드에서 await에서 기다리지 않고 콘솔로그를 찍는다고 강의에서 말씀하셨는데 안 기다리고 갈 경우 res.data는 undefined여서 실행이 안되는 것 같았는데 강의에서 동작하는 것을 보면 기다렸다가 진행되는 것처럼 보여 질문을 드립니다.

gist에 계정 확인부탁드립니다. abmw.corp 1달 전

gist에 계정 남겼습니다.

확인 부탁드립니다.