<template> <button @click="objChange">obj 바꾸기</button> </template> <script> import { reactive, ref, watch } from 'vue'; export default { setup() { const x = ref(0); let obj = reactive({ count: 0, message: 'hi', object: { num: 0 }, array: [1, 2, 3], ref: x, }); const objChange = () => { console.log(obj); obj = { a: 1 }; console.log(obj); }; watch(obj, (newValue, oldValue) => { console.log('newValue: ', newValue); console.log('oldValue: ', oldValue); }); return { x, obj, objChange }; }, }; </script>  버튼을 눌러서 obj 값을 {a : 1} 로 바꾸면 왜 watch 콜백함수가 실행이 안되나요? {a : 1}이 반응형 객체가 아니어도 처음에 바뀔때는 실행 될 거라고 생각했습니다혹시나 해서 obj를 반응형 객체로 바꿔도 watch 콜백함수가 실행이 안되는데 왜 변화를 인지 못 하나요?

강의를 새로 들을때마다 lite-server가 구동되지 않는데, 제가 git을 잘못 다루고 있는거 같습니다...강의 열릴때 visual스튜디오 코드 연다음에 git bash에다가git checkout -f 1-vanilla/scafoldingcd 1-vanillalite-server을 했거든요....! 어떻게 해야 이전 강의와 연결되서 lite-server구동할수 있을까요?

제작 후 npm run serve 하면 아래와 같은 경고문구가 계속 뜨는데 왜 이러는 걸까요??

npm install -g @vue/cli를 붙이면 아래처럼 많은 것이 뜨는데 왜 이럴까요ㅜㅜ??

몇번을 다시해보고 찾아봐도 이렇게만 나오는데 무엇이 문제일까요??ㅜㅜ 라우터랑 vue가 호환이 안되서 그렇다는데 이해가 하나도 되지 않습니다...

작업을 하다보니까 css 미디어 쿼리를 쓸 때도 있고 vuex 에서 window width를 저장해놓고 사이즈가 감지되면  v-if-else로 필요한 컴포넌트를 불러오는 방식을 동시에 쓰고 있습니다.  레이아웃이 크게 변하지 않는 부분은 미디어 쿼리로 해결하고너무 크게 변하는 부분은 v-if-else로 렌더링하고 있는데요 서서히 프로젝트가 커짐에 따라서 이게 나중에 유지보수가 가능할지 두렵네요    처음부터 PC/Mobile를 나눠서 따로 만들었어야 했나 싶다가도막상 또 그렇게 나누자니 레이아웃이 크게 안 바뀌는 부분도 제법 많아서 혼란에 빠졌습니다. 이와 관련해서 조언을 얻을 수 있을지 궁금합니다. 

watch를 회원가입, 비밀번호 확인 등의 값 검증에 사용하는건 어떤가요?

안녕하세요! 강의 듣던 중 궁금한 점이 생겨 질문 남깁니다. .vue 파일을 views 폴더 하위에 생성하는 경우와 components 폴더 아래에 생성하는 경우, import할 때 경로를 다르게 작성하는 것 외에는 아무런 차이가 없나요?   감사합니다.

안녕하세요. 우선 좋은 강의 감사합니다. 덕분에 2주만에 초급, 중급까지 완강해버렸습니다 ㅎㅎ 질문은 Vue.js로 개발할 때 강의처럼 간단한 로직을 만들면서 Vuex로 조금씩 변경하는지, 아니면 처음부터 Vuex를 적용해서 개발을 하시는지 궁금합니다. 물론 초기 설계에 따라 다르겠지만, 실무 경험자께서 실제로 겪어보신 것이 궁금하네요. 개인적으로 앞으로 회사에서 프론트엔드 개발할 일이 많은데 생각이 복잡합니다 ㅎㅎ 읽어주셔서 감사하며, 답변 기다리겠습니다!

안녕하세요! 캡틴판교님 :) 4/10 Live방송때 router-view관련해서 질문드리고 답변받았던 학생입니다! 다름이 아니라 캡틴판교님 말씀대로 오탈자와 router를 정의한 부분들(path나 component)을 살펴봤을 때 별 다른 문제는 없으나 아직 제대로 동작하지 않습니다.ㅠ 또한 캡틴판교 블로그의 '질문을 잘하는 개발자'글을 읽고 제가 처한 상황을 명확히 알려드려야 질문을 받는 입장에서도 편할거 같다고 생각해서 다시 질문드립니다! :) 1. 개발환경: 에디터는 VS코드를 사용하고 있고, npm으로 vue-cli를 설치해서 vue init webpack-simple로 프로젝트를 만들었으며, npm run dev를 통해서 개발하고 있는 내용을 확인하고 있습니다. 2. 문제상황: 싱글파일컴포넌트를 사용해서 컴포넌트들을 분리했으며, router에 관한 파일도 router.js로 따로 만들어서 main.js에서 import해서 사용했습니다. npm run dev를 통해서 실행시 console과 cmd창에서 모두 오류가 발생하지 않고 동작됩니다. 다만 App.vue의 template부분에 router-view를 통해서(5.참고) 나타내고 싶은 부분이 있는데 그 부분이 표시되지 않습니다.(7.참고) nav부분에서 router-link를 통해서 URL을 변경하는 부분을 구현했는데(6.참고) 해당 부분은 잘 동작됩니다. 실행된 웹에서 해당 버튼을 누르면 알맞게 URL이 /, /menu2, /menu3 ...으로 변경됩니다. (다만 Section컴포넌트가 뜨지 않는 것은 동일) 3. 다음은 router.js 내용입니다. 4. 다음은 main.js 내용입니다. 5. 다음은 App.vue 내용입니다. 6. 다음은 PlandNav.vue 내용입니다. 7. 다음은 실제로 동작하는 웹화면과 개발자도구에서 확인한 실제 렌더링 결과입니다. (footer내용은 가렸습니다!) 위의 사진과 같이 router-view를 통해서 나타내고 싶은 PlandSection1~4부분이 알맞게 렌더링되지 않고 <!---->로 표현됩니다 :( 혹시 제가 실수한 부분이나 발견하지 못한 오류가 있나요?? 제가 구글링하면서 찾은 제 문제와 가장 가깝다고 생각되는 문서입니다. https://stackoverflow.com/questions/60238731/vue-router-showing-blank-page-when-built https://router.vuejs.org/guide/essentials/history-mode.html