Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

(110개의 수강평)

1465명의 수강생
울룰룰랄랑 프로필

v-bind 및 :에 대해 궁금한게 있어 질문드립니다.. 울룰룰랄랑 5일 전

안녕하세요!

vue를 사용하다 문득 궁금한게 떠올라 질문을 드리게 되었는데욤..

예를 들어, v-bind:style 과 :style이라는 태그가 있는데, 이 태그들의 차이점이 무엇인지 궁금합니다.

또 하나 더 질문드리자면, @click과 v-bind:click이 찾아보니 같다고 하는데 무슨 차이가 있는지도 궁금합니다.

감사합니다. :D

3
desk53 프로필

component vue생성 이후에 나는 오류 desk53 6일 전

강의 들은걸 참고해서 로그인 창을 만들어보고 있습니다. component에서 새로운 signup.vue파일을 생성한 이후로 오류가 뜹니다. 그리고 loginfooter.vue에서도 <template>을 없애지 않고 serve실행시키면 같은 오류가 뜹니다. 설치 파일이 잘못되었다고 하기에는 webpack,vue,vuex,router다 멀쩡히 설치가 되어있는데 원인을 모르겠습니다.

2
김예란 프로필

강의 내용중 이해가 가지 않는 부분이 있습니다. 김예란 6일 전

5:50 부분을 보시면, 말씀하실 때

1) App.vue에 header,input,list,footer등의 컴포넌트가 등록 되어있고

2) App.vue는 main.js의 뷰 인스턴스에 등록이 되어있다 하셨는데

3) 따라서 TodoInput에 있는 this는 현재의 TodoInput.vue 컴포넌트를 가리킨다 라고 하셨는데요.

2번과 3번 각각은 이해가 되는데, 둘의 연관성이 이해가 되지 않습니다.

결국 한개의 App.vue 인스턴스에 등록되어있다면 해당 this는 App.vue를 가리켜야하는 것 아닌가요?

왜 TodoInput을 가리키게 되는건가요??

뷰파일이 분리되면 this도 분리되서 해당 컴포넌트를 가리키게 되는건가요?

아니면 전역에서 newTodoItem을 선언한 파일은 TodoItem밖에 없으니 전역에 있는 data()를 들고온건가요?

2
김예란 프로필

vue create로 생성해서 프로젝트 실행해도 되나요? 김예란 8일 전

vue create로 생성하면 잘 되는데,

두번째로 알려주신 webback 명령어로 프로젝트 실행하게되면 아래와 같은 에러가 계속 뜹니다.

스택오버플로우에 해결책을 찾아보아도

다들 같은 에러를 안고있네요 ㅠㅠ;

한시간동안 해결을 못하겠는데 vue create로 실행하면 정상작동합니다. 괜찮을까요?

문제가 뭐였을까요?

2
Ji Hyun Kim 프로필

vue.js 에 chart ,grid 강의 Ji Hyun Kim 9일 전

vue.js에 chart ,grid 관련 강의도 있나요?

1
닉네임 프로필

VSCode 플러그인 설치 문의 닉네임 10일 전

Vue.js 시작하기 강의 수강후 이어서 Vue.js 중급 강좌를 듣고 있습니다.

강의 내용중 VSCode 플러그인 설치 하는 부분에서 

Vue.js 시작하기 강좌에서는 ESLint

Vue.js 중급 강좌에서는 TSLint를 설치하라고 나오는데

두개를 다 설치 해야 하는건지요?

1
Ji Hyun Kim 프로필

아이콘 표기가 안됩니다.~ Ji Hyun Kim 10일 전

<span class="addContainer" v-on:click="addTodo">   
      <i class="fas fa-plus addBtn"></i> 
</span>
강의 내용 같이 코딩 작업을 하고 있습니다.
아이콘 표기가 안됩니다. 어느분을 점검 해야되는지요?

2
desk53 프로필

git 권한 신청합니다. desk53 10일 전

닉네임:desk53

인프런 이메일:desk53@naver.com

github:desk535353@gmail.com

github 닉네임:kmin-jeong

1
desk53 프로필

npm run serve 멈춤현상 desk53 11일 전

실행한지 10분정도 지났는데 터미널이 계속 멈춰있어요. 어떻게 해결해야할지 잘 모르겠습니다.

2
소나무 프로필

강의 영상을 볼 수 없습니다. 소나무 12일 전

빨간색 배경에 흰색 글씨로 "levelLoadError" 메시지가 나옵니다. 어떻게 하면 강의 영상을 볼 수 있을까요?

1
doqndnffo 프로필

안녕하세요. 간단히 서버를 만들어서 axios로 비동기 통신하던중 질문드립니다. doqndnffo 13일 전

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex);
const storage = {
    fetch() {
        const headers = {
            'Content-Type' : 'application/json',
            'Accept' : 'application/json'
        };
        return axios.get("http://localhost:8080/todo/list", {headers})
            .then(response => {
                console.log(response.data.result); //이부분 출력시는 잘나옴..
                return response.data.result //리턴하면 Promise가 todoItems에 Object로 들어감...
            });
        /*
        if (localStorage.length > 0) {
            for (let i =0; i < localStorage.length; i++) {
                if(localStorage.key(i) != 'loglevel:webpack-dev-server') {
                    let value = JSON.parse(localStorage.getItem(localStorage.key(i)));
                    arr.push(value);
                }
            }
        }
        */
    }
};
export const store = new Vuex.Store({
   state: {
       todoItems : storage.fetch()
   },
    mutations : {
        addOneItem(state, todoItem) {
            const obj = {
                seq : null,
                completed : false,
                item : todoItem
            };
            //localStorage.setItem(todoItem, JSON.stringify(obj));
            state.todoItems.push(obj);
        },
        removeOneItem(state, payload) {
            localStorage.removeItem(payload.todoItem.item);
            state.todoItems.splice(payload.index, 1);
        },
        toggleComplete(state, payload){
            state.todoItems[payload.index].completed = !state.todoItems[payload.index].completed;
            localStorage.removeItem(payload.todoItem.item);
            localStorage.setItem(payload.todoItem.item, JSON.stringify(payload.todoItem));
        },
        clearTodo(state) {
            state.todoItems = [];
            localStorage.clear();
        }
    },
    actions : {
        add(context, payload) {
            return axios.post("http://localhost:8080/todo/add", payload, {
                headers : {
                    'Content-Type' : 'application/json;charset=utf-8'
                }
            }).then(response => context.commit('addOneItem', response));
        }
    }
});

안녕하세요. 비동기통신을 하던중 서버에서 데이터를 잘 가져왔고 response를 console로 찍었을떄 Array가 나왔는데 이제 fetch 함수에서 todoItems를 초기화해줄떄 Promise라는 객체로 들어가게 됩니다. ㅠㅠ

예제처럼 arr로 들어가게 하고싶은데 혹시 어떻게 해야할까요..?ㅠㅠ 강의중 말씀하신 Promise 인지...

2
throughrileysview 프로필

localStorage 문의드립니다. throughrileysview 13일 전

안녕하세요. Todo App 실습 중 궁금증이 생겨 질문드립니다.

할 일 완료 처리를 할 때,

해당 Key에 해당하는 Value의 completed가 바뀌는 것이 아니고,

추가로 Object가 생겨 completed와 item값이 바뀝니다.

새로고침 시, 제가 입력한 1/2/3/4 외에 Object의 1이 추가로 리스트에 보여지는 문제가 발생합니다.

혹시 저만 이런 문제가 발생하는지, 어떻게 고쳐야하는지 궁금합니다.

감사합니다.

1
hammer0130 프로필

github 저장소 관련 질문입니다. hammer0130 15일 전

안녕하세요. 강의 잘 듣고 있습니다. 

제가 gitlab과 github를 같은 이메일로쓰고 있는데 오늘 github의 vue-intermediate 들어가보니 

master 브랜치에 제가 커밋한 파일이 올라가 있더라구요; ;;;;;

저는 어제 gitlab의 개인  저장소에 올렸었는데.. 

1. gitlab과 github는 같은 메일을 쓰면 연동이 되는건가요?

2. 다른 아이디로 로그인하면 master는 원래대로 보이는지..?

답변 부탁 드립니다.

감사합니다.!

1
dareme798 프로필

컴포넌트 등록 dareme798 15일 전

컴포넌트 등록할때 

 components: {
    TodoHeader,
    TodoFooter,
    TodoList,
    TodoInput
 }

아니면 'TodoHeader' : TodoHeader 이렇게 하는건 다 컴파일 오류이고 

 components:{
    'todo-header':TodoHeader,
    'todo-list':TodoInput,
    'todo-input':TodoList,
    'todo-footer':TodoFooter
 }

이렇게 해야만 오류가 안납니다.

강사님처럼 할 수 있는 방법이 있나요 ?? 

3
dareme798 프로필

버전문제입니다 dareme798 15일 전

기초강의보고 이제 막 시작하고있습니다.

강의에서 webpack.config.js 파일을 추가하셨는데,  v4 에서는 그냥 create 로 하면되나요 ?? 아니면 vue init webpack-simple vue-todo 해서 웹팩설정 파일? 이것도 같이 프로젝트안에 생성되게 해야하나요 ??

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