개발자 도구에서 컴포넌트 이름이 강의와 다르게 나옵니다.
7일 전
예시를 따라가던 중 개발자 도구에서 vue의 컴포넌트를 볼 때 영상에서는 해당 컴포넌트의 태그 이름인 app-header, app-content로 나오게 되는데 저는 자바스크립트 내에서 정의한 컴포넌트 이름이 나오게 됩니다. 혹시 이러한 부분에서 차이가 나오는 이유는 무엇일까요?
f12 모드에서 태그에있는 -표시가 안타나는데요...
25일 전
<app-header>이 f12 화면상에서 <appheader>로 보이는데 강의처럼 <app-header>표시하려면 어떻게 해야하나요?
데이터 바인딩 관련 질문입니다..
1달 전
<!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를 포함해서 데이터와 뷰연결 + 데이터가 바뀔시 화면 재랜더링 까지 포함되어있는건가요?
템플릿
1달 전
템플릿 문법 이라는 단어에서 템플릿이란 template:'<div></div>' 이렇게 사용되는 속성으로 알고 있습니다. 근데 이 속성을 사용하지 않고 <div id="app"></div> 안에서 사용되는 태그에 템플릿 문법을 사용하고 있는데 뷰의 템플릿 문법은 템플릿 속성에 한정해서 사용하는 것이 아니라 그냥 뷰로 화면을 조작하는 방법이라고 받아들이면 될까요?
질문
1달 전
데이터바인딩이라는 문법에서는 Object.defineProperty 라는 api를 사용하는데 이 api가 props에 도 적용되어있다고 강의에서 말씀하셨습니다. 이 부분이 이해는 가는데 Vue라는 생성자 함수에서 Object.defineProperty가 Vue라는 생성자함수에서 어떤식으로 사용되고 있는지와 Vue 생성자함수가 어떻게 구현되어있는지에 대해서 알 필요가 있을까요? 너무 깊게 들어가는것이 아닌 그냥 쓰는 방법에 익숙해지는게 맞는지 궁금합니다.
vue cli 설치 에러
1달 전
강의 정말 잘 듣고 있습니다 기효님.
다름이 아니라 처음에 Cli 설치 시도했을때 퍼미션 관련 에러가 있었고 다시 sudo 를 붙여서 진행했는데
이런 에러가 나옵니다... 노드는 12.16.1 버전이고
npm은 6.13.4 버전입니다.
axios.html(this관련 질문)
1달 전
getData(){
console.log(this) --> vue를 가르킴
axios
.get...
.then(function(response){
console.log(this) --> window를 가르킴
})
}
왜 axios안에 있는 this는 window를 가르키는 건가요??
component
2달 전
강의랑 관련 없는 내용이지만 초급강좌에서는 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-cli 부분이 다르게 나타납니다!ㅠㅠ
2달 전
강의에서 public 폴더에 있는 index.html파일에서
'vue-cli'라는 글자가 써있는 부분이(title과 strong)
제 파일에서는 아래와 같이 나타납니다!
<%= htmlWebpackPlugin.options.title %>
예를 들면, <title><%= htmlWebpackPlugin.options.title %></title>
이렇게요! 뭐가 잘못된 걸까요..??
event function 선언 질문
2달 전
아래와 같이 arrow-function으로 선언하면 작동하지 않는 이유가 궁금합니다.
passEvent: () => { this.$emit('pass');}
vue.js 실행에 대해 질문 드립니다.
2달 전
"start": "npm run dev",
로 실행 시,
/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run start --scripts-prepend-node-path=auto
> vue_frontend@1.0.0 start /Users/seunghwanlee/Desktop/Project/springboot-vue.js-example/vue_frontend
> npm run dev
> vue_frontend@1.0.0 dev /Users/seunghwanlee/Desktop/Project/springboot-vue.js-example/vue_frontend
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
internal/modules/cjs/loader.js:985
throw err;
^
Error: Cannot find module '/Users/seunghwanlee/Desktop/Project/springboot-vue.js-example/vue_frontend/build/webpack.dev.conf.js'
Require stack:
- /Users/seunghwanlee/Desktop/Project/springboot-vue.js-example/vue_frontend/node_modules/webpack/bin/convert-argv.js
- /Users/seunghwanlee/Desktop/Project/springboot-vue.js-example/vue_frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
at Function.Module._load (internal/modules/cjs/loader.js:864:27)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at requireConfig (/Users/seunghwanlee/Desktop/Project/springboot-vue.js-example/vue_frontend/node_modules/webpack/bin/convert-argv.js:97:18)
at /Users/seunghwanlee/Desktop/Project/springboot-vue.js-example/vue_frontend/node_modules/webpack/bin/convert-argv.js:104:17
at Array.forEach (<anonymous>)
at module.exports (/Users/seunghwanlee/Desktop/Project/springboot-vue.js-example/vue_frontend/node_modules/webpack/bin/convert-argv.js:102:15)
at Object.<anonymous> (/Users/seunghwanlee/Desktop/Project/springboot-vue.js-example/vue_frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js:223:50)
at Module._compile (internal/modules/cjs/loader.js:1158:30) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/seunghwanlee/Desktop/Project/springboot-vue.js-example/vue_frontend/node_modules/webpack/bin/convert-argv.js',
'/Users/seunghwanlee/Desktop/Project/springboot-vue.js-example/vue_frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue_frontend@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue_frontend@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/seunghwanlee/.npm/_logs/2020-04-19T00_05_06_364Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue_frontend@1.0.0 start: `npm run dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue_frontend@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/seunghwanlee/.npm/_logs/2020-04-19T00_05_06_384Z-debug.log
Process finished with exit code 1
OS는 맥 환경에서
위와같이 모듈이 없다는 에러가 뜨는데 위와같은 문제를 어떻게 해결할 수 있나요??
