store 사용 방법 관련 질문입니다.

안녕하세요! 두가지 질문을 해주셨는데, 넘버링하여 답변드리도록 하겠습니다 ^^ 1. 결론적으로만 말씀드리자면 네. 실제로 스토어에 저장해서 사용하기도 합니다. 2. 저장하는 양에 한계는 없지만 처리할 데이터가 많다면 성능 이슈가 발생할 가능성이 높습니다. 보통 많은 데이터를 처리할 때는 말씀하신 대로 필요할때 불러서 처리합니다. 예를 들어 게시판같은 리스트 형식은 페이징 처리를 하거나 무한스크롤 처리를 하지요? 같은 이유입니다 ^^ 감사합니다.

removeItem 에서 element 가 하나 남았을 때 삭제가 되지 않는 문제

안녕하세요! 일단 보내주신 코드는 올바른 접근 방법입니다. 보통 데이터에서 id는 해당 아이템의 고유한 값으로 설정되므로, findIndex를 사용하신것은 아주 휼륭한 판단이십니다.👍👍 (제가 예제로 코딩한 부분은 편의를 위해 일반적인 id와는 다르게 array상에서 아이템의 인덱스의 용도로 사용하였습니다.) 하지만 그 전에 왜 삭제가 되지 않는 버그가 있는 것 인지 확인해 보니, ItemInput 컴포넌트에서 addItem 할 때, id 값을 설정하는 부분에서 문제가 있는것으로 보입니다. ㅠㅠ addItem() { this.$store.commit('addItem', { id: this.todoList.length + 1, title: this.title, status: 'active', });} 코드와 같이 todolist 아이템 개수 + 1 = id 입니다. 그리고 이 id값은 스토어에서 removeItem, ChangeStatus에서 todolist Array의 특정 item을 찾는 인덱스 값이 됩니다. 여기서 포인트는 ⭐Array의 인덱스는 0부터 시작⭐한다는 것입니다!! 따라서 영상 말미에 새로 추가한 아이템의 id는 기존 아이템 개수인 2개에 1을 더해 3이 되고, todolist Array의 세번째에 추가되고 인덱스는 2가 됩니다. ex. [첫번째 아이템: 인덱스0, 두번째 아이템: 인덱스1, 새로 추가한 세번째 아이템 인덱스2] id와 인덱스가 동일하지 않기때문에 이 추가된 아이템은 삭제가 되지 않습니다. 이에 따라 혼동을 드린 점 정말 죄송합니다 ㅠㅠ 빠른 시일내에 잘못 된 부분은 업데이트 될 수 있도록 하겠습니다. 다른 문의 사항이 있으시면 편하게 질문 게시판 남겨주세요!

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

안녕하세요! $route가 this, 즉 class 내부에 타입이 정의되어 있지 않아 발생하는 typescript warning입니다. 아래와 같이 vue-router에서 type을 수동으로 import해서 해결하실 수 있습니다. import { Vue } from 'vue-property-decorator' import 'vue-router/types/vue' @Component export default class MyComp extends Vue { click() {console.log(this.$route)} } 자세한 내용은 아래 링크를 참고해 보시기 바랍니다. https://github.com/nuxt-community/typescript-template/issues/23

Cannot find module '@/components/message.vue'.

안녕하세요. https://github.com/vuejs/vetur/issues/762 이 링크의 마지막쯤을 보시면 For now, the quickest fix for this error is to rearrange your folder structure in VS Code. To fix: Manually drag your Vue App's Folder to the top of your opened projects inside of your VS Code workspace. 이런 내용이 있습니다. vue 프로젝트 폴더를 오픈해서 해결되었다는 내용입니다. tsconfig.json 파일이 vue_study 폴더의 루트에 있는것이 중요한것이 아니라 해당 vue 프로젝트가 vscode workspace의 루트에 있냐가 중요한것 같습니다. vue_study 폴더를 열어서 사용하신것인지, vue_study 폴더가 포함된 상위 폴더를 열어서 사용하신것인지 먼저 확인해 보시기 바랍니당.. vue 의 이슈가 아니기 때문에 자세한 도움을 못드려 죄송합니다.ㅠㅠ 그럼 두번째 질문에 대한 답변을 드리겠습니다. export default 를 클래스 앞에 붙이지 않으면 에러가 발생한다는 말씀이시죠? (제가 제대로 이해한건지 ㅠㅠ) App.vue는 main.ts에서 import 해서 사용하고 있습니다. 따라서 export default를 붙여주는 것입니다. 아래 링크에 import/export에 대한 자세한 설명이 있습니다. https://medium.com/@enro2414_40667/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-export-import%EC%A0%95%EB%A6%AC-137ac9e327d9 제가 질문을 잘못 이해한 거라면 좀 더 구체적인 내용으로 재질문 부탁드리겠습니다. 감사합니다.

Cannot find module '@/components/message.vue'.

안녕하세요. 해당 프로젝트를 clone해서 확인해 보았는데, 일단 말씀해주신 Home.vue라는 파일이 없습니다 ㅠㅠ 실행해보니 Cannot find module~ 이라는 에러는 발생하고 있지 않구요. 아마 vscode쪽 이슈인듯 합니다. 제가 vscode를 사용하지 않아서 정확히는 모르지만... 조금 검색해본 결과 혹시 vscode에서 프로젝트의 상위 폴더로 open하여 작업하고 계신것은 아닌지 확인해 보시기 바랍니다. (ex. 프로젝트 폴더 이름이 vue-study라면, vscode에서 vue-study의 상위 폴더로 오픈하여 작업) tsconfig.json이 root에 있지 않으면 동일한 에러가 발생하는 듯 합니다. 아래 링크를 참고해 보시기 바랍니다. https://github.com/vuejs/vetur/issues/762 두번째로 질문주신 export default는 Home.vue가 없어서 답변이 불가능합니다. ㅠㅠ 감사합니다.

Cannot find module '@/components/message.vue'.

esquared 님 안녕하세요? 혹시 제가 전체 소스를 확인할 수 있는 방법이 없을까요? 소스 일부분만으로는 문제의 파악이 어렵네요 ㅠㅠ 깃허브등에 업로드하시고 주소를 알려주시면 도움을 드릴 수 있도록 하겠습니다. 감사합니다.

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

안녕하세요! AxiosService에서 instance에서 설정한 header 값은 instance를 통한 모든 호출에 적용되는 값이니통일된 header 값이 있다면 instance에 설정해서 쓰시는것이 좋습니다.한번만 설정해놓으면 되니까요 ^^ 특정 통신에서만 사용되는 header값이 있다면, 두번째 코드와 같이 세번째 인자로 header 값을 넣으시면 됩니다.여기서 설정한 header 값이 instance에서 설정한 header 값보다 우선순위를 가집니다. 작성하신 코드에서는 config를 아래와 같이 고치셔야 할 것 같습니다. const config: AxiosRequestConfig = { headers: { "content-type": "json" }};

에러 표시 질문이요!

안녕하세요! 코드를 확인해 보니, App.vue의 스토어를 호출하는 부분에서 에러가 발생하고 있습니다. this.$store.dispatch('moduleB/editData', 'test'); vuex-module-decorator 커뮤니티를 살펴봤는데, 이와 같은 에러가 발생할 경우 동적으로 모듈을 가져오는 방법을 권장하고 있습니다.App.vue의 스크립트 부분을 아래와 같이 수정해 보셔요 ^^ lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import HelloWorld from './components/HelloWorld.vue'; import { getModule } from "vuex-module-decorators"; import MyStore from '@/store/moduleB.store.ts'; @Component({ components: { HelloWorld, }, }) export default class App extends Vue { moduleB: any; created(){ this.moduleB = getModule(MyStore, this.$store); this.moduleB.editData('test'); } } 왜 이런 에러가 발생하는지, 왜 동적모듈을 가져오는걸 권장하는지 딱히 개발자도 코멘트는 없네요 ... 아래 링크를 참고하여 수정한 것입니다. https://github.com/championswimmer/vuex-module-decorators/issues/86https://github.com/championswimmer/vuex-module-decorators/issues/116

안녕하세요! v-for(v-bind:key), slice() 관련 질문이 있어요!

안녕하세요! 1. v-for의 :key 관련 말씀해주신대로 유니크한 값을 넣어주어야합니다.이는 Vue에서 개별 DOM 노드들을 추적하고 기존 엘리먼트를 재사용, 재정렬하기 위해서 입니다.보통, 서버 통신해서 가져온 list array를 v-for로 표현할 때에는 데이터마다 고유한 id값이 있어 그것을 활용하는 편입니다. 클라이언트에서 생성한 array를 표현할 경우에는 array index + 랜덤한 해시값 or id 값으로 key 값을 만들기도 합니다. 어찌됬든 "중복되지 않는 유니크한 값"이 중요한 키포인트에요 ^^ 2. slice 관련 이부분은 제가 강의를 제작할 당시 착각한 부분이 있는데,javascript array api들 중 콜백 함수에서 호출한 array에 직접 영향을 끼치는 api들이 있습니다.예를 들어 map 같은 경우가 그렇구요.그 경우를 방지하기 위해서 slice()를 사용해 새로운 배열을 생성한 후,기존 배열에는 영향이 없도록 하는것이 저의 의도였습니다.그러나 filter의 경우에는 map과 달리 기존 배열에 영향을 끼치지 않으니글쓴님께서 말씀해주신 코드(this.data.filter(...))가 더 올바르다고 할 수 있습니다. 혼동을 드려 대단히 죄송합니다 ㅠ.ㅠ

에러 표시 질문이요!

안녕하세요! 올려주신 코드만으로는 확인이 어렵습니다 ㅠ.ㅠ 혹시 전체적인 코드를 확인할 수 있는 방법이 없을까요? github같은곳에 프로젝트 업로드 하신 뒤 링크를 알려주시면 도움을 드릴 수 있도록 하겠습니다!