Vue.js 시작하기 - Age of Vue.js

Vue.js 시작하기 - Age of Vue.js

(294개의 수강평)

1767명의 수강생
Front-EndJavascriptVue.js웹 개발
기연 프로필

개발자 도구에서 컴포넌트 이름이 강의와 다르게 나옵니다. 기연 7일 전
예시를 따라가던 중 개발자 도구에서 vue의 컴포넌트를 볼 때 영상에서는 해당 컴포넌트의 태그 이름인 app-header, app-content로 나오게 되는데 저는 자바스크립트 내에서 정의한 컴포넌트 이름이 나오게 됩니다. 혹시 이러한 부분에서 차이가 나오는 이유는 무엇일까요?

2
Ji Hyun Kim 프로필

vue.js에서   공백 추가 문의 Ji Hyun Kim 15일 전
안녕하세요. vue.js에서는 공백 추가   가 지원안 하는 지요? 여기 예제에서 안되는 것 같아 보입니다만.

0
질문또는답변 프로필

f12 모드에서 태그에있는 -표시가 안타나는데요... 질문또는답변 25일 전
<app-header>이 f12 화면상에서 <appheader>로 보이는데 강의처럼 <app-header>표시하려면 어떻게 해야하나요?

2
dongwoo kim 프로필

데이터 바인딩 관련 질문입니다.. dongwoo kim 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
dongwoo kim 프로필

템플릿 dongwoo kim 1달 전
템플릿 문법 이라는 단어에서 템플릿이란 template:'<div></div>' 이렇게 사용되는 속성으로 알고 있습니다. 근데 이 속성을 사용하지 않고 <div id="app"></div> 안에서 사용되는 태그에 템플릿 문법을 사용하고 있는데 뷰의 템플릿 문법은 템플릿 속성에 한정해서 사용하는 것이 아니라 그냥 뷰로 화면을 조작하는 방법이라고 받아들이면 될까요?

1
dongwoo kim 프로필

라우터와 라우팅의 차이. dongwoo kim 1달 전
라우팅이라는 것은 각 url에 따른 정보 처리를 의미하면 라우터의 의미는 무엇인가요?

1
dongwoo kim 프로필

질문 dongwoo kim 1달 전
데이터바인딩이라는 문법에서는 Object.defineProperty 라는 api를 사용하는데 이 api가 props에 도 적용되어있다고 강의에서 말씀하셨습니다. 이 부분이 이해는 가는데 Vue라는 생성자 함수에서 Object.defineProperty가 Vue라는 생성자함수에서 어떤식으로 사용되고 있는지와 Vue 생성자함수가 어떻게 구현되어있는지에 대해서 알 필요가 있을까요?  너무 깊게 들어가는것이 아닌 그냥 쓰는 방법에 익숙해지는게 맞는지 궁금합니다.

2
iop1996 프로필

vue cli 설치 에러 iop1996 1달 전
강의 정말 잘 듣고 있습니다 기효님. 다름이 아니라 처음에 Cli 설치 시도했을때 퍼미션 관련 에러가 있었고 다시 sudo 를 붙여서 진행했는데  이런 에러가 나옵니다... 노드는 12.16.1 버전이고 npm은 6.13.4 버전입니다.

3
vnzl-456 프로필

axios.html(this관련 질문) vnzl-456 1달 전
getData(){ console.log(this) --> vue를 가르킴 axios .get... .then(function(response){ console.log(this) --> window를 가르킴 }) } 왜 axios안에 있는 this는 window를 가르키는 건가요??

1
원윤희 프로필

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

5
sion007005 프로필

vue-cli 부분이 다르게 나타납니다!ㅠㅠ sion007005 2달 전
강의에서 public 폴더에 있는 index.html파일에서  'vue-cli'라는 글자가 써있는 부분이(title과 strong) 제 파일에서는 아래와 같이 나타납니다!  <%= htmlWebpackPlugin.options.title %> 예를 들면, <title><%= htmlWebpackPlugin.options.title %></title> 이렇게요! 뭐가 잘못된 걸까요..?? 

1
M0 ca 프로필

event function 선언 질문 M0 ca 2달 전
아래와 같이 arrow-function으로 선언하면 작동하지 않는 이유가 궁금합니다. passEvent: () => {    this.$emit('pass');}

1
원윤희 프로필

vue 정의 되지 않음 오류 원윤희 2달 전
 Uncaught ReferenceError: Vue is not defined 오류가 나는데 어떻게 해야 하나요

1
이승환 프로필

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는 맥 환경에서 위와같이 모듈이 없다는 에러가 뜨는데 위와같은 문제를 어떻게 해결할 수 있나요??

5
김동한 프로필

VueCLI 버전 질문드립니다. 김동한 2달 전
안녕하세요 캡틴판교님 CLI강의를 보다가 궁금증이 생겨서 질문드립니다. 강의에서 사용중인 CLI 버전은 3.8.2 버전인데 현재 제가 설치된 버전은 4.3.1 버전입니다. 상위 버전이라 큰 상관은 없을것 같지만 그래도 차이점이 있다면 3버전으로 사용하려고 합니다.  4버전도 강의 진행에 큰 문제가 없는지 궁금합니다.

4
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스