44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨Vue.js 시작하기 - Age of Vue.js
vue.js devtools 크롬 확장 프로그램
vue.js devtools를 잘 사용하고 있었는데요 어제부터 갑자기 이벤트 탭이 안 보여요 크롬 확장 프로그램 사이트에 가서 보니까 2022.02.12일에 업데이트를 했던데.. 이제 event 탭은 못 보는걸까요? components 부분을 클릭해 봐도 다른 탭들은 보이지가 않네요.. (확장 프로그램이 업데이트 된 거라 이런 질문을 해도 되는 건지 모르겠지만 도움을 요청할 곳이 여기밖에 없어 질문 드립니다.)
- 미해결Vue.js 시작하기 - Age of Vue.js
<RouterView> 클릭시 에러발생 합니다.
<Root> 하위 <RouterView> 을 클릭하면 아래와 같이 에러가 발생합니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
Vue.js devtools가 업데이트 된건지... 강의 속 화면하고 많이 달라졌어요. 제가 잘못된걸까요?
강의를 좀 드문드문 듣다 보니까요. Vue.js devtools가 업데이트 된건지... 강의 속 화면하고 많이 달라졌어요. 제가 잘못된걸까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
vue-cli 폴더 안에 public이 없고 node_modules, src 폴더 이렇게 2개만 있어요
안녕하세요? 기효님께서는 vue-cli 폴더 안에 public, node_modules, src 이렇게 3개의 폴더가 있으신데요 저는 public이라는 폴더는 없고 아래와 같이 node_modules와 src 폴더만 있습니다. 왜 그런걸까요? 제가 @vue/cli를 설치했더니 installed "@vue/cli@4.5.15" 라고 떴었어요 그런데 막상 vue --version을 해보면 2.9.6이 떠요 그래서 기효님처럼 vue create vue-cli가 아니라 vue init webpack-simple vue-cli를 했어요 그래서 그런걸까요? 그리고 vue-cli 4.x라는데 왜 2.x라는건지도 이해가 안 갑니다. 이유를 알려주실 수 있나요? 그리고 vue-CLI 4.x인 경우 vue init webpack-simple vue-cli 로 만드는거 맞나요? 답변 주시면 감사하겠습니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
cli설치가 안됩니다
node -v 는 v16.13.2 라고 뜨구요, npm -v 는 8.1.2 라고 뜹니다. 거기까지는 잘 따라 했는데요 다음에 CLI 를 설치하니까 선생님 화면처럼 뜨질 않고 설치가 안되는거 같습니다. 명령어를 실행하면 아래처럼 뜨는데 설치가 안되거 같아서요 에러가 날수 있도 sudo 를 붙이고 해도 아래처럼 뜹니다. ㅠㅠ
- 미해결Vue.js 시작하기 - Age of Vue.js
yarn.lock
Package.lock 대신 yarn.lock 인데 상관없나요?
- 미해결Vue.js 시작하기 - Age of Vue.js
vue
버전2로 설치했는데도 이렇게 뜨네요 왜이러나요?ㅠㅠ
- 미해결Vue.js 시작하기 - Age of Vue.js
component에 root가 안뜹니다
CDN방식으로 router를 script태그로 설치하고 영상에서 처럼 router와 instance를 연결하려고 합니다. 작년에 했을 땐, 영상처럼 $route 생성이 되었는데 router의 버전차이 인 것인지 옛날 버전으로 입력해야만 router가 연결되고 현재 공식링크에 있는 src주소로 등록하면 component가 뜨지 않는 현상이 발생합니다. 문법이 바뀐 것일까요? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router@4.0.5/dist/vue-router.global.js"></script> <title>Document</title> </head> <body> <div id="app"></div> <script> var router = VueRouter.createRouter({ }); new Vue({ el:'#app', router:router }); </script> </body> </html>
- 미해결Vue.js 시작하기 - Age of Vue.js
링크와 root
똑같이해보고 복붙도 해봤는데 링크도 걸리지않고 vue창에 root가 뜨지않아요ㅠㅠ 왜이런건가요?ㅠㅠ
- 미해결Vue.js 시작하기 - Age of Vue.js
컴포넌트 등록 한 키 이름에 작은 따옴표
안녕하세요 수업을 듣다보면(58강) 가끔 컴포넌트에 등록한 키이름에 작은 따옴표를 하는 경우가 보이는데요 왜 해야 하는지 궁금 합니다. 그냥 태그이름을 표현 할때 작은 따옴표로 표현하는거 같긴한데.. 이경우 말고도 그런 경우를 본것도 같은데 언제 사용 하는지 잘 모르겠더라구요! 알려주시면 감사하겠습니다. 그럼 좋은 하루되세요
- 미해결Vue.js 시작하기 - Age of Vue.js
computed-usage.html 질문
안녕하세요! computed-usage.html을 보고 질문이 있습니다. <p v-bind:class="warning">Hello</p>로 변경하면 warning이 red니까 빨간색으로 나와야하는 것 아닌가요? 그대로 검정색으로 나와서 질문드립니다..!
- 미해결Vue.js 시작하기 - Age of Vue.js
num값 증가시킬때 num++는 동작안하는건가요?
num값 증가시킬때 num++는 동작안하는건가요? this.num = this.num++; 로 작성하니 동작을 안하고 this.num = this.num+1;로 작성하니 동작하는데 차이가 무엇인지 알수있을까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
싱글 파일 컴포넌트 템플릿 관련 문의
강사님 안녕하세요. 초급 강좌를 잘 듣고있는 수강생입니다. 프로젝트 생성 도구 - Vue CLI '싱글 파일 컴포넌트 소개 및 여태까지 배운 내용 적용하는 방법' 강의에서 vetur 플러그인 설치를 통해 버전에 따라 scf, vu 명령어를 통해 기본 템플릿 적용이 가능하다고 말씀주셨습니다. 제 vsCode에서는 아래오 같이 나오고 싱글파일컴포넌트관련 템플릿이 나오지 않아 질문드립니다. 확인 부탁드립니다. vetur 버전의 경우 0.35 사용중 입니다. 감사합니다!
- 미해결Vue.js 시작하기 - Age of Vue.js
vue 명령어 인식 못하는 문제
안녕하세요, 강의 잘 듣고 있습니다. 좋은 강의 감사드립니다. npm install -g @vue/cli로 설치 후 화면은 다음과 같습니다. 그리고 vue --version을 입력하면 vue 명령어를 인식하지 못합니다. 반면에 node -v, npm -v는 인식을 합니다. node랑 npm 버전이 많이 바뀌어서 그런 것인지... 도움 부탁드립니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
MVVM 적용
좋은 강의 감사합니다! ^^ 끝장강좌까지 수강 후 전체 복습을 진행중입니다. MVVM패턴과 배운 것들을 연결해서 공부를 하고 있습니다. 뭔가 정확하게 이해가 되지 않아 질문 드립니다. 우선 제가 이해한 MVVM에서 View는 화면을 그려주고, ViewModel('value convert'라고 표현을 하던데)에서는 MVC나 MVP에서 Controller와 Presenter와는 다르게 값을 변경만 해주고 View에서 알아서 변경된 값을 (표현상)보고 있다가 화면을 바꿔준다. 그리고 Model은 비즈니스 로직과 데이터를 가지고 있다라고 이해했습니다. 질문 드리겠습니다. 1. template단에 있는 걸 View라고 생각하면 되는지? 2. 가장 헷갈리는 부분입니다. ViewModel에서 값을 바꿔주면, Model에서 하는 비즈니스로직이라는 건 어떤 걸 말하는지? 3. 2번과 중복될 수 있습니다. 그러면 computed, methods는 ViewModel인지 Model인지? 질문이 좀 긴 것 같습니다. 죄송합니다ㅠㅠ 당분간 계속 질문 드릴 것 같습니다 ㅠㅠ
- 미해결Vue.js 시작하기 - Age of Vue.js
component template 관련
안녕하세요 component에 template 항목으로 화면을 구성하는데 vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 이런 오류가 발생했습니다. 한 화면에 팝업창을 하나 띄우려고하는데 큰 기능이 없어서 단순 template으로만 구성하려고 했습니다. 화면 자체 코드는 아래와 같습니다. <template> <!-- 위쪽에는 일반적인 화면 구성 --> <h4>환불 신청 및 처리 내역</h4> <div class="pay_history"> <!-- 중략 --> </div> <!-- 팝업--> <popupStatus v-if="isModal" > </popupStatus> <!-- 팝업--> </template> <scripte> var mHtml = ` <div class="pop_body"> <table></table> </div>` export default { name: 'RefundHistory', components : { 'popupStatus' : { template : mHtml } , data() { return{ isModal : true, } }, } } </script> 스택오버플로우를 살펴보니 config.js에서 runtimeCompiler: true 로 바꾸면 된다고 하는데요.. 제가 사용하려던 템플릿이 non-precompiled Vue templates. 이라고 하는데요.. 왜 이런 오류가 발생하는건가요?? 컴포넌트의 템플릿을 procompile 시키는 방법이 따로 있는걸까요? (그게 뷰 config 를 수정하는 방식인건지?), 컨피그 파일 수정 없이 procompile 된 템플릿을 사용하는 방법이 따로 있는지도 궁금합니다 .
- 미해결Vue.js 시작하기 - Age of Vue.js
data 질문입니다
강사님 강의 너무 잘 보고 있습니다~! 계속 질문을 남겨서 제 닉네임이 익숙하실꺼 같네요 ㅎㅎ root가 이벤트를 받아야들어야 되니깐 data를 선언하는건가요? 10이라는 값을 전달 해야되니깐 content에서 이벤트를 발생시키고root가 이벤트 값을 받아야되니 data를 만든거고 그 data를 header로 prorps한다고 생각하면 될까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
components질문입니다
안녕하세요 강사님 강의를 다시 정주행 하면서 공부하는 학생입니다 컴포넌트를 정의한때 컴포넌트이름 : 컴포넌트 내용으로 정의하는데 컴포넌트의 내용은 객체로 정의하는 건가요? components: { 'app-footer' : { template:'<footer>footer~~</footer>' } 이런식으로 말고↓↓↓↓ components: { 'app-footer' : '<footer>footer~~</footer>' } 컴포넌트 내용을 이렇게 해도 상관없는 건가요? <div id="app"> <app-header v-bind:프롭스 속성 이름 :'상위 컴포넌트의 데이터 이름 '></app-header> ← 컴포넌트 태그 정의 </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var appHeader = { ← 컴포넌트 내용 등록 template: '<h1>Header</h1>' } new Vue({ el:'#app', components: { ← 컴포넌트 이름 정의 'app-header': appHeader }, data : { message:'hi' } }) 이렇게 생각하면 될까요?? 다시 들을니깐 애매하게 이해한 내용들이 많아서 물어볼께 왕창 쏟아지네요 ㅜㅜ
- 미해결Vue.js 시작하기 - Age of Vue.js
props로 data 값을 변경할수 있나요?
.안녕하세요. 캡틴판교님 영상 잘 수강하고 있는 학생입니다. props 영상을 보면서 props 값을 내린 것 까지는 이해가 되었는데요. 그 값을 단순히 하위 컴포넌트에 출력하는 것이 아니라 응용해서 그 값을 data() 안에 값을 변경하고 싶은데 그게 가능할까요? 예를 들어 하위 컴포넌트에 data(){ return{ showArea: false; } 라는 것이 있다면 false를 true로 변경 하고 싶습니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
vue-router 등록 조건(전역-컴포넌트만 등록 가능하다)?
안녕하세요, 강사님 vue-router 옵션 내부적으로 component를 등록할 때, 지역 컴포넌트로 등록된 컴포넌트는 라우팅 되지 않는 걸 확인하였습니다. 해당 사진은 공식문서를 캡쳐한 이미지인데요, this.appHeader 가 아니더라도 단순히 지역 컴포넌트가 선언된 위치를 찾아내서 연결만 시켜주면 되지 않을까 하는 생각이 있었는데 잘 안되더라구요, 그냥 전역 컴포넌트나 싱글파일 컴포넌트 체계에서 라우팅 가능하다 정도로만 이해하면 될까요? 원하는 답변을 얻지 못해 질문합니다! routes: [ { path: '/header', component: this.appHeader, }, ], new Vue({ el: '#app', router, components: { appHeader: { template: '<header>app header</header>', }, }, }); 참고한 질문