[Vue] Pinia 써보기 - Todo List 만들기

0. 틀만들기 TodoListItem.vue, TodoList.vue, TodoForm.vue 컴포넌트 만들고 TodoList.vue만 다음과 같이 작성, 나머지는 기본틀에 template에 파일 제목만 // TodoList.vue // App.vue Todo PJT counters.js도 수정해준다 // counters.js import { ref, computed } from 'vue' import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', () => { let id = 0 const todos = ref([ {id: id ++, text: 'todo 1', isDone: false}, {id: ..

• format_list_bulleted FrontEnd/Vue
• · 2023. 11. 13.
• textsms

[Vue] Pinia의 구성 요소

# Pinia 설치 처음 Vite를 이용해서 프로젝트 만들 때, Pinia 추가하기 stores라는 새로운 폴더가 생긴다 counter.js를 확인해보면 상태와 기능이 있다 → 얘네가 중앙 저장소에 저장되는 애들 그리고 run server를 해보면 평소와 같지만 개발자도구 → vue를 켜서 보면 Pinia가 생긴 것을 확인할 수 있다 # Pinia의 구조 (flux pattern) 1. store (= counter.js 파일) 중앙 저장소 모든 컴포넌트가 공유하는 상태, 기능 등이 작성된다 파일 이름 변경 가능 2. state(= ref) 반응형 상태, 데이터 3. getters(= computed) 계산된 값 4. actions(= functions) 메서드 5. plugin 애플리케이션의 상태 관리..

• format_list_bulleted FrontEnd/Vue
• · 2023. 11. 13.
• textsms

[Vue] State Management

# State Management (= 상태 관리) 여기서 상태 == 데이터 Vue에서는 이미 반응형 상태를 관리하고 있었음 Vue의 컴포넌트를 세가지 상태로 나누면.. 1) 상태(State) : 앱 구동에 필요한 기본 데이터 2) 뷰(view) : 상태를 선언적으로 매핑하여 시각화 3) 기능(Actions) : 뷰에서 사용자 입력에 대해 반응적으로 상태를 변경할 수 있게 정의된 동작 {{ count }} 그리고 뷰에서는 단방향 데이터 흐름을 가지고 있음 근데, 이 단방향 데이터 흐름(상태 관리의 단순성)이 무너지는 시점이 있다 → 여러 컴포넌트가 상태를 공유할 때 1. 여러 뷰가 동일한 상태에 종속되는 경우 공유 상태를 공통 조상 컴포넌트로 끌어올린 다음 props로 전달하는 것 계층 구조가 깊어질 경..

• format_list_bulleted FrontEnd/Vue
• · 2023. 11. 13.
• textsms

[Vue] Axios

npm install axios view파일에서 import {ref} from 'vue' import axios from 'axios' const products = ref([]) const storeURL = 'https://fakestoreapi.com/products' axios.get(storeURL) .then((response) => { console.log(response) products.value = response.data }).catch ((error) => { console.error(error) }) 이런식으로 출력하면 데이터 확인 가능 # params와 query의 차이점?

• format_list_bulleted FrontEnd/Vue
• · 2023. 11. 10.
• textsms

[Vue] Router(3) Navigation Guard

# Navigation Guard란? vue router를 통해 특정 URL에 접근할 때 다른 URL로 redirect하거나 취소해서 네비게이션을 보호하는 것 예를 들어, 인증 정보가 없다면 특정 페이지를 못 들어가게 막음 종류 1. Globally(전역 가드) 애플리케이션 전역에서 동작 index.js에서 정의해줌 router.beforeEach( ) 다른 URL로 이동하기 직전에 실행되는 함수 // beforeEach의 구조 router.beforeEach((to, from) => { ... return false }) to : 이동할 url 정보가 담긴 route 객체 from: 현재 url 정보가 담긴 route 객체 반환값 false: 현재 네비게이션 취소 route location: route..

• format_list_bulleted FrontEnd/Vue
• · 2023. 11. 9.
• textsms

[Vue] Router(2) 프로그래밍 방식 네비게이션

# router.push( ) 다른 URL로 이동하는 메서드 새 항목을 histoy stack에 push하기 때문에 뒤로가기 가능 RouterLink를 클릭했을 때 내부적으로 호출되는 메서드 앞 글에서 했던 유저 프로필 페이지에서 홈으로 가는 버튼을 만들어보자 // userView.vue // script import { useRoute, useRouter } from 'vue-router' const router = useRouter() const goHome = function() { router.push({name : 'home'}) } // template HOME으로 이런식으로 홈버튼이 생기며 클릭하면 홈으로 돌아감 뒤로가기가 가능하다!! # router.replace( ) push와 다르게 h..

• format_list_bulleted FrontEnd/Vue
• · 2023. 11. 9.
• textsms