44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 시작하기 - Age of Vue.js
v-bind, {{ }}, v-model 질문입니다.
안녕하세요^^ v-bind, 콧수염 태그, v-model 관련해서 헷갈리는 부분이 있어 질문 드립니다. 1. v-bind와 {{ }} 는 Vue data 속성의 변수값을 html 에 표시하는 단방향 연결이고, v-model 은 Vue data 속성의 변수값과 DOM 입력값의 양방향 연결인가요? 1-1. v-bind는 html 태그의 속성에 사용하고 (컴포넌트 포함), {{ }} 는 태그의 컨텐트에 사용하는건가요? <p class="{{ name }}"></p> 이련 식으로는 안되더라구요. 2. Vue data 속성의 변수값과 html 태그 속성을 양방향으로 연결하는 방법은 없나요? 예를 들어, <p v-bind:class="name"></p> 에서 class 속성 값이 바뀌면 name 변수값도 바뀌게요.. (v-model 처럼) p 태그에는 v-model을 사용할 수 없는건가요?
- 해결됨Vue.js 시작하기 - Age of Vue.js
cdn vs cli 아직 초보 단계라서 궁금한게 있습니다
cdn 과 cli 의 차이점을 알고 싶습니다 cdn 처럼 그냥 코드 한줄만 추가하면 vue를 사용할수있는데 개발은 어떤걸로 자주 현업에서는 사용하나요? 아직 초보단계라서 간단해보이는 cdn이 좋아보여서 궁금합니다!
- 미해결Vue.js 시작하기 - Age of Vue.js
vue에서 공통 css 관리
안녕하세요 기초 강의 완강하고 실제 프로젝트에 투입하려고 하는데 공통 css 파일은 컴포넌트 단위로 관리하는 vue에서 권장하지 않는 방식일까요? 유지보수 측면에서 각 컴포넌트에서도 재사용성이 높은 스타일은 하나의 파일에서 한번에 관리하고 싶은데 기초강의에서나 기존 다른 프로젝트 파일을 열어보아도 그렇게 관리가 되어 있지 않은 거 같아 문의드립니다. 혹시 공통 css 파일로 관리하는 방법이 따로 있거나 다른 강의에서 다루고 있을까요? 답변 부탁드립니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
컴포넌트 "하이프(-)" 사용시 오류가 발생되요
<template> <visual-component/> </template> <script> import visual-component from './views/main/visual-component.vue'; export default { components: { visual-component } } </script> <style> </style> 위 내용처럼 작성했는데, 아래 처럼 에러가 발생됩니다. import visual-component from './views/main/visual-component.vue'; | ^ 7 | 8 | export default { 9 | components: { at parser.next (<anonymous>) 카멜표기법 "visualComponet"로 변경하면 문제는 없니는 해요 혹시 해결 방법이 있을까요?? https://github.com/me2designer/portfolio/blob/cc4453f4abd498bcafff477a20d0075ea3a76133/src/main.vue
- 미해결Vue.js 시작하기 - Age of Vue.js
안녕하세요 대장님 질문이있어용
<div id="app"> <!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> --> <app-header v-bind:propsdata="message"></app-header> </div> 여기서 v-bind:propsdata="message"부분이 궁금한데요 let appHeader = { template: '<h1>{{propsdata}}</h1>', props : ['propsdata'], } appHeader객체에 props프로퍼티를 생성하고 값으로 propsdata라는 스티링값을 배열에 담아 보내면 props의 하위객체로 propsdata가 생성되더라구요 그러면 저는 여기서 궁금한게 v-bind:propsdata="message" 여기서 message값이 propsdata에 저장되는건가요?? propsdata 까봐도 안나오길래 어떻게 되는건지 궁금해서요..
- 미해결Vue.js 시작하기 - Age of Vue.js
질문입니다.
인스턴스를 만들때에는 var vm = new Vue({ .. }) 이렇게 만드셨는데요 컴포넌트를 생성할때는 그냥 new Vue로 인스턴스를 생성하신 이유가 뭔가요? 이전 인스턴스강의에서는 var vm = new Vue 로 가다가 컴포넌트에서는 그냥 new Vue로 나와있는데 그 이유를 잘 모르겠습니다.ㅜ - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결Vue.js 시작하기 - Age of Vue.js
vue 라이브러리 질문
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. script에 vue 라이브러리 링크를 등록해줘야 vue 코드를 사용할수있기때문에 저 링크를 써주는건가요?
- 미해결Vue.js 시작하기 - Age of Vue.js
인스턴스 관련 질문입니다~!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Console창에서 function Person(name, job) { this.name = name; this.job = job; } new Person('josh', 'developer'); --> var P = new Person('josh', 'developer'); newPerson을 함수에 담고나서 p를치면 Person {name; "josh", job: "developer"} job: "developer" name: "josh" 이렇게 나온다라고 그전강의에서 배웠는데요, 이번강의에서는 따로 함수를 정의할 필요없이 객체리터럴방법? 을 사용해서 함수를 별도로 구분하는게 아니라 new Vue로 바로 정의해서 api를 추가하는형태로 인스턴스를 활용할 수 있다?라고 이해했는데요 그럼 위의 console에서 변수를 만들고나서 변수를 정의하고 출력했던거를 vue 인스턴스 생성 방법으로 코딩을 하면 어떻게 해야하나요? // 제가 이해하기로는 원래는 이렇게 변수를 정의하고 변수를 불러와서 인스턴스를 만들어야하는데 vue를 이용하면 편리하게 만들수 있다 그 방법은 이렇다 를 설명 주신거같은데 맞는지 궁금합니다. // 간단한 코드라면 좀 알려주실수 있을까요? ㅎㅎ
- 미해결Vue.js 시작하기 - Age of Vue.js
복습 정도에 대해서 궁금합니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 학습은 정도로 가는것이 맞다고 생각하지만, 제 개인적인 상황은 비교적 짧은시간 내에 이직을 목적으로 하고 있습니다. 공부시간도 일과 병행하다보니 많이 나는 상황은 아닙니다 ㅠ 복습을 할때 안보고도 칠 수 있는정도로 외우면서 원리까지 다 익혀야 하는게 맞는건지, 아니면 원리만 머리속에 이해하고 넘어가도 되는건지 복습을 어느정도까지 해야하는지 좀 감이 안옵니다. 사실 시간이 제한적이다보니 효율적인 방법을 자꾸 찾게 되는것 같습니다. 강사님 조언좀 부탁드립니다!
- 해결됨Vue.js 시작하기 - Age of Vue.js
SCSS 파일명 대문자 안되는데..
저희 회사에서는 파일명 작성시 카멜표기법을 권장하고있습니다. vue, js 파일은 카멜표기법으로 가능한데 scss 파일이 대문자를 사용하면 에러가 나서요 이 부분은 어쩔 수 없나 싶은지 문의글 남겨 놓습니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
npm run serve
vue cli 강의를 듣고 이해가 되지 않아서 다시 돌아와서 듣고 있습니다. 그런데 처음 강의 들었을 때, cd vue-cli 입력 후, npm run serve로 서버를 띄우고 app.vue에서 template, script, style태그 안에 수업대로 코딩을 하면 수업에 있는 화면대로 app이 출력이 되었는데요, 두 번째 들었을 때 다시 서버를 띄우고 app.vue를 작성했을 때에는 app이 출력이 되지 않고 'welcome to your vue.js app' 화면 그대로 유지 됩니다. 어떻게 해결을 해야할까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
강사님 강의 잘듣고 있습니다.
먼저 단축키같은 내용 자막으로 넣어주셔서 감사합니다. 전체적으로 수강생을 많이 배려한 콘텐츠라는느낌을 받습니다. 다름이아니라 코드를 다 치고나서 function render() { div.innterHTML = value; } init(); })(); </script> </body> </html> 이부분에서 init()다음에 })뒤에 나오는 (); 는 왜 써줘야 하는건가요? - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만ㅁ들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결Vue.js 시작하기 - Age of Vue.js
v-on:이벤트 명 질문 드립니다.
모르는 점이 생겨 추가 질문드립니다. v-on:click="passEvent" 에서 v-on의 이벤트 명이 어떻게 click 이 되는지 궁금합니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
컴포넌트 질문드립니다.
안녕하세요, 캡틴판교님. 너무 좋은 강의로 학습 중에 궁금한 점이 있어 질문드립니다. let appHeader = { template : ~~~ } 이 부분이 변수(객체)를 생성한 것 까지는 이해했는데, 어떻게 컴포넌트가 되는건지 궁금합니다. 제가 아는 컴포넌트는 전역과 지역 컴포넌트로 나뉘어지며, 코드는 - 전역: Vue.component('name' {option}) - 지역: new Vue ({ el: "#app", componets: { ~~ } }) 이런식으로 작성했었습니다. let vm = new Vue () 처럼 생성자 함수를 사용하지 않는 이상 단순 변수(객체)가 어떻게 컴포넌트가 되는건지 궁금합니다. let vm = new Vue() 인스턴스 같긴 하네요.. 제가 잘 몰라 질문 내용에 불필요한게 포함된 점 양해부탁드립니다 :)
- 미해결Vue.js 시작하기 - Age of Vue.js
뷰 인스턴스의 타입 질문드립니다.
안녕하세요, 캡틴판교님. 인스턴스 복습하던 중, 궁금증이 생겨 질문드립니다. 생성자 함수를 통해 객체를 만들었는데, 그렇다면 vue 인스턴스 역시 타입이 객체일까요? 제가 typeof 함수를 통해 vm을 찍어봤을때는 undefined 라고 떠서요 ㅠ왜 이렇게 뜨는지와, vue 인스턴스의 타입 답변해주시면 감사하겠습니다
- 미해결Vue.js 시작하기 - Age of Vue.js
링크 깨짐
MDN 생성자 함수 설명 문서 링크가 깨졌습니다 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function 위 링크가 생성자 함수 문서일까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
root 컴포넌트에서 undefined로 받습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 선생님 안녕하세요. 제가 진행한 부분은 root 컴포넌트에 데이터를 event발생하여 전달하는 부분까지 진행했습니다. app-content에서는 num = 10이 잘 등록되었는데, 버튼 이벤트를 발생할 때는 root 컴포넌트에는 undefined로 인식하여 이 값을 대입하는 현상이 있습니다. 오타도 안 난 듯 한데.. 어디서 문제인지 갑이 잡히지 않습니다. ㅠㅠ 에러 : Property or method is not defined on the instance but referenced during render 소스 : <!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"> <!-- Vue 외부 스크립트 호출 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <app-header></app-header> <app-content v-on:pass="resultNum(value)"></app-content> </div> <script> Vue.config.devtools = true; // 개발도구 사용여부(이건 제가 별도로 찾아서 적용했습니다.) var appHeader = { template: '<div>header</div>' }; var appContent = { // passNum 이라는 버튼을 클릭했을 때 appHeader로 데이터를 전달하는 방법 // → Root 컴포넌트로 event 발생시키고 appHeader로 props 전달한다. // 이때 Root 컴포넌트에서 하위 컴포넌트로 props를 실행하려면 데이터를 선언해야 한다. template: '<div>content' + '<button v-on:click="passNum">header로 전달</button>' + '</div>', methods: { passNum: function() { this.$emit('pass', 10); } } }; // root 컴포넌트 new Vue({ el: '#app', components: { 'app-header': appHeader, 'app-content': appContent }, data: { num: 0 }, methods: { resultNum: function(value) { // num 받기 this.num = value; } } }); </script> </body> </html>
- 미해결Vue.js 시작하기 - Age of Vue.js
Reactivity 강의에서 Object.defineProperty 관련 질문입니다!
안녕하세요. 아래 강의 내용 중 궁금한 점이 있어 질문드립니다. - 강의 : Reactivity 구현 - 내용 : var viewModel = {}; 와 같이 선언 후, Object.defineProperty(viewModel, 'str', ...) 과 같이 str이라는 속성이 정의가 되었잖아요? 그리고 나서 크롬으로 실행한 다음에, 콘솔에서 viewModel.str = 'hello'; 라고 입력하면 할당했으니 "할당 hello"라고 출력이 됩니다. 그런데 그 다음에, viewModel.str을 입력하면 "접근"이라고는 나오는데, str의 값인 "hello"도 출력되어야 하는 것은 아닌가요? Object.defineProperty를 통해 정의된 속성은 유지되는게 아니라 그 안에서만 유지되는 지역변수와 같은 개념으로 이해하면 될까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
질문입니다.! CLI 4.5.x이상은 뷰3이 아닌 뷰2를 설치해야 하는 이유가 무엇인가요?
선생님 안녕하세요! 궁금한 점이 있습니다. 뷰 CLI 버전 4.5.x 이상 쓰는 사람은 프로젝트 생성시 Default ([vue2] babel, eslint) -> 뷰2를 선택하라고 하셨는데요. 저는 참고로 4.5.13입니다. :) 뷰3이 아닌 뷰2를 선택해야 하는 이유가 있나요? 제가 강의 외에 개인적으로 연습할때 뷰3으로 생성해서 만들때 뭔가 에러가 나거나 안되는 부분은 없었는데요. 강의를 촬영할 당시 뷰3이 최신 버전이라 버그가 안잡혔거나 동기화가 덜 되어서 비교적 안정화가 된 구버전을 쓰신건지...아니면 걍 강의 실습을 위해 버전을 통일한건데 강의가 아니라면 뷰3을 써도 상관 없는건지 궁금합니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
ES6 이상 버전에서는 var 대신 let const를 쓰는게 좋다고 하던데 여기서 나오는 var들도 let이나 const로 바꿔 써도 문제는 없는거죠?
제목과 같습니다