전체 글32 [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] useContext, toRefs 사용법 ● useContext 사용법더보기import { getCurrentInstance } from 'vue'; setup(){ const { emit } = getCurrentInstance(); const onInput = (e) => { emit('update:subject', e.target.value) } return { onInput } }원래는 useContext() 로 사용이 가능한데,버전 문제로 getCurrentInstatnce()를 사용한당. ● toRefs 사용법index.vue더보기import { useCount } from '@/hooks/count'export default { name: 'HomePage', setup() { .. 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. 이전 1 2 3 4 ··· 6 다음
