▶ Local Storage브라우저 내에 key-value 쌍을 저장하는 웹 스토리지 객체특징)페이지를 새로 고침하고, 브라우저를 다시 실행해도 데이터가 유지됨쿠키와 다르게 네트워크 요청 시 서버로 전송되지 않음여러 탭이나 창 간에 데이터를 공유할 수 있음사용 목적)웹 어플에서 사용자 설정, 상태 정보, 캐시 데이터 등을 클라이언트 측에서 보관하여 웹사이트의 성능을 향상시키고 사용자 경험을 개선하기 위함  ▶pinia-plugin-persistedstatePinia의 플러그인(plugin) 중 하나웹 어플리케이션의 상태(state)를 브라우저의 local storage나 session storage에 영구적으로 저장하고 복원하는 기능을 제공* 참고https://prazdevs.github.io/pinia..

▶ 완료된 todo 개수 계산todos 배열의 길이 값을 반환하는함수 doneTodosCount 작성 (getters)App 컴포넌트에서 doneTodosCount getter를 참조

"각 todo 상태의 isDone 속성을 변경하여 todo의 완료 유무 처리하기"완료된 todo에서는 취소선 스타일 적용하기todos 목록에서 특정 todo의 isDone 속성을 변경하는 updateTodo 액션 정의todo 내용을 클릭하면 선택된 todo의 id를 인자로 전달해updateTodo 메서드를 호출전달받은 todo의 id 값을 활용해 선택된 todo와 동일 todo를 목록에서 검색일치하는 todo 데이터의 isDone 속성 값을 반대로 재할당 후 새로운 todo 목록 반환todo 객체의 isDone 속성 값에 따라 스타일 바인딩 적용하기결과 확인

todos 목록에서 특정 todo를 삭제하는deleteTodo 액션 정의각 todo에 삭제 버튼 작성버튼을 클릭하면 선택된 todo의 id를 인자로 전달해 deleteTodo 메서드 호출전달받은 todo의 id 값을 활용해 선택된 todo의 인덱스를 구함특정 인덱스 todo를 삭제 후 todos 배열을 재설정결과 확인

todos 목록에 todo를 생성 및 추가하는 addTodo 액션 정의TodoForm에서 실시간으로 입력되는 사용자 데이터를 양방향 바인딩하여 반응형 변수로 할당submit 이벤트가 발생했을 때, 사용자 입력 텍스트를 인자로 전달하여store에 정의한 addTodo 액션 메서드 호출form 요소를 선택하여 todo 입력 후input 데이터를 초기화 할 수 있도록 처리 결과 확인

store에 임시 todos 목록 state를 정의 store의 todos state를 참조 하위 컴포넌트인 TodoListItem을 반복하면서개별 todo를 props로 전달 props 정의 후 데이터 출력 확인

▶ Pinia를 활용한 Todo 프로젝트 구현Todo CRUD 구현Todo 개수 계산- 완료된 Todo 개수 ▶ 컴포넌트 구성초기 생성된 컴포넌트 모두 삭제 (App.vue 제외)src/assets 내부 파일 모두 삭제main.js 해당 코드 삭제TodoListItem 컴포넌트 작성TodoList 컴포넌트 작성TodoListItem 컴포넌트 등록TodoForm 컴포넌트 작성 App 컴포넌트에 TodoList, TodoForm 컴포넌트 등록컴포넌트 구성 확인

▶ Pinia 구성 요소 활용State각 컴포넌트 깊이에 관계 없이 store 인스턴스로 state에 접근하여 직접 읽고 쓸 수 있음만약 store에 state를 정의하지 않았다면컴포넌트에서 새로 추가할 수 없음------------------------------중앙 저장소를 사용해서 데이터를 참조한다계층 구조에 관계없이, 중앙 저장소에 접근하기만 하면 사용할 수 있다Gettersstore의 모든 getters 또한 state 처럼 직접 접근 할 수 있음Actions store의 모든 actions 또한 직접 접근 및 호출할 수 있음getters와 달리 state 조작, 비동기(Axios 요청), API 호출이나 다른 로직을 진행할 수 있음-----------------------------------..

▶ 구성 요소 1. store2. state3. getters4. actions5. pluginPinia는 store 라는 저장소를 가진다 저장소는 여러개 가질 수 있다. store는 state, getters, actions 로 이루어지며각각 ref(), computed(), function()과 동일하다 store중앙 저장소 모든 컴포넌트가 공유하는 상태, 기능 등이 작성됨.모든 컴포넌트가 다 쓸 수 있음 ------------------------------useCounterStore가 중앙 저장소 이름 defineStore()의 반환 값의 이름은 use와 Store를 사용하는 것을 권장user로 시작해서 Store로 끝나도록 ex) userTodoStore----------------------d..

▶ PiniaVue 공식 상태 관리 라이브러리 ▶ Pinia 설치 Vite 프로젝트 빌드 시 Pinia 라이브러리 추가 - Vue 프로젝트 구조 변화 stores 폴더 신규 생성