[Vue3/Typescript] 할일 목록을 만들면서 Vue3 배워보자 - 03
할일 목록을 만들면서 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/Typescript] 할일 목록을 만들면서 Vue3 배워보자 - 02
할일 목록을 만들면서 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 ..
인프런 타입스크립트 기초를 통해 공부중이며 제로초님의 유료강좌입니다. 코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만) 타입스크립트에 익숙하지않다면 자바스크립트로 먼저 코드를 작성하고 그 후에 타입스크립트로 변환하도록하자. 타입스크립트 (Typescript) 매개변수를 구조분해할때 타입 작성 방법 // (X) function test({ a: boolean, b: number}){ //.... } // (O) fuction test({ a, b }: { a: boolean, b: number}){ //.... } 뒤에 별도로 써야 에러가 나지 않는다. 아래와 같이 쓸 수 있다. // 호출할때 객체로 인자값을 전달하고 connectCardDOM({ data: ..
Typescript 기초 학습 8.기초문법6_클래스와 인터페이스_제네릭_generic(인프런_Zerocho님 강의 학습 의식의 흐름대로 노트 정리)
인프런 타입스크립트 기초를 통해 공부중이며 제로초님의 유료강좌입니다. 코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만) 타입스크립트에 익숙하지않다면 자바스크립트로 먼저 코드를 작성하고 그 후에 타입스크립트로 변환하도록하자. 타입스크립트 (Typescript) 클래스와 인터페이스를 사용할때 언제 써야할까? 만약 내가 작업할 때 new키워드를 쓰지 않고 상속의 구현만 할것이라면 인터페이스를 사용해도 무방하다. (실제 사용은 클래스에서 extends 하는 방식으로 하고 구현만 할거라면 인터페이스 implements해준다. interface Example{ (a: number, b: number) : number; } const ex: Example = (a,b) ..