다름은 아니고 vue2.7 버젼을 사용하고 있습니다. 오늘 실무에서 업무를 진행하다. 한가지 의구심이 들어서 질문을 여쭈고자 합니다.부모 에서 ref 반응형 데이터가 존재하는데 이 반응형 데이터를 바로 아래 자식으로 props를 넘겨주었고 이 넘긴 props를 watch를 사용해서 변화가 있을때 어떤 로직을 처리하겠다.로 구현을 했습니다. 구현과정에서 컴포넌트를 나눌 필요가 생겨서 자식안에 자식을 하나 더 만들고 최상위 부모로 부터 받은 props를 그 최하위 자식에게 전달 후 최하위 자식에서 watch를 통해 어떤 로직을 처리하겠다. 로 구현을 했을때 최하위 자식에서 watch가 정상적으로 props의 변화를 인지 하지 못하는 이슈가 있었습니다. 하지만 해당 props값을 렌더링 했을때는 최하위 자식에서도 정상적으로 변했습니다. 결국 최하위 자식에서 deep과 immediate 옵션을 설정해 해결했는데 왜 이런식으로 동작했는지 검색을해도 나오지 않아서 궁금해서 여쭙고자 합니다. 여기서 ref 데이터 타입은 object이고 초기값은 null 입니다. 추가적으로 최하위 자식은 항상 렌더링 되는것이 아닌 v-if v-else가 걸려있습니다.

main.jsimport VueLoading from 'vue-loading-overlay' import 'vue-loading-overlay/dist/css/index.css' app.use(VueLoading)LoadingOverlayView.vue<template> <div> <button @click="doSearch">조회</button> </div> </template> <script> export default { components: {}, data() { return { sampleData: '' } }, setup() {}, created() {}, mounted() {}, unmounted() {}, methods: { doSearch() { const loader = this.$loading.show() // simulate AJAX setTimeout(() => { loader.hide() }, 5000) } } } </script> 오류내용Cannot read properties of undefined (reading 'show') TypeError: Cannot read properties of undefined (reading 'show') at Proxy.doSearch (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/9_module/LoadingOverlayView.vue?vue&type=script&lang=js:15:36) at onClick._cache.<computed>._cache.<computed> (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/9_module/LoadingOverlayView.vue?vue&type=template&id=ce3ceda8:9:83) at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:351:19) at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:358:17) at HTMLButtonElement.invoker (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:883:82)무엇 때문에 발생하는 오류일까요?

(사진)

 vue cli 생성 부분에서,npm install -g @vue/cli 하고vue create vue-cli2 로 생성하였습니다.깃허브에서 받은 소스에 이미 vue-cli 폴더가 있어서 저는 vue-cli2로 생성하였습니다. 근데 생성되는 진행과정을 보면, 강좌에서는 yarn install ... 이렇게 뜨던데요.그래서 실행도 yarn serve 로 하구요.. 그런데 저는 npm install ... 이걸로 되던데요. 실행도 npm run serve 로 해야하구요. 제가 강의 중간 어디서 yarn 설정에 관한 부분을 놓친 걸까요?

img url 기한만료로 깨져서 나올 때backend 폴더의 db.json 이미지 주소를 변경하시면 정상적으로 출력됩니다. 인덱스 0은 어떤 이유에서인지는 모르나 가져오지 못하기 때문에 30번을 추가하면 됩니다.아래 코드로 db imageUrl을 전체 수정하시면 됩니다."imageUrl": "https://picsum.photos/640/480"localhost 액세스 거부맥북인 경우에 종종 생기는 일인 거 같은데 크롬에서 잘 되다가도 안되면 포트를 5000에서 4000으로 바꾸고 실행하시거나다른 브라우저를 이용해서 진행하시면 됩니다.

마지막 Nuxt Configuration 강의가 남아 있지만 궁금해서 질문을 던집니다. 주로 fetch를 이용해서 API 통신을 하는데 axios는 이제 앞으로 사용하지 않는 추세인가요?아니면 fetch 대신에 axios를 사용하는 것도 좋은 방법인가요?아직은 잘 몰라서 질문이 틀릴 수도 있는 점 이해주시면 감사드립니다.

마지막 8챕터는 재생되지 않네요~수강완료 되지 않습니다 확인해주세요~

안녕하세요이번에 nuxt로 프로젝트를 진행하고있습니다. 강의에는 없지만 교안에는 Authentication API Advanced 해당 부분이 있어 보고있는데, 여기서 jsonwebtoken 을 npm으로 설치를 하고, 해당 jwt를 import하면 500util.inherits is not a function이런 오류가 뜹니다. jsonwebtoken 버전을 다운그레이드해서 설치해도 동일한 문제가 발생하는데,어떻게 해야할까요?

글 작성시 UI가 변경되는 원인이 이해가 가지 않습니다. 뒤에 UI 변경 문제를 해결 하는 과정은 이해를 했는데 그래서 UI가 왜 변경 되었는지에 대한 이유가 뭔지 모르겠습니다 ㅠㅜㅠㅜ

강의대로 따라서 코딩하였고이런 에러가 뜨길래 구글링 하였지만,emits를 선언 하라는 자료는 있긴 했습니다하지만 click 이벤트 선언이 안되어서 문제가 되는 경우는 안보이더라구요// PostListView.vue <PostItem :title="item.title" :content="item.content" :created-at="item.createdAt" @click="goPage(item.id)" @modal="openModal(item)" ></PostItem>저기 문제되고 있는 @click 이벤트를// PostItem.vue defineEmits(['modal', 'click'])이렇게 선언 하니까 경고가 사라지긴 했습니다 혹시 강의에 이 에러에 대한 내용이 있었나요?제가 놓친 것이 있나 싶어 글 올립니다추가)오늘 확인해보니 그냥 클릭 자체가 안되네요emits에서 'click' 을 지워도, 남겨도 post 카드 하나를 클릭 했을 때 상세 페이지로 넘어가지 않네요

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.vscode에서 volar라는 확장 프로그램이 검색 되지 않는데어떻게 해야하나요reset.css, style.css 같은 전역적으로 사용하는 css 들은 어떻게 연결 시켜주는 게 좋을까요?devtools에서 컴포넌트가 안나오는데 어떻게 확인해야 할까요?? run시키면 http://localhost:5173/__devtools__/ 가 실행되고 그쪽에서만 확인이 가능합니다.강의를 듣고 사이트를 전반적으로 구축을 해야하는데 구조나 전체적으로 레퍼런스 삼을 수 있는 사이트가 있을까요 ㅠ?vue 공홈에 있는 사이트들은 devtools로 접근이 안되더라구요..미리 답변 감사합니다 ㅠㅠ

계속 이렇게 나오네요. 확인좀 부탁드립니다.

안녕하세요. 수업 정말 재밌게 잘 듣고 있습니다.근데 듣다 보니 App.vue가 점점 왜소해지네요.앞으로는 store가 데이터 저장과 중앙 처리 역할을 모두 수행하는 것 같은데 App.vue가 있어야 할 이유는 무엇일까요?궁금하여 질문 남깁니다.

사진을 보니 이렇게 되있던데, 잘 되있더라구요!3-component 브랜치를 만들면, 해당 위치에서3-component/... 이렇게 만들 수 없더라구요. 강제로 만든건지?(강제 브랜치 생성 명령어)TabComponent같은 브랜치를 파서 작업한 다음, PR을 올려서 머지 시키면 자동으로 저렇게 바뀌는 건지?답변 부탁드립니다.

안녕하세요../server/api/error.ts를 다음과 같이 구성하였습니다.export default eventHandler(() => { throw createError({ statusCode: 404, statusMessage: '페이지를 찾을 수 없습니다.', }); });그리고 강의에서와 같이 http://localhost:3000/api/error 요청하면 json으로 요청이 되지 않고 다음과 같이 html 화면만 출력이 됩니다. 해당 요류를 어떻게 해결할 수 있을까요.감사합니다.

안녕하세요.강의를 수강하면서 Plugins 부분에 대해서 질문이 생겨서 글을 작성했습니다.강의를 따라하다 보니 hello.ts를 교안과 같이 작성하였고, index.d.ts와 app.vue도 동일하게 구성하였는데 다음과 같은 오류가 발생하고 있습니다.(course.vue에서 $hello를 사용하는 부분 - 기능은 동작하고 있음)[vue-tsc] Property '$hello' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { courses: typeof courses; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 12 more ..., {}>'.혹시 이러한 오류가 발생하였을 때 어떻게 해결해야 할 지 궁금합니다.(추가+ index.d.ts의 타입 선언 부분의 주석을 해제하면 오류가 사라집니다.)hello.tsexport default defineNuxtPlugin(() => { return { provide: { hello: (msg: string) => `Hello ${msg}!`, }, }; });강의를 너무 잘 수강하고 있습니다. 감사합니다.

강사님..혹시 화면을 좀 줄여 주실수 있을까요?전체적인 코드라 할까? ...좀 뒤에서 보고 싶네요... (매우 답답해서요)주위 코드도 안보이고... 방법 없을까요? (녹화를 다시 하시기도 뭐하고..ㅠㅠ)

template lang=""> <ItemList></ItemList> {{ users[0] }} </template> <script lang="ts"> import ItemList from '../components/lists/ItemList.vue' import {fetchNewsList, User} from '../api/news' export default { data() { return { users: [] as User[] } },vue3에 타입스크립트 적용해서 하는 중입니다.위 코드처럼 interface 만들어서 타입을 사용해보고 있는데{{ users[0] }}에 .id .title 등 ide에서 제공되는 타입추론이 안됩니다. vue는 방법이 없을까요??

섹션 1. 최신 버전 현행화 가이드 영상이 정상적으로 Play가 안됩니다.

vue peek 설치 없이는 컴포넌트 위에 컨트롤 마우스로 올려놔도 링크 생성이 안되네요..