44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 시작하기 - Age of Vue.js
router 새로고침
rotuer - 새로고침 하는법 알려주세요?
- 미해결Vue.js 시작하기 - Age of Vue.js
vue3이상에서 router 설정 과정
안녕하세요 판교님, 강의에는 없지만 vue3이상에서 index.js에 router 설정에서 createWebHistory가 url에 #을 지우는 역할인 것은 알겠는데 process.env.BASE_URL의 역할이 궁금합니다. 답변해주시면 감사하겠습니다. const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes:[ ...
- 미해결Vue.js 시작하기 - Age of Vue.js
vue 라이프사이클 문의 드립니다
책을 참고하면서 강의를 추가로 듣고 있는데, 책에는 라이프 사이클 관련된 내용이 있는데 인터넷 강의에는 별도로 없는 것 같아서 혹시 라이프사이클에 관련된 강의가 있거나 참고할 수 있는 사이트 등 알 수 있을까요??
- 미해결Vue.js 시작하기 - Age of Vue.js
a.vue 생성하실때 template 태그에 문제가 발생할 경우
jsconfig.json 파일에서 아래의 밑줄친 것과 같이 타이핑 해주시면 오류가 해결됩니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
개발환경설정에서
마우스 오른쪽 버튼 클릭 후 live server로 창을 띄운다음에 검사를 들어가고,..,., 저는 Vue라는것이 안보입니다. 플러그인설치 : vetur , material icon , night owl , live server 이와같이 했는데 안되는 이유가 뭘까요.,.,
- 미해결Vue.js 시작하기 - Age of Vue.js
V-calendar api 질문드립니다!
안녕하세요 좋은 강의 감사합니다! 제가 2주전부터 v-calendar를 통해서 달력 만들기 작업을 하고있는데요 생성은 그냥 v-calendar 인스톨하고 테그 불러오면되는데 다음 2가지가 동작하지를 않습니다. 1.클릭한날짜의 배경을 파란색으로 하이라이트 해주고싶은데 인터넷에 있는 어떤 소스를 갖다써도 1도 변함이없습니다 ->동료분은 api 해제코드 입력하고 고치는 경우도 있다는데 v-calendar의 해제코드가 있나요 아니면 다른 방법이있을까요? 2. 주말 및 공휴일 등의 날자를 선택하지 못하도록 하고싶습니다 disabled 같은거를 넣고싶은데 혹시 그런기능은 어떻게 구현해야할까요 이것도 api해제코드가 필요할까요? 스승님의 도움을 구합니다 ㅠ
- 미해결Vue.js 시작하기 - Age of Vue.js
vue와 router cdn 사용시 에러
안녕하세요 vue랑 router cdn으로 사용하고있는데 계속 버전이 업데이트되어서 그런지 에러가 나네요. vue, router 이 주소로 끌어오고있고, 에러는 router.html:15 Uncaught TypeError: VueRouter is not a constructor <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router@4"></script> 구글링해보니.. vue버전 낮추래서 2.6.12로 낮췃는데, 그럼 또 다른에러가 생기더라구요... Uncaught TypeError: vue.defineComponent is not a function
- 미해결Vue.js 시작하기 - Age of Vue.js
vue 설치후에 vue --version 실행 시 아래와 같은 메시지가 뜹니다.
https://www.inflearn.com/questions/409418 질문자분이랑 같은 이슈가 발생해서 질문글 올립니다. 선생님께서 답변해주신, cmder 에뮬레이터(http://cmder.net/) 다운 받으려고 해당 사이트 방문하니 expired 되었다고 뜹니다 ㅜㅜ 송태양님과 동일한 이슈 입니다. vue 설치까지는 되는데, vue --version으로 확인하려고 하면 cmd에서는 'vue'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. VS Code내에서는 아래처럼 메시지가 발생합니다. 혹시 또 다른 해결방법이 있을지 문의드립니다. 강의에서 쓰는 버전으로도 해보고, 최신 버전으로도 설치해봐도 동일하네요.ㅜㅜ 구글링 하면서 하루종일 이것저것 해봐도 해결이 되지 않아 여쭤봅니다. (시스템 변수(path)설정.. vue버전, node버전 확인 등등) 확인부탁드립니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
vue cli v5.x 은
안녕하세요. vue cli를 설치하려고 보니 전 5점대인데요. 선택은 뭐로 해야 하나요?
- 미해결Vue.js 시작하기 - Age of Vue.js
vue.js로 만든 결과물을 github pages를 이용해 배포하는 방법을 알고 싶습니다.
안녕하세요 강사님^^ vue.js로 만든 결과물을 github pages를 이용해 배포하는 방법을 알고 싶습니다. 구글링 통해 습득한 방법으로 배포를 진행해보니, 라우터를 걸었던 것들은 모두 페이지 이동시 404에러가 발생하네요;;; 많은 학생들이 곤란에 빠져 있는 것 같은데, 해결방안 안내 꼭 부탁드립니다 ㅠㅠ
- 미해결Vue.js 시작하기 - Age of Vue.js
VSCode 오류 : "이 시스템에서 스크립트를 실행할 수 없으므로 ..." <-- 오류 해결
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. https://hellcoding.tistory.com/entry/VSCode-%EC%98%A4%EB%A5%98-%EC%9D%B4-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%A0-%EC%88%98-%EC%97%86%EC%9C%BC%EB%AF%80%EB%A1%9C 아래에 다른분도 링크남겨주셨는데 명령어 복사가 안돼서.. 똑같은 해결방법으로 스크립트 실행안되는 오류 잡는 링크 공유드립니다
- 미해결Vue.js 시작하기 - Age of Vue.js
[컴포넌트-컴포넌트와 인스턴스의 관계]root가 생성되지 않습니다
*빨간 부분 코드 먼저 봐주세요 <!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"> <title>Document</title> </head> <body> <div id="app"> <app-header></app-header> <app-content></app-content> <app-footer></app-footer> </div> <div id="app2"> <app-header></app-header> <app-footer></app-footer> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> //전역 컴포넌트 Vue.component('app-header', { template:'<h1>Header</h1>' }); Vue.component('app-content',{ template:' <div>content</div>' }); new Vue({ el: '#app', components: { //지역 컴포넌트 등록 방식 //'컴포넌트 이름': 컴포넌트 내용, 'app-footer':{ template:'<footer>footer</footer>' } } }); new Vue({ el:'#app2', components:{ 'app-footer':{ template:'<footer>footer</footer>' } } }) *새로운 new Vue app2를 만들었으나, 개발자도구에서 새로운 root가생성되지 않아 질문드립니다. (아래사진참조) </script> </body> </html>
- 미해결Vue.js 시작하기 - Age of Vue.js
개발자 도구 Root에 하위 계보 노출되지 않음.
안녕하세요. 수업내용 코드 그대로 입력하고 Vue 개발자 도구로 화면을 확인 했을 때, 웹화면에서 태그들은 정상 노출되는데 강사님 화면처럼 Root 하위라인이 노출되지 않습니다. 이거 뭐가 문제인지 알 수 있을까요? + 제가 설치한 Vue 버전은 2.73 입니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
컴포넌트 여러개 생성했음에도 모두 그려지지 않는 현상에 대해 질문 드립니다!
안녕하세요, 장기효님 덕분에 강의 잘 수강하고 있습니다! 수강 중 궁금한점이 있어서 글을 남깁니다. app-content가 뷰에 그려지지않아 이유를 찾다가 app-header컴포넌트를 셀프클로징을 풀어주니 app-content가 그려지는것을 발견했습니다. 컴포넌트는 셀프클로징을 하면 안되는것일까요? 아니면 제 코드에 다른 문제가 있는 것일까요? 뷰가 그려지지 않는 코드를 첨부드립니다. (이 상황에서 app-header의 셀프클로징을 수정해주면 정상으로 뷰가 그려집니다. ) <body> <div id="app"> <app-header v-bind:propsdata="message"/> <app-content /> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var appHeader = { template: "<h1>header : {{propsdata}}</h1>", props: ["propsdata"], }; var appContent = { template: "<div>content</div>", }; new Vue({ el: "#app", components: { "app-header": appHeader, "app-content": appContent, }, data: { message: "hi!!", num: 100, }, }); </script> </body> 추가) '같은 컴포넌트 레벨 간의 통신 방법 구현 1'을 듣던중 셀프클로징을 사용하지 않았는데도 위와 비슷한 현상이 일어나서 추가합니다! elements탭이나 vue탭에서 보아도 app-header 컴포넌트만 나타나고 app-content 컴포넌트는 나오지 않습니다. 이 상황에서 app-header컴포넌트를 주석처리하면 app-content컴포넌트가 보이는데 무엇이 잘못된 것일까요? 코드를 첨부드립니다! <body> <div id="app"> <app-header></appHeader> <app-content></app-content> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var appHeader = { template: "<h1>header</h1>", }; var appContent = { template: "<div>content<button>passNumber</button></div>", }; new Vue({ el: "#app", components: { "app-header": appHeader, "app-content": appContent, }, }); </script> </body> vue생성자 함수를 찍어보니 components안에 두 컴포넌트가 모두 잘 생성되어있는것 같습니다. - elements탭에서는 header만 보입니다. (vue탭도 header만 보입니다ㅜ)
- 미해결Vue.js 시작하기 - Age of Vue.js
vue 설치 에러
위와같이 메시지가 노출되어나옵니다... 무엇이 문제일까요?? 알려주시면 감사하겠습니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
vue-cli 질문
vue/cli 5.0.4인데 vue create vue-cli 명령어 실행이 안 되면 어떻게 설정해야할까요? ㅠㅠ
- 해결됨Vue.js 시작하기 - Age of Vue.js
Main.js 부분이 다르게 나옵니당
영상이 녹화됐을때랑 제가 쓰는 버전이랑 차이가 있어서 그런지 메인부분이 다르게 나옵니다. 이부분은 그냥 다른갑다... 하고 이해만 하고 넘어가도 될까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
vue devtools 질문입니다. 이벤트가 안 보여요
다른분이 올린 질문은 봤지만, 한번 더 업데이트 됐나봅니다 보이지 않아요
- 미해결Vue.js 시작하기 - Age of Vue.js
index.html <script src''/> 사용관련
안녕하세요 강사님 ! 수업 감사히 듣고 있습니다. ES6 import, export를 학습하며 어려움을 겪고있습니다..ㅠ.. public폴더의 index.html는 싱글페이지어플리케이션(SPA)의 첫 페이지로써,, 이 위에 vue 컴포넌트들을 뿌려주는걸로 알고 있습니다. 왜 index.html에 <script src''/>를 사용하여 js를 가져와 이 js안의 함수들을 어디에서나(ex. vue파일들) 전역함수처럼 쓸수없는지요....! <질문정리> 1. <script src=''/>를 index.html에서 써도 되는지 ! 2. <script src=''/>를 쓰면 안된다면, js, vue 파일마다 필요한 함수,변수를 import, export구문 작성하며 써야하는건지? 3. vue.js는 ES6문법으로 js를 작성해야 하는것이 관례인지. 4. 옛날 ES6문법이 아닌 js는 당연 import, export를 사용하지 않았습니다. vue파일에 기존 js를 import하여 쓰고 싶은데 <script src=''/>처럼 파일 전체를 가져와, 안의 함수나 변수들을 vue파일의 script태그에서 사용할수 있는 scope를 가진 export, import문을 알고싶습니다. import "module-name"; 이걸까요..?
- 미해결Vue.js 시작하기 - Age of Vue.js
질문드려요,
안녕하세요, 좋은 강의 감사합니다.! $emit, props연습할때에 component 등록 방법을 Vue.component로 변경해서 연습을 해봤는데요, 이벤트가 작동은 하지만 아래와 같은 오류가 나요 어느부분을 확인해봐야하는지 어떻게 고쳐야 하는지 아직 잘 모르겠습니다 ㅜㅜ 답변 부탁드려요..! [오류 내용] vue.js:634 [Vue warn]: Property or method "addNumber" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. (found in <Root>) vue.js:634 [Vue warn]: Property or method "propsnum" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. (found in <Root>) [연습 소스] <!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"> <title>Document</title> </head> <body> <div id="app"> <app-header v-on:pass="logText"></app-header> <app-content v-on:addnum="addNumEvent" v-bind:propsnum="number"> <template id="appContentTemp"> <div> <button v-on:click="addNumber">Click Add</button> <p>{{propsnum}}</p> </div> </template> </app-content> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var appheader = { template: '<button v-on:click="passEvent">Click Event!</button>', methods:{ passEvent:function(){ this.$emit('pass'); } } } Vue.component('app-content', { template : '#appContentTemp', props : { propsnum:Number, }, methods: { addNumber : function(){ this.$emit('addnum'); } } }) new Vue({ el:'#app', components:{ 'app-header' : appheader }, data : { number : 10 }, methods:{ logText : function(){ console.log('hi'); }, addNumEvent:function(){ this.number += 1; console.log(this.number); } } }) </script> </body> </html>