FRONT/VUE10 [vue3] vuex란? ● state사용법store.js더보기import { createStore } from "vuex";export default createStore({ state: { showToast : false, tostMessage : '', toastAlertType : '', timeout : null }, mutations: {}, actions: {}}) 상태관리 패턴, 라이브러리이다. state 사용법은 아래와 같다. 더보기 const store = useStore(); const showToast = computed(() => store.state.showToast); const tostMessage = computed(() => store.getters... 2024. 4. 25. [vue3] teleport, slot 사용법 더보기● teleport제일 상단에 넣을 태그를 쓴다.index.html더보기DOCTYPE html>html lang=""> head> meta charset="utf-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width,initial-scale=1.0"> link rel="icon" href="%= BASE_URL %>favicon.ico"> title>%= htmlWebpackPlugin.options.title %>title> head> body> noscript> strong>We.. 2024. 4. 24. [vue3] 라이프사이클 생명주기 ● 라이프사이클 생명주기 state 의 값이 변경될때, 실행 하고 싶은경우 컴포넌트를 빠져나가기 전, 후에 동작함라우터로 다른 곳 이동할 경우,,? 에 실행됨 ● 메모리 누수만약에 /todos/15 에서 setTimeout 5초뒤에 disabled처리가 되어라 라고 설정했을때,2초가 안되서 그 페이지를 나가게 될 경우, setTimeout을 사용하는것이 메모리만 차지하는 것이라는걸 알게 된다.이럴경우,, onUnmounted(() => {}) 를 사용하면된다.더보기 const timeout = ref(null); onUnmounted(() => { console.log('unmouted'); clear.. 2024. 4. 24. [vue3] 자바스크립트 객체 복사/비교 ● 객체 복사/비교더보기const getTodo = async() => { try { const res = await axios.get('http://localhost:3000/todos/' + id) todo.value = { ...res.data }; originalTodo.value = { ...res.data }; loading.value = false; }catch(err){ triggerToast('Something went wrong', 'danger'); } } getTodo();값을.. 2024. 4. 24. [vue3] 이벤트 버블링 이란? ● 버블링 이란?TodoList.vue더보기template> div v-for="(item,index) in todos" :key="index" class="card mt-2"> div class="card-body p-2 d-flex align-items-center" @click="moveToPage(item.id)" > div class="form-check flex-grow-1"> input class="form-check-input" type="checkbox" .. 2024. 4. 24. [vue3] router-view 사용법 ● router 사용법 src/router/index.js 더보기 import { createRouter, createWebHistory } from "vue-router"; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'Home', component: () => import('../pages/index.vue')}, { path: '/todos', name: 'Todos', component: () => import('../pages/todos/index.vue')} ] }) // 1-/home, 2-/todos, 3-/todos/create 4-/todos/:id export default.. 2024. 4. 23. 이전 1 2 다음