📱인프런 모바일 App 😆
누구나 다루기 쉬운 Vue.js 입문 - 3시간 안에 배우기

누구나 다루기 쉬운 Vue.js 입문 - 3시간 안에 배우기

(51개의 수강평)

1093명의 수강생 공개 되지 않은 강좌 입니다
ukjae lee 프로필

[실습]Vue CLI 와 싱글파일 컴포넌트를 이용한 컴포넌트 등록 강좌에서 질문있습니다 ukjae lee 9달 전

Global component는 Main.js에서 만드셨고 Local component는 App.vue 에서 만드셨는데 Global coponent는 꼭 Main.js에서 만들어야하는건가요? Main.js가 하는 역할을 몰라서 전역과 지역을 다른곳에 나눠서 만들어야하는건지 헷갈리네요.

마지막으로 뷰 CLI에서 화면보이게 하는 요소는 App.vue에 정의해야 브라우저상에서 화면을 볼 수 있는거죠?

0
김진영 프로필

퀴즈 기본문제에서 props와 template의 값이 todo인 이유가 궁금합니다. 김진영 7달 전

이전에 props를 사용할때는

<child-component v-bind:passeddata="message"></child-component>

var app = new Vue({

el: '#app',

data: {

message: 'hello vue! passed form parent'

}

});

이런식으로 props의 값은 같았던 것 같은데 이번 퀴즈에서는

v-for에서 반복할 객체만 같은 이름으로 사용해야하는 이유가 무슨이유일까요?

1
habong8879 프로필

전역-지역 컴포넌트 충돌시 habong8879 7달 전

같은 태그에 global component와 local component를 동시에 등록하면

local만 나오는데(global은 안나옴) (충돌되지 않게 다른 태그를 입력하면 다른 게 나옴) 어떤 순서가 있는건가요?

Vue.component('todo-footer',{ template:This is another child global component`

});

var cmp = {

template: <p>This is another child local component</p>

};

var app = new Vue({

el: '#app',

data: {

message : 'This is a parent component'

},

components : {

'todo-footer': cmp

}

});`

이경우에 결과물에서

This is another child global component 는 안보이고

This is another child local component가 보입니다. (todo-footer 태그를 두 개 등록해도 동일)

1
hobak 프로필

todolist 만들기 질문입니다 hobak 2018.08.02

소스는 없나요?

따라서 하는데 잘 안되어서 제가 먼가를 잘못했나 싶은데 모르겠어서 소스를 비교해보고 싶은데요~

1
Philip Son 프로필

dev 서버에 관련해서 질문있습니다. Philip Son 2018.07.09

webpack-simple로 프로젝트를 생성할 경우 프로젝트에 포함된 경로에 php 로 http 통신을 할려면 서버를 어떻게 설정해야하나요? webpack에서 제공해주는 서버가 있다고 하셨는데, npm run dev 로 했을 경우 해당 프로젝트에 있는 php 파일에 찾지 못하더라구요 혹시나 어떤 방법이 있는지 부탁드립니다.

0
김민정 김 프로필

vue.js, app.js 를 맨 아래쪽에서 임포트 하는 이유 김민정 김 2018.06.20

vue.js, app.js를 해더태그 안쪽이나 바디태그 내부의 위쪽에서 불러오지 않고 코드의 맨 아래쪽(바디의 마지막 부분)에 위치한 이유는 무엇인가요?

1
홍성진 Hong 프로필

라우터를 사용할 때, mounted가 호출되지 않는 경우에 대한 질문 홍성진 Hong 2018.05.08

전업 개발자는 아니고, 취미겸 자기 계발을 위해 웹 프론트 엔드를 공부하고 있는 직장인입니다.

강사님의 강의 잘 들었습니다.

현재 저는 강의 이후에 vue.js로 간단한 웹페이지를 만들어보고자 시도하고 있습니다.

일단, 제가 근무하는 회사에서 직원들끼리 이루어지는 커피 내기의 기록을 그래프 형태로 보여주는 웹페이지를 만드는게 목표입니다.

firebase와 vue.js를 이용하여 하나씩 구현해 나가고 있고,

vue.js 부분의 경우 아래 웹페이지의 구현 예제를 수정해 나가면서 구현해보고 있습니다.

https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44

이 과정에서 혼자 아무리 생각해보고, 검색해보아도 풀리지 앟는 문제가 있어, 수업에서 다룬 예제가 아닌데도 실례를 무릅쓰고 질문드립니다.

제가 만들고자 하는 사이트의 경우 사람별로 route url이 설정됩니다.

이때. A라는 사람에 대한 차트를 ~/A를 통해 그려주고, B라는 사람에 대한 차트를 ~/B를 통해 그려줍니다. 이후 다시 ~/A를 통해 차트를 그리려고 하면 차트에 사용되는 데이터가 업데이트 되었음에도 차트를 그려주는 컴포넌트에서 mounted가 호출되지 않습니다.

구체적으로 위 링크의 예제에서 start.vue 페이지의 downloads와 labels가 업데이트 됨에도 linechart 컴포넌트의 mounted가 호출되지 않습니다. 이상황에서 이전에 사용하지 url을 통해 차트를 그리는 경우, linechart 컴포넌트의 mounted가 호출됩니다.

혹시, 충분한 정보 없이 질문 드렸다면 죄송합니다.

1
Yonghun Jang 프로필

:key="todo.id" 에러 관련 질문 드립니다. Yonghun Jang 2018.04.10

:key="todo.id" 를 추가할 경우 undefined 에러가 뜨는데 코드상에서 문제점을 알 수가 없어 질문 드립니다. 어느 부분에서 문제가 발생했을까요?? 코드는 다음과 같습니다.

-app.js

Vue.component('todo-item', {

props: ['passedData'],

template: '<p>{{ passedData.text }}</p>'

});

Vue.component('todo-list', {

props: ['list'],

template: '<p>{{list.text}}</p>'

});

var app = new Vue({

el: '#app',

data: {

Todos: [

{ id: 0, text: 'Learn Vue.js' },

{ id: 1, text: 'Learn Components' },

{ id: 2, text: 'Learn Props' },

{ id: 3, text: 'Learn For Loop' }

],

Languages: [

{ id: 0, text: 'python'},

{ id: 1, text: 'c++'},

{ id: 2, text: 'java'},

{ id: 3, text: 'objective-c'}

]

// 할일 #1

// 배열 안에 python, c++, java, objective-c 를 값으로 갖는

// Languages 프로퍼티를 추가하여 위에 제작한 todo-list 컴포넌트에 전달하고,

// 배열 값을 모두 for loop 로 출력하세요.

}

});

-index.html의 내용

    <div id="app">

<!-- Child Component -->

<todo-item v-bind:todo="todo" v-for="todo in Todos" :key="todo.id"></todo-item>

<todo-list v-bind:passed-data="language" v-for="language in Languages" :key="language.id"></todo-list>

<!-- v-for에서 가져온 language를 다시 props인 passed-data로 전달해준다 -->

<!-- 할일 #3 -->

<!-- todo-list 컴포넌트 등록 -->

</div>

1
seungwoo lee 프로필

vue 템플릿 자동완성 안되요 seungwoo lee 2018.03.20

language-vue 설치했는데 autoclose-html 만 작동해서 닫는 태그로만 가 자동으로 만들어지고 vue 템플릿은 자동완성이 안됩니다. 설명이 좀 부족한거 같습니다 ㅠㅠ

3
seungwoo lee 프로필

퀴즈 실습 코드 깃헙 링크가 없네요 seungwoo lee 2018.03.14

퀴즈 실습 코드 깃헙 링크가 없네요

다른 퀴즈 강의에는 있었던거 같아서 질문 남깁니다.

1
VANILLA 프로필

npm run dev 시 Cannot find module 'webpack' 오류 VANILLA 2018.04.28
강의대로 따라하고 있는데 npm run dev 시 Cannot find module 'webpack' 오류가 나서 로컬 서버가 안뜹니다.ㅜㅜ npm install 후에 생성된 node_modules 폴더보면 제 로컬에 생성된 폴더랑 다르기도 하구요. (제 로컬에는 node_modules에 하위폴더로 vue 폴더가 생성됩니다. 이건 정상인가요?? ) 이런경우 어디 설정을 봐야할까요..?

1
박영일 박 프로필

sample 소스에 대한 설명이 없네요. 박영일 박 2017.10.13
설명 듣다가 github에서 소스 다운 받아서 보려니 갑자기 설명에는 없는 소스들이 주루룩~ 그 소스에 갑자기 끼워서 실습 해 보려니 헷갈립니다. 예제를 미리 넣어둔것은 알겠는데...처음부터 함께 코딩 해 보는것도 좋을 것 같아요.

0
강한용 강 프로필

vue template 자동 완성 강한용 강 2017.10.09
저는 atom에 template이라고 치면 자동 완성되지 않는데 혹시 왜 그럴까요?

0
큰돌샘(JoyWins) 프로필

ES5 와 ES6 에 관한 링크 추가 큰돌샘(JoyWins) 2017.09.23
강의중에 ES5 와 ES6 에 관한 링크 아래쪽에 추가해주신다고 하셨는데 링크가 없네요. 링크 추가 부탁드립니다.

0
큰돌샘(JoyWins) 프로필

머스타쉬기호({{}}) T사용의 제한은 클래스만 해당한다는 말씀이신가요? 큰돌샘(JoyWins) 2017.09.23
'뷰 라이브러리 버전 업에 따른 내용 변경' 설명은 class 만 해당하는거 맞나요? 앞서 설명해주신 Interpolation, Binding Expression 에서 사용한 머스타쉬({{}}) 는 계속 사용해도 되는거 맞나요?

0