16,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨Typescript with Vue 실전 프로젝트
에러 표시 질문이요!
개발자 도구에서 보면 아래 사진과 같은 에러가 뜨는데 무슨 이유 인가요? 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; } }
- 미해결Typescript with Vue 실전 프로젝트
vuex-module-decorators 보다 오리지널 모듈 형태를 선호하시는 이유가 무엇이신가요?
안녕하세요!재밌게 잘 듣고 있습니다.vuex-module-decorators를 배우고 나니 기존 형태보다 더 편해 보이는데 오리지널 방식을 선호하시는 이유가 무엇인지 궁금합니다!
- 해결됨Typescript with Vue 실전 프로젝트
안녕하세요. 초기 셋팅시 질문있습니다.
초기셋팅에서 typescript 고른 후에 넘어가서 린트 설정하는 부분인데요. TSLint가 Duplicated 됐던데, 실제서비스에서는 어떤 걸 사용하나요? 본 동영상 강의는 그냥 TSLint로 해도 될 것 같긴 합니다만.. 실제 회사에서는 어떤걸 쓸지 궁금하네요..
- 미해결Typescript with Vue 실전 프로젝트
안녕하세요! Vuex, actions 질문이 있습니다.
안녕하세요! 재밌게 잘 듣고 있습니다. actions의 역할이 state의 변수에 대한 계산을 담당하는 것이라 이해를 하였습니다. 그렇다면 actions에 비즈니스 로직이 담겨지는 것인가요?예를 들어 input 값을 바탕으로 어떠한 계산을 한다고 할 경우 이 어떠한 계산을 하는 부분이 컴포넌트의 method에 담겨지는 것인지, 아니면 actions에 담겨지는 것인지 궁금합니다. 만약 actions에 담기지 않고 컴포넌트의 method에 담긴다고 할 경우에는 계산(component,-methods) 후 바로 mutation을 호출 하면 될 것 같거든요.
- 해결됨Typescript with Vue 실전 프로젝트
클래스 속성 에러는 무엇인가요??
아래와 같이 나는데.. 붙여주어야 하나요? 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
- 미해결Typescript with Vue 실전 프로젝트
npm install --save vue-class-component 에러
vuex-class를 설치하고 난후 에러 발생. vue-class-component 설치하고 나면 정상적으로 실행됨
- 미해결Typescript with Vue 실전 프로젝트
컴포넌트 별로 변수명과 메소드명을 다르게 해주실 수 없나요?
전부다 같은 이름 써있어서 뭐가 뭔지 헷갈리네요..
- 미해결Typescript with Vue 실전 프로젝트
vue typescript프로젝트에서 styled-component 사용방법
안녕하세요. vue typescript 프로젝트에 styled-component 적용하려고 하니 계속해서 타입에러가 발생합니다. 혹시 관련하여 적용방법 공유 가능하실까요?
- 미해결Typescript with Vue 실전 프로젝트
안녕하세요? @Prop 관련 질문좀..ㅠㅠ
템플릿은. <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() { }} 자식에서는 위와 같이 쓰는데.. 저기에 빈 객체로 초기화를 해줘도 잘 안되네요 ㅠㅠ 도와주세요!
- 미해결Typescript with Vue 실전 프로젝트
@Emit 으로 Data 전달해주기.
혹시라도, this.$emit('count', this.xxx); @count=count($event) methods: { count(countNum){ console.log(countNum); }, } 이런식으로 데이터를 전달하고 싶은신분이 있을까봐 예제코드 남깁니다. @Emit('passData') // 이름이 같으면, 데코레이터에 굳이 명시해주지 않아도 된다.public passDataToParent() { return this.childNum++;} return 으로 넘기고. v-on:passData="passDataToParent($event)" public passDataToParent(value: number | string) { console.log('passDataToParent..'); this.receiveMessage = value;} 이런식으로 사용하시면 됩니다.
- 미해결Typescript with Vue 실전 프로젝트
@Watch 질문 드립니다!
안녕하세요? watch 속성 질문 드립니다. <div> <p> @Watch </p> <button @click="changeMessage">메세지 변경</button> <div>{{cMsg}}</div></div> import { Component, Vue, Watch } from 'vue-property-decorator'; export default class Home extends Vue {public message: string = 'hello children'; public cMsg: string | undefined; public alertMsg: string = '변경이 감지되었습니다.'; // immediate : 즉시 호출하겠다는 의미. // deep : object 내의 속성값까지 감시. // @Watch('cMsg', {immediate: true, deep: true}) @Watch('cMsg')public watchAlertMsg(value: string | undefined, oldValue: string | undefined) {console.log(value); console.log(oldValue); alert(this.alertMsg); }public changeMessage() {this.cMsg = 'change'; }} 위와 같이 코딩을 했는데, cMsg 상태변수에 '' 이런식으로 초기화를 해둔경우는 정상적으로 동작을 하는데, 위와 같이 하면 왜 변경감지가 안되는지 알고싶습니다. TS를 사용안한 vue에서는 테스트를 해보지는 못했습니다..ㄷㄷ public cMsg: string | undefined = ''; 위와 같이 초기화를 해주면, 옆에 사진과 같이, 해당 컴포넌트 상태변수로 존재합니다. = ''; 구문을 빼면, 상태변수 자체도 안보이구요 제가 TS구문을 잘 몰라서 이런거 같기는 한데.. public cMsg: string | undefined 해당 상태변수에 문자열 또는 undefined 가 할당이 될수 있어 이거 아닌가요? 그러면 제 생각은 cMsg = undefined; 이런거니 여기서 값이 바뀌면 감지가 되야 하는거같은데..ㅠㅠ 어렵네요 watch: { testWatch(after, before) { console.log('감지?'); console.log(before); console.log(after); }}, data() {return { testWatch : undefined, };} 위 와 같이 하면, 정상적으로 감지(값을 변경할때마다)가 되어서 watch 속성 콜백함수가 호출이 됩니다. TS 당신은 왜..ㅠㅠ
- 미해결Typescript with Vue 실전 프로젝트
클래스 속성 하실 때, ! ? 에 대한 설명.
! ? 를 뭐라고 부르나요?? @Prop() public parentMessage: string | undefined; // 엄격모드 시, 클래스 속성은 초기화 해줘야한다.@Prop() private parentMessage2!: string; // ! ? 만약, 부모컴포넌트에서 내려주는 데이터들이 많으면, 위와 같이 코딩을 하면 되나요? 축약코딩법이 있는지.. 예) props: { totalPages : Number, currentPage : Number,}, props: { title: { type: String, default: '배송지 선택' }, delivery: { type: String }, callParent: { type: String, default: '' }},
- 미해결Typescript with Vue 실전 프로젝트
@Decoratort 관련하여 설명 좀 더 부탁드립니다.
데코레이터는 그냥 함수라고 하셨는데, 예제소스에 보면, 생성자 함수를 받아서 속성을 추가 못하게 막았다고 하는데, 어떤원리인지 좀 궁금합니다. Greeter 클래스에 @sealed 데코레이터가 있는데, 그러면, sealed 함수에 인자로 Greeter가 넘어가나요?
- 미해결Typescript with Vue 실전 프로젝트
The class property 'message' must be marked either 'private', 'public', or 'protected'
해당 에러가 발생하시는 분들은.. https://palantir.github.io/tslint/rules/member-access/ 위 링크 참조하셔서, tslint.json 설정 하시면 될거같습니다. "member-access": false 이렇게 두시거나, 클래스 property(속성)에 접근제어자를 사용하시면 됩니다. public message: string = '메시지';
- 미해결Typescript with Vue 실전 프로젝트
@emit강의에서 이어지는게 맞나요? 뭔가 비디오가 짤린 느낌이네요.
연결부분이 매끄럽지 않아요. 뭔가 앞에가 짤린 느낌인데 확인 후 그런게 맞다면 조속한 처리 부탁드립니다.