44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨Vue.js 시작하기 - Age of Vue.js
div loading
loading div는 Vue인스턴스 생성할 때 el로 연결 안 해줬는데 v-if를 어떻게 사용할 수 있는지 궁금합니다. el로 연결해준 태그 안에서만 vue 기능을 사용할 수 있는 줄 알았는데 아닌가요?
- 미해결Vue.js 시작하기 - Age of Vue.js
npm 오류 질문 드립니다!
안녕하세요 강사님! npm을 사용하여 라이브러리를 설치할때마다 오류가 발생하여 문의드립니다. node.js 버전은 14.17.3 npm 버전은 7.19.1 오류 내용 : 8 vulnerabilities (4 moderate, 4 high) 확인해보니 css-what 이라는 것이 취약성 high 로 나오는데npm audit, npm audit -force, npm audit fix 로 해결하려고 해도 해결이 되지 않습니다. 구글링을 하고 스택오버플로우에 검색을 해봐도 해결 방법을 못찾겠네요...ㅠㅠ혹시 해결 방법이 있을까요? Vue CLI를 설치할때는 4개만 high 문구가 나왔는데 프로젝트 생성시 8개가 high로 나옵니다.. 오류 내용과 취약성이 높은 내용들 캡처해서 올렸습니다!
- 미해결Vue.js 시작하기 - Age of Vue.js
npm run serve 오류나는이유 모르겠어요
처음에는 됐었는데 오류가 나서 안돼요
- 미해결Vue.js 시작하기 - Age of Vue.js
코드를 따라 쳤는데 message에 값이 변하지 않아요
(사진)
- 미해결Vue.js 시작하기 - Age of Vue.js
npm run serve 구동 이후 파일 저장 오류가 나요
안녕하세요~ npm run serve 구동이후 제가 AppHeader.vue 파일에서 오타(예를 들면 props 인데 prosp 이런식)가 있는체로 저장하면 오류가 생긴 후에 파일 자체가 손상이 되서 save, 파일 지우기도 안되는데요 벌써 몇번째 파일오류로 파일쓰기,저장,지우기도 안되는 상태입니다.. 어쩔수 없이 새로운 이름으로 저장하고 코드 따라칠때는 run serve를 잠시 꺼두었다가 재가동 시켜서 확인정도만 하고 또 ctrl+c로 서버 구동을 끄고 다시 따라서 코드 작성을 하고있는데 .. 원래 이런 npm run serve로 서버 구동시엔 오타나 파일명 실수한 체 저정하면 파일오류가 계속 생기는걸까요? 혹시 해결방법이 있으시면 알려주세요!
- 미해결Vue.js 시작하기 - Age of Vue.js
알림 관련 질문
좋은 강의 항상 감사드립니다. 이런 메세지가 뜨는데 어떻게 해결해야하나요?
- 해결됨Vue.js 시작하기 - Age of Vue.js
윈도우에서 Vue cli 터미널 에러뜨시는 분들 여기보세요
이거보고 해결했습니다.https://singa-korean.tistory.com/21
- 미해결Vue.js 시작하기 - Age of Vue.js
개발자모드 실행 후 [Vue]가 보이지 않아요
우클릭하여 검사 선택 후 실행되는 개발자모드에서 Elements, Console은 있는데 Vue가 보이지 않아요. 혹시나 해서 크롭 웹스토어에서 확인해보았는데 [chrome에서 삭제]로 표기되어있고요. (vue 설치되어있음) 이게 소스코드에 따라 Vue가 보일 때가 있고 안보일 때가 있는 것 같은데요. 차이점이 뭘까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
node 관련 에러
환경변수를 설정해서 node의 경로까지 설정을 했습니다 npm run serve를 누르면 이렇게 에러가 뜨는데 어떻게 해결해야할지 잘 모르겠습니다ㅠㅠ
- 미해결Vue.js 시작하기 - Age of Vue.js
개발자도구가 자꾸 꺼지는건 뭘 설정해줘야 할까요?
윈도 사용자입니다. 화면이 맥과 다르니까 힘든점이 많네요. visual studio code에서 open with live server 지정하면 개발툴이 아닌 크롬의 새 창으로 뜨고요. 거기서 검사 또는 개발자모드(F12)를 수행하면 개발자모드 관련 툴이 잠시 떴다가 사라져버립니다. 이러면 수업 나머지 부분을 따라가기 힘들것 같은데 (개발자 관련 메뉴 진입이 안됨..) 뭘 설정해줘야 하는걸까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
바뀐 내용이 웹 페이지에 반영되질 않습니다 ㅜㅜ
vue cli4버전을 설치하고 npm run serve, localhost:8080으로 App.vue파일을 열었습니다. 궁금한 것은 내용이 바뀌면 웹 페이지가 자동으로 갱신되거나 새로고침하여 바뀐 내용을 반영하고 싶은데 안됩니다. 중단하고 다시 npm run serve, localhost:8080을 클릭해야만 바뀐 내용이 반영됩니다. 다시 말해서 변경된 내용을 반영하기 위해서는 매번 서버를 껐다 켰다를 반복해야합니다 ㅜㅜㅜ 참고로, windows 10에 wsl를 설치해서 사용하고 있습니다
- 미해결Vue.js 시작하기 - Age of Vue.js
script의 위치는 둘 중 어디에 둬야하나요?
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script></script> <!-- 1 --></body><script></script> <!-- 2 --></html> 안녕하세요? 주니어 서버개발자입니다. 최근 뷰에 관심이 생겨서 강의를 보다보니 1번에 두시는 것 같더라구요. 저는 2번에다가 두고 있었는데, 2번보다 1번위치에 두는게 더 효율적인가요? 구글링을 쭉 해봐도 다 말이 달라서 강사님의 의견이 듣고싶습니다 !
- 미해결Vue.js 시작하기 - Age of Vue.js
질문드립니다.
제가 coponents를 생성해서 연결할려고 하는데 이렇게 작성을 했는데 터미널로 실행시킬때마다 밑에와 같이 변환이 자동으로 됩니다. 왜이러는 건지 궁금합니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
'props 속성' 파트 질문드립니다.
안녕하세요. 'props 속성' 파트 실습 중 아래와 같이 문의드립니다. v-bind:propsData 와 같이 camelCase로 속성 이름을 작성했을 때와 v-bind:propsdata 와 같이 소문자로만 속성 이름을 작성했을 때 실행 결과에서 아래와 같이 약간의 차이점이 보여서 문의드립니다. * propsdata 실행 결과 : 개발자 도구에서 props 탭만 보임. * propsData 실행 결과 - 우측 개발자 도구에서 props와 $attrs 탭으로 나뉘어 보입니다. 어떠한 차이점으로 결과가 달라지게 되는 것인지 궁금합니다.
- 해결됨Vue.js 시작하기 - Age of Vue.js
watch 속성을 사용했을 때의 장점이 따로 있는걸까요?
안녕하세요, Vue 강의를 학습 중인 학생입니다. 수업 내용 중에 'watch 속성' 회차에서 아래와 같이 num 의 값이 변경되었을 때 logText function 이 수행되도록 하는 로직을 같이 실습하였는데요, <script> new Vue({ el: '#app', data: { num: 10 }, watch: { num: function() { this.logText(); } }, methods: { addNum: function() { this.num = this.num + 1; // this.logText(); }, logText: function() { console.log('changed'); } } }) </script> 해당 방법에 대해 언급해주시기 전에 제가 생각했던 방법은 아래와 같았고, 실제로 동작도 동일하게 수행되는 것 같은데 혹시 watch 속성을 사용했을 때의 장점이 따로 있는걸까요? <script> new Vue({ el: '#app', data: { num: 10 }, // watch: { // num: function() { // this.logText(); // } // }, methods: { addNum: function() { this.num = this.num + 1; this.logText(); }, logText: function() { console.log('changed'); } } }) </script> 변경점에 대한 관리는 watch 속성으로 하는 것이 일반적이다 같은.. 게 있는지 궁금합니다 :)
- 미해결Vue.js 시작하기 - Age of Vue.js
yarn으로 실행하는 것과 npm run build로 실행하는것의 차이
처음 vue를 설치할때 아무생각없이 yarn으로 설치를 했는데 강의에서는 npm run build로 하라고 해서 ㅠ 다시 지우고 설치를 해야하나 yarn serve로 실행하면 실행은 되는데 둘이 큰 차이가 있나요? ㅠ npm run build로 실행하기 위해서는 어떻게 해야하나요? npm run build로 실행을 하면 이렇게 나오네요 강의처럼 따라가려면 ㅠ 어떻게 설치랑 실행을 해야하나요 ㅠ
- 미해결Vue.js 시작하기 - Age of Vue.js
components에서 출력이 조금 다릅니다
Vue에서 components보면 강의대로 따라적었는데 <app-header> 처럼 안나오구 <AppHeader>이렇게 뜹니다. 이것은 왜 그런건가요? 크게 상관없는건가요? 아니면 혹시 kebab-case이나 camelCase 관련된걸 설정을해줘야할까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
props속성명칭
강의를 쉽게 잘 설명해주셔서 감사한말씀 먼저 드립니다. Vue를 처음 사용해보는 사용자로써 기존 카멜기법으로 명칭을 정하다 보니 습관이 되서 저도 모르게 소문자 대문자 섞어 쓸때가 많습니다. 혹시 props 속성 명칭은 소문자로만 구성되야 하나요? v-bind:propsdata="message" -> propsData 이렇게 하면 화면에 출력이 안되더라구요, 이게 명칭 규칙인건가요? 혹시 규칙이라면 어떤 문서를 봐야 알수 있을까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
카멜 페턴 관련 질문입니다.
선생님 div 아래 app-header나 app-content라고 정의해둔것들이 개발자도구에서 카멜(?) 패턴으로 AppHeader나 AppContent로 변형되어 나오는데 강의에서는 그렇지 않은 것으로 나옵니다. 세팅이 다른걸까요?
- 해결됨Vue.js 시작하기 - Age of Vue.js
mode 에 history 를 넣었더니, anchor 가 /login 으로 변합니다.
해쉬를 없애기 위해서 다음과 같이 작성하였습니다. var router = new VueRouter({ mode: 'history', // 페이지의 라우팅 정보 routes: [ // 페이지의 개수만큼 객체 개수가 필요하다. { // 페이지의 url path: '/login', // 해당 url 에서 표시될 컴포넌트 component: LoginComponent }, { path: '/main', component: MainComponent } ] }); 그런데 링크가 .../original/path/to/login, .../original/path/to/main 이 되는 것이 아니라 /login, /main 으로 변해버립니다. (앞의 기존 path 가 사라져서 router.html 파일이 아닌 login, main 이라는 존재하지 않는 파일에 접근하게 됩니다.) 따로 서버를 띄운 것은 없고 크롬 브라우저에서 실행하였습니다. 무슨 실수를 한 것일까요? ㅠㅠ