44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 시작하기 - Age of Vue.js
a태그대신 router-link를 사용해야 하는 이유가 있나요?
router-link 가 a태그로 대체된다고 강의에서 설명하셨는데 그냥 a태그를 사용하면 되지 구지 router-link를 따로 만든 이유나 장점이 있을것 같은데 router-link를 사용해서 얻는 이점이 뭔가요? 어떤 경우에 a태그보다 router-link를 사용해야 하는지 구체적으로 좀 알려주시면 감사하겠습니다.
- 해결됨Vue.js 시작하기 - Age of Vue.js
axios 로 post전송을 구현하는 거랑 form method로 post 전송하는 거랑 차이가 있나요?
axios를 이용한 데이터 전송 및 form 구현 / 섹션를 보고 질문 드립니다. <form action='url' method='post'> 이 태그로도 서버로 post전송이 가능한 걸로 알고있는데 강의에서 보여주신 axios를 이용한 방법이랑 차이가 있을까요? 단지 axios 응용하는 법을 보여주신 건지 성능이나 보안 차이가 있는지 궁금하네요 ㅎㅎ
- 미해결Vue.js 시작하기 - Age of Vue.js
개발자 도구창에서 vue가 사라졌어요?
안녕하세요? 수고가 많으십니다. 이전까지 개발자 도구창에 vue가 잘 떠서 열심히 따라왔는데... vue-cli에서 갑자기 vue가 사라졌습니다. 이유가 뭘까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
defineProperty()에 대한 질문입니다...
1. Object.defineProperty()를 이용하여 데이터를 바꿔주게되면 실제로는 가상돔에 적용되고 싱글파일컴포넌트 부분이 재랜더링이 일어나면서 화면이 바뀌는 건가요? 2. 리액트에서도 setState를 통해 데이터가 바뀌게 되면 재랜더링이 일어나 화면을 그려주게 되는데 vue.js에서 사용하는 Object.defineProperty api를 적용해서 만든건지 궁금합니다.
- 해결됨Vue.js 시작하기 - Age of Vue.js
$emit()이 호출되는 this에 관한 질문
안녕하세요, 강의 잘 보고 있습니다. 컴포넌트 appHeader 안 method인 passEvent에서 finction 선언 후, 그 안에 this.$emit('pass')를 통해 상위 컴포넌트로 pass event를 발생 시켰는데요 이때 $emit()이 호출되는 this가 무엇인지 궁금합니다. 좀 더 자세히는 this가 appHeader 변수에 할당 된 map({}) 객체를 가리키는 건지, passEvent에 할당 된 function객체를 가르키는 건지, 그렇다면 $emit 이라는 method는 어느 객체에 구현된 method인지 궁금합니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
개발자도구(F12)를 눌렀을때 VUE 탭이 안보이네요.
cli이전 html 작성코드를 Open with Live Server로 실행했을때는 개발자코드에 vue탭이 보였는데요. localhost:8080에서 개발자코드를 열면 vue탭이 안보입니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
웹 디버깅
대부분 웹 개발자도구에 있는 부분으로 코드작동유무를 확인하고있는데 다른 언어들처럼 ide로 디버깅하듯이 vscode의 js파트를 디버깅하는건 잘 안하나요? 할수있으면 혹시 어떤방법일까요? 다른 강의에서 혹시 다루신다면 강의제목을 알려주시면 감사하겠습니다!
- 미해결Vue.js 시작하기 - Age of Vue.js
라이브서버
live server를 실행시켯는데 구글로도 기본설정이 되어있는데도 홈페이지가 안뜨는 경우는 어떤경우인지알려주실수잇나요 ? 아래 보면 port가 실행되어잇는데 홈페이지론 안뜹니다
- 미해결Vue.js 시작하기 - Age of Vue.js
강의 내용 중 참고하는 페이지는 별도로 접근이 불가할까요?
정리되어 있는 내용이 좋아서 추후에도 참고하며 공부하고 싶은데 혹시 접근이 불가할까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
개발자 도구에서 컴포넌트 이름이 강의와 다르게 나옵니다.
예시를 따라가던 중 개발자 도구에서 vue의 컴포넌트를 볼 때 영상에서는 해당 컴포넌트의 태그 이름인 app-header, app-content로 나오게 되는데 저는 자바스크립트 내에서 정의한 컴포넌트 이름이 나오게 됩니다. 혹시 이러한 부분에서 차이가 나오는 이유는 무엇일까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
vue.js에서 공백 추가 문의
안녕하세요. vue.js에서는 공백 추가 가 지원안 하는 지요? 여기 예제에서 안되는 것 같아 보입니다만.
- 해결됨Vue.js 시작하기 - Age of Vue.js
f12 모드에서 태그에있는 -표시가 안타나는데요...
<app-header>이 f12 화면상에서 <appheader>로 보이는데 강의처럼 <app-header>표시하려면 어떻게 해야하나요?
- 해결됨Vue.js 시작하기 - Age of Vue.js
데이터 바인딩 관련 질문입니다..
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="app"></div> <script> // 대부분의 오픈소스 라이브러리들은 IIFE를 활용한다. (function () { function init() { var div = document.querySelector("#app"); var viewModel = {}; Object.defineProperty(viewModel, "str", { get: function () { console.log("접근"); }, set: function (newValue) { console.log("할당", newValue); render(newValue); }, }); } function render(value) { div.innerHTML = value; } init(); })(); </script> </body> </html> 질문이 있습니다. 데이터 바인딩이라는 것이 viewModel을 Object.defineProperty(viewModel) 하는 것까지이고 set이라는 속성을 통해 데이터값에 변화가 있다면 화면에 재랜더링 하는 것을 Reactivity 라고 생각하면 될까요? 아니면 데이터 바인딩라는 개념에 Reactivity를 포함해서 데이터와 뷰연결 + 데이터가 바뀔시 화면 재랜더링 까지 포함되어있는건가요?
- 해결됨Vue.js 시작하기 - Age of Vue.js
템플릿
템플릿 문법 이라는 단어에서 템플릿이란 template:'<div></div>' 이렇게 사용되는 속성으로 알고 있습니다. 근데 이 속성을 사용하지 않고 <div id="app"></div> 안에서 사용되는 태그에 템플릿 문법을 사용하고 있는데 뷰의 템플릿 문법은 템플릿 속성에 한정해서 사용하는 것이 아니라 그냥 뷰로 화면을 조작하는 방법이라고 받아들이면 될까요?
- 해결됨Vue.js 시작하기 - Age of Vue.js
라우터와 라우팅의 차이.
라우팅이라는 것은 각 url에 따른 정보 처리를 의미하면 라우터의 의미는 무엇인가요?
- 해결됨Vue.js 시작하기 - Age of Vue.js
질문
데이터바인딩이라는 문법에서는 Object.defineProperty 라는 api를 사용하는데 이 api가 props에 도 적용되어있다고 강의에서 말씀하셨습니다. 이 부분이 이해는 가는데 Vue라는 생성자 함수에서 Object.defineProperty가 Vue라는 생성자함수에서 어떤식으로 사용되고 있는지와 Vue 생성자함수가 어떻게 구현되어있는지에 대해서 알 필요가 있을까요? 너무 깊게 들어가는것이 아닌 그냥 쓰는 방법에 익숙해지는게 맞는지 궁금합니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
vue cli 설치 에러
강의 정말 잘 듣고 있습니다 기효님. 다름이 아니라 처음에 Cli 설치 시도했을때 퍼미션 관련 에러가 있었고 다시 sudo 를 붙여서 진행했는데 이런 에러가 나옵니다... 노드는 12.16.1 버전이고 npm은 6.13.4 버전입니다.
- 해결됨Vue.js 시작하기 - Age of Vue.js
axios.html(this관련 질문)
getData(){ console.log(this) --> vue를 가르킴 axios .get... .then(function(response){ console.log(this) --> window를 가르킴 }) } 왜 axios안에 있는 this는 window를 가르키는 건가요??
- 미해결Vue.js 시작하기 - Age of Vue.js
component
강의랑 관련 없는 내용이지만 초급강좌에서는 html 에서 만드시는데 중급 강좌에서는 app.vue로 만드시잖아요. 상품 관련 컴포넌트를 만들려고 vue에다가 전역 컴포넌트를 만들고 라우터.js 에 눌르면 가게 해놨는데 컴포넌트 등록한게 맞냐고 자꾸 에러가 뜨는데 왜 그런건지 모르겠어요ㅠ <template> <div id="app"> <ka-nav></ka-nav> </div> </template> <script> Vue.component('ka-nav', { template: '<h1>k</h1>' }); new Vue({ el: '#app' }); export default { } </script> <style> </style>import VueRouter from 'vue-router' import FRAGANCE from './components/ka-nav-fra.vue' import NEWARRIVALS from './components/ka-nav-f.vue' Vue.config.productionTip = false Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', routes: [ { path: '/FRAGANCE', component: FRAGANCE }, { path: '/NEWARRIVALS', component: NEWARRIVALS } ] }); export default router
- 미해결Vue.js 시작하기 - Age of Vue.js
vue-cli 부분이 다르게 나타납니다!ㅠㅠ
강의에서 public 폴더에 있는 index.html파일에서 'vue-cli'라는 글자가 써있는 부분이(title과 strong) 제 파일에서는 아래와 같이 나타납니다! <%= htmlWebpackPlugin.options.title %> 예를 들면, <title><%= htmlWebpackPlugin.options.title %></title> 이렇게요! 뭐가 잘못된 걸까요..??