Typescript with Vue 실전 프로젝트

Typescript with Vue 실전 프로젝트

(10개의 수강평)

199명의 수강생
Vue.js웹 개발
16,500원
지식공유자 · 성도희
21회 수업· 총 3시간 41분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 중급이상
성도희의 다른 강의
연관 로드맵
아직 다른 강의가 없어요.
연관 로드맵이 없어요.
esquared 프로필

Property '$route' does not exist on type 'ItemList'. 이 에러는 무엇인가요..? esquared 1달 전

item-list.vue 파일에 

Property '$route' does not exist on type 'ItemList'. 이와 같은 에러가 발생합니다.

실행은 잘 되고 vs-code를 사용하고 있습니다.

아래 코드에서 $route 부분에 빨간줄이 그어져 있습니다.

@Watch('$store.state.todoList', {deep: true})
    stateUpdate() {
        const statusstring = this.$route.params.status;
        this.initRenderList(status);
   }

1
esquared 프로필

Cannot find module '@/components/message.vue'. esquared 1달 전

Home.vue 에서 script에 lang="ts"를 추가하면 Cannot find module '@/components/message.vue'.

이와같은 문제가 발생합니다.

빌드 및 실행은 잘되는데 신경이 쓰여서요... 구글링을 해서 처리했는데도 잘안됩니다.

혹시 다른 해결방법이 있을까요??

ide는 vscode를 사용하고 있습니다.

그리고 저는 Home.vue에서 export default를 붙이지 않으면 에러가 발생합니다. @Component({ 로 사용하려면

설정을 바꿔줘야 하나요??

 export default {

  components: {
    children,
  },
};

6
오명운 프로필

@Action, @Mutation 등으로 지정된 변수의 타입 오명운 2달 전

@Action private readonly decrease;

이렇게 해놓으면 decrease의 타입이 없다는 경고가 나오는데요, 어떻게 하면 경고를 없앨 수 있을까요?

0
안재용 프로필

안녕하세요. 강의 잘 들었습니다. 안재용 3달 전

좋은 강의 감사드립니다.

혹시 마지막 실전 프로젝트 소스 github로 공유해주시면 안될까요?

0
전민호 프로필

Axios Post보낼때 어떤 식으로 구성하는게 좋을까요? 전민호 4달 전

강의에서 Axios 를 클래스 방식으로 커스텀해서 쓰셨는데,

실질적으로

get만 보여주셨는데,, POST 방식으로 사용할때는 어떤식으로 사용해야하나요

?? 헤더를 넣고

써야하는데.. 맨 아래 예제 처럼 config에 헤더 구성해서 넣으면 되는 것인지..  궁금합니다.

export default class AxiosService {
  public static readonly instance: AxiosInstance = axios.create({
    baseURL: "http://localhost:8080",
    headers: {},
    timeout: 100000
  });
}
async addData({ commit }, data: object) {
      const config: object = {
        "content-type": "json"
      };
      const res: AxiosResponse<{
        todoList: Item[];
      }> = await AxiosService.instance.post("/data.json", data, config);

      commit("addItem", data);
    }

1
아로마홈키퍼 프로필

안녕하세요! v-for(v-bind:key), slice() 관련 질문이 있어요! 아로마홈키퍼 4달 전

안녕하세요! 매번 답변을 잘해주셔서 너무 감사합니다

v-for을 만드는 경우 :key를 설정해줘야한다고 알고 있습니다.
:key를 뭘로 또는 어떤걸로 설정하는게 좋나요?
랜덤한 유니크 값을 생성해서 넣어야 한다는 얘기도 있어서 궁금해서 여쭤봅니다!
여기서는 일단 id 값으로 넣었습니다.

두번째로 @Watch 로직을 만들때
this.data.slice().filter(...) 로 하시더라구요.
this.data.filter(...)도 동작을 하는데
slice()를 넣어주신 이유가, data가 any[] 이기때문에
무엇이 올지 모르니 일단 array로 만들어야겠다 라는 생각으로 하신걸까요?

3
전민호 프로필

에러 표시 질문이요! 전민호 4달 전

개발자 도구에서 보면 아래 사진과 같은 에러가 뜨는데 무슨 이유 인가요?

import {Module, VuexModule, Mutation, Action} from 'vuex-module-decorators';

@Module({namespaced: true, name: 'moduleB'})
export default class ModuleB extends VuexModule {
    data: string = 'moduleB';
    
    @Mutation
    setData(data: string){
        this.data = data;
    }

    @Action
    editData(data: string) {
        this.context.commit('setData', data);
    }

    get moduleBdata(){
        return this.data;
    }
}

3
아로마홈키퍼 프로필

vuex-module-decorators 보다 오리지널 모듈 형태를 선호하시는 이유가 무엇이신가요? 아로마홈키퍼 4달 전

안녕하세요!
재밌게 잘 듣고 있습니다.
vuex-module-decorators를 배우고 나니 기존 형태보다 더 편해 보이는데 오리지널 방식을 선호하시는 이유가 무엇인지 궁금합니다!

2
전민호 프로필

안녕하세요. 초기 셋팅시 질문있습니다. 전민호 4달 전

초기셋팅에서 typescript 고른 후에 넘어가서 린트 설정하는 부분인데요. TSLint가 Duplicated 됐던데, 실제서비스에서는

어떤 걸 사용하나요? 본 동영상 강의는 그냥 TSLint로 해도 될 것 같긴 합니다만.. 실제 회사에서는 어떤걸 쓸지 궁금하네요..

2
아로마홈키퍼 프로필

안녕하세요! Vuex, actions 질문이 있습니다. 아로마홈키퍼 4달 전

안녕하세요! 재밌게 잘 듣고 있습니다.

actions의 역할이 state의 변수에 대한 계산을 담당하는 것이라 이해를 하였습니다.

그렇다면 actions에 비즈니스 로직이 담겨지는 것인가요?
예를 들어 input 값을 바탕으로 어떠한 계산을 한다고 할 경우 
이 어떠한 계산을 하는 부분이 컴포넌트의 method에 담겨지는 것인지, 아니면 actions에 담겨지는 것인지 궁금합니다.

만약 actions에 담기지 않고 컴포넌트의 method에 담긴다고 할 경우에는 계산(component,-methods) 후 바로 mutation을 호출 하면 될 것 같거든요. 

2
전민호 프로필

클래스 속성 에러는 무엇인가요?? 전민호 5달 전

아래와 같이 나는데.. 붙여주어야 하나요?

WARNING in /Users/porori/Dev/private/type-video/src/views/Home.vue(22,4):

22:4 The class property 'message' must be marked either 'private', 'public', or 'protected'

    20 | })

    21 | export default class Home extends Vue {

  > 22 |    message: string = 'hello world';

       |    ^

    23 | }

    24 | </script>

    25 | 

No type errors

1
오별 프로필

npm install --save vue-class-component 에러 오별 7달 전

vuex-class를 설치하고 난후 에러 발생.

vue-class-component 설치하고 나면 정상적으로 실행됨

1
dgahn 프로필

컴포넌트 별로 변수명과 메소드명을 다르게 해주실 수 없나요? dgahn 8달 전

전부다 같은 이름 써있어서 뭐가 뭔지 헷갈리네요..

1
한남일 프로필

vue typescript프로젝트에서 styled-component 사용방법 한남일 10달 전

안녕하세요.

vue typescript 프로젝트에 styled-component 적용하려고 하니 계속해서 타입에러가 발생합니다. 

혹시 관련하여 적용방법 공유 가능하실까요?

1
ChangHyeon Bae 프로필

안녕하세요? @Prop 관련 질문좀..ㅠㅠ ChangHyeon Bae 10달 전

템플릿은.

<template v-if="todoData.length">
<Item v-for="todo in todoData" :todoItem="todo"/>
</template>

 

위와 같구요.

@Component({
components: {ItemInput, Header, Item},
})
export default class TodoList extends Vue {

public todoData: any[] = [{id: 0, title: 'test', status: 'active'}, {id: 1, title: 'test', status: 'clear'}, {id: 2, title: 'test', status: 'clear'}];
}

 

스크립트 부분에서는 이렇게 초기화를 해줍니다.

그러면 3개가 들어있으니 3번 반복까지는 되는데

자식 컴포넌트에서 저 값을 받지를 못합니다..

props 로 하면 잘 됬던걸로 기억하는데.. 이부분도 제가 TS 지식이 부족해서 그런거 같기도하고 ㅠㅠ

 

import {Component, Prop, Vue} from 'vue-property-decorator';

export default class Item extends Vue {

@Prop() public readonly todoItem!: object | undefined;

public changeStatus() {
console.log(this.todoItem);
}

public removeItem() {

}
}

자식에서는 위와 같이 쓰는데..

저기에 빈 객체로 초기화를 해줘도 잘 안되네요 ㅠㅠ

도와주세요!

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