주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

할일 목록을 만들면서 Vue3 배워보자 - 01 할일 목록을 만들면서 Vue3 배워보자 - 02 > 할일 목록을 만들면서 Vue3 배워보자 - 03 이번에는 Store를 통해 작업을 진행해보겠습니다. 기존에는 vuex를 사용해서 작업을 했었는데, vue3에서는 공식적으로 pinia 라이브러리를 사용하기를 권고하고 있습니다. Pinia - Vuex를 대체할 새로운 Store! 사실 Pinia 는 Vue의 코어팀에서 활동하는 Eduardo 가 Vuex 5 의 RFC 에 따라 Vuex 5 의 구현체로 Pinia 를 작성한 것이다. 공식문서에 따르면 Vue 의 철학을 충실하게 따르면서 Pinia 를 개발중이며, 추후에 Pinia 와 Vuex 5 두 프로젝트를 하나로 합치거나 아주 쉽게 이동할 수 있도록 지원할 ..

할일 목록을 만들면서 Vue3 배워보자 - 01 > 할일 목록을 만들면서 Vue3 배워보자 - 02 할일 목록을 만들면서 Vue3 배워보자 - 03 먼저 Store 없이, emits을 통해서 데이터 통신하는 방식으로 개발해보겠습니다. Style 영역은 01과 달라진 부분이 없으므로 코드에 나타내지 않겠습니다. 기능 개발 - 01 등록하기 views/App.vue 데이터 정의는 ref를 사용합니다. 1. App.vue가 가장 최상위 파일이므로 todoList 데이터를 만들어줍니다. TodoItem에 대한 interface도 작성해줍니다. 이때, status는 string으로 해도되지만 'active'와 'clear'만 사용할 것이므로 문자열로 적어줍니다. (vue에서 props받을 때, validator ..

전체 적인 설정부분 node버전 16으로 변경하여 다시 진행해보도록하겠습니다. (시간이 날때 ㅠㅠ) 해당 글들에서 lint 내용 제외해서 보시는 것을 추천합니다.(린트 설정이 제대로 안된 듯 함) > 할일 목록을 만들면서 Vue3 배워보자 - 01 할일 목록을 만들면서 Vue3 배워보자 - 02 할일 목록을 만들면서 Vue3 배워보자 - 03 Vue3와 Typescript를 사용해서 간단한 할일 목록을 만들어보겠습니다. 저도 학습하고나서 기억하기 위해 작성하는 포스트입니다. 그리고 해당 학습에서 중요하게 생각한 부분 외에는(lint, style 등) 거슬리지 않는한 신경쓰지 않고 진행하였고, UI는 bootstrap을 사용하였습니다. 기본 스펙 공유 (기존에 설치하고나서 업그레이드를 하지 않은 상태인데,..