Vue 3 시작하기대시보드

선생님 강의 들으면서 따라하고 있습니다강의랑 똑같이 타이핑하면서 공부하고 있는데 왜 타임라인에서 이벤트 호출이 안되는지 이유를 모르겠어서 질문 남깁니다! 확인 부탁드립니다...!

강사님 강의 잘 듣고 있습니다!다음 강의를 들으려고 하는데요Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex이 강의는 이제 쿠폰이 제공되지 않는건가요? 양식을 기입했는데 쿠폰이 모두 소진됐다고 떠서요!

섹션 3. Vue.js 컴포넌트 - Vue Component 통신방식에서 뷰는 항상 단방향으로(부모 -> 자식 = props, 자식 => 부모 = emit)으로 흐른다고 하셨는데요.예를들어 A아래 B,C 컴포넌트가 있고, C 화면에 있는 버튼을 클릭하면 B에 어떤 액션이 일어나야한다고 하면 아래와 같이 설계하는게 맞는것인가 궁금합니다.B->A emit 이벤트 발생A에서 B로부터 전달받은 이벤트 핸들링으로 C에 내리고있는 toggle형 props 값 업데이트C에서 A에서 내린 props를 watch하고 있다가 값이 변경되면 액션 수행제가 구상한 방식이 위와같은데 이게 최선인지 궁금합니다..다른 좋은 방법이 있다면 조언 부탁드립니다.

component events에서 refresh log가 보이지 않습니다.component의 event listners에서 refresh: not declared인 것이 문제일까요?코드도 함께 첨부합니다. 

강사님꺼에선 refresh라는 로그가 보이는데 제꺼에선 안보이네요ㅠㅠ 4layers라는 검정색 동그라미 버튼 누르니까 log가 찍히는건 다른 레이어에서 확인했으나 mouse에서만 보이지 componet events에서는 나오지 않습니다ㅠㅠ 새로고침 이라고 뜨는 것 보면 잘은 나오는 것 같은데...이 부분 어떻게 해야 해당 refresh log를 볼 수 있을 지 궁금합니다! 코드는 강사님과 똑같히 했다고 생각하는데, 우선 첨부합니다!<div id = "app"> <!-- <app-contents v-on:이벤트이름 = "상위 컴포넌트의 메서드 이름"></app-contents> --> <app-contents v-on:refresh = "showAlert"></app-contents> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> var appContents={ template:` <p> <button v-on:click = "sendEvent">갱신</button> </p> `, methods:{ sendEvent(){ this.$emit('refresh'); } } } //root 컴포넌트 Vue.createApp({ methods:{ showAlert(){ alert('새로고침'); } }, components:{ //'컴포넌트 이름' : 컴포넌트 내용 'app-contents':appContents } }).mount('#app'); </script> 

target[prop] = newValue; 를 하지 않고 render(newValue)를 해도 값이 바껴서 출력되는걸 확인할 수 있는데, target[prop]에 newValue 값을 넣어주는 이유가 있을까요?

vue3 event emit 부분에서 동일한 코드로 작성했는데갱신버튼을 눌러도 Vue 개발자도구에서 event가 발생됐다는 refresh log가 뜨질 않습니다. 실행자체는 되는 걸 확인했는데 log가 보이지 않는 이유가 뭔가요?아래는 전체 코드입니다. <!--HTML--> <div id="app"> <app-contents></app-contents> </div> <!--JavaScript--> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> var appContents= { template: ` <p> <button v-on:click="sendEvent">갱신</button> </p> `, methods :{ sendEvent(){ this.$emit('refresh') } } } Vue.createApp({ components: { //'컴포넌트 이름' : 컴포넌트 내용 'app-contents': appContents } }).mount('#app'); </script>

터미널에서 기본으로 powershell이 설정되어 있는데node -v 나 npm 명령어도 잘 실행됩니다.그런데 이를 사용말고 cmder을 사용하라는 이유가 뭔가요?

부모와 자식 컴포넌트간의 데이터 교환에 있어부모 -> 자식 : props자식 -> 부모 : emit이라는건 어느정도 개념이 잡힌 것 같습니다. 근데, 좀 더 찾아보니 부모자식 컴포넌트 사이에도 model을 지정해서 양방향 바인딩이 가능하다는 예제를 본 것 같습니다. model을 사용하여 props & emit을 대체한다면 복잡한 코드가 좀 더 나아질것 같은데 defineModel을 사용하지 않는 이유가 따로 있는것일까요? 

파일이름을 소문자로 시작해서 하는건 상관없는건가요?그리고 컴포넌트를 가져올때 상대경로로 보통 가져오신다고했는데 다른폴더에있는 컴포넌트를 가져올때 ../ 이런식으로도 찾는게 맞나요?

v-if의 경우 dom이 그려지거나 그려지지 않거나 하고,v-show의 경우 css display:none 차이가 있는데 사용자 입장에서는 동일한 결과인데..어떤 경우에 어떤 것을 사용하는 것이 좋을까요?

vue3 강의를 듣고 맘에 들어서vuejs 중급강좌 학생할인을 신청했는데쿠폰번호 쿠폰오류가 뜹니다 ㅠㅠ어떻게 해야 학생할인을 받을 수 있을까요? 

안녕하세요. 클래스와 아이디 바인딩 관련 문의드립니다.기존에 html문법으로 사용하는 class, id가 있는데데이터 바인딩을 통해서 사용하는 이유가 있을까요?

<script src=”https://unpkg.com/vue@3/dist/vue.global.js”></script> <div id="app"> {{ message }} </div> <script> Vue.createApp({ data() { return { message: 'hi' } } }).mount('#app'); </script>강의에 나온대로 쳐서 live server로 실행하니 오류가 나옵니다. 화면은 {{ message }}로 나오는데 script를 인식 못하는걸까요??

깃허브로 제공해주신 learn-vue-js 소스를 다운받으니수업내용이 이미 다있는데, 부분적으로 지우고 진행 하면 될까요?

안녕하세요vue3로 시작해서 열심히 교육 듣다가 이벤트 버스에서 막혔습니다.아직 vue가 초보라 구글링 보면서 이방법 저방법 해보다 잘 안되서 결구 mitt를 사용해서 해결했습니다. 우선npm install --save mitt로 mitt 설치했고 main.js에 mitt 세팅해주고NewsView.vue에서 이벤트 보내주고App.vue에서 받아서 처리하는 방법을 썻습니다.일단 잘 되는거 같아 다행인데요 질문이 좀 있습니다.질문1혹시 더 좋은 방법이 있었으면 알려주셨으면 합니다.위에 소스에서 잘못사용한거 같은 부분도 좀 알려주셨으면 합니다. 질문2첨에 NewsView.vue에서 $emit으로 start,stop 보내고App.vue에서 NewsView를 import하고 템플릿에 NewsView 세팅해주고 @이벤트명="aaa"로 받아서 methods에서aaa() {} 안에 처리하려고 했습니다.그런데 첨에 페이지 들어갈때는 되는데 페이지 이동하면$ emit가 실행이 안되네요 emit 위아래는 console.log가 찍히는데 왜 app.vue로 emit이 왜 안가는걸까요?=================================<<NewsView.vue>>this.$emit('eventBus', 'start');this.$store.dispatch('FETCH_NEWS');this.$emit('eventBus', 'stop'); <<App.vue>><template><news-view @eventBus="lodings"><news-view></template>import NewsView from './views/NewsView.vue'methods: {lodings(event) {if(event === 'start') {this.startSpinner();}else if(event === 'stop') {this.endSpinner();}}};=================대충 이런느낌으로============     질문3두번째로 this.$store.dispatch를 사용해서 처리해보려고 했습니다.NewsView.vue 화면에서this.$store.dispatch('EVENT_BUS_START');this.$store.dispatch('FETCH_NEWS');this.$store.dispatch('EVENT_BUS_STOP');이런식으로 처리해서 index.js에서 세팅한 eventBus값을 바꿔서 app.vue에서 $store.start.eventBus값을 불러서 처리하려고 했는데 stop만 인식하더군요NewsView.vue 화면에서 다 처리된값만 인식하는 걸까요?일단 질문드리지만 뭔가 설명을 잘 못적겠네요소스를 지워서 사진으로 보여드릴수 없지만 질문 이해되시면답장좀 부탁드립니다.

무한 로딩상태에서 진전이 없어요~확인부탁드립니다.

Cmder은 윈도우 환경을 위한 툴로 알고 있는데 맥 환경에서는 어떤 툴을 사용하는게 좋을까요? 추천하실만한 툴이 있으실까요? 감사합니다.

궁금합니다!

안녕하세요.동일 레벨 컴포넌트간에 데이터를 주고 받는 방법에 대해 레벨1 -루트레벨2 - 컴포넌트a, 컴포넌트b인경우컴포넌트a -> 루트 -> 컴포넌트b 라고 수업내용에서 배웠습니다.그렇다면 계층이 더 깊은 경우는 어떻게 되나요?예를 들어 컴포넌트 구조가 레벨1 -루트레벨2 - 컴포넌트a-1, 컴포넌트b-1레벨3 - 컴포넌트a-2, 컴포넌트b-2인경우 (트리구조 비슷한?)컴포넌트 a-2에서 b-2로 전달하려면 컴포넌트a-2 -> 컴포넌트a-1 -> 루트 -> 컴포넌트b-1 -> 컴포넌트b-2 이런식으로 루트를 통해야 되나요? 그리고 a-2옆에 같은 레벨의 a-3이 있다면,이또한 루트까지 데이터를 올린다음 내려 받아야 할까요? 이런 느낌입니다.