Vue4 [PJ] Vue 공부중7 Teleport 원하는 코드를 원하는 곳으로 이동 가능 index.html modal div 추가 pages/todos/index.vue style 투명도 추가 ... components/TodoList.vue index.html 에 있는 modal 로 이동시켜버림 모달이 위에 잘 뜸. API 연동 문제 - CORS - 해결 최 상단에 vue.config.js 파일 생성 module.exports = { publicPath: "./", devServer: { proxy : 'API URL' } }; Home.vue const getLists =async () =>{ try{ const res = await axios.get("/board"); console.log(res.data); } catch(err.. 2022. 10. 4. [PJ] Vue 공부중6 Vue Lifecycle hooks 공식문서 onUnmounted를 활용한 메모리 누수 관리 const timeout = ref(null); // 페이지를 벗어날 때 timeout value를 clear 해준다. // 그럼 페이지 이동시 triggerToast의 setTimeout이 실행되지 않음. onUnmounted(() => { clearTimeout(timeout.value); }); const triggerToast = (message, type = "success") => { toastAlertType.value = type; toastMessage.value = message; showToast.value = true; // 페이지를 벗어났을 때 아래 부분을 실행 시킬 필요 없다. timeo.. 2022. 10. 3. [PJ] Vue 공부중2 집에서 공부했던 vue3 project를 다른 곳에서 ( window ) 작동 시키려니 되지 않는다..하하하하 (몇일째 셋팅만 하는건지 모르겠다. 제발 코딩좀 하자) wsl 로 ubuntu 설치해둔게 있어서 거기서 돌려보도록한다. 근데 너무 깨끗한 ubuntu server... nodejs, npm, vue-cli, vue-cli-service 등을 설치해 주었다. sudo apt update sudo apt install nodejs node -v npm -v # npm 은 안깔렸다 sudo apt install npm # npm 설치 npm -version npm install -g @vue/cli # node 버전이 낮아서 안깔림. 14이상으로 설치. npm run serve curl -o- htt.. 2022. 9. 27. [PJ] Vue 공부중 최종적으로 Vue3 + MDB + Bootstrap 을 사용해서 프로젝트를 진행하기로 결정!! (땅땅땅) vue 공부 - todo list 만들어보기 Vite로 프로젝트 생성 npm init vite-app todo Vitejs2로 프로젝트 생성 npm init vite todo-vite2 기본 폴더 구조 vitejs로 프로젝트 생성시, index.css 파일이 따로 있지 않고 태그가 기본적으로 setup속성을 갖도록 템플릿이 만들어진다... 그게 뭔데.ㅡ Vite Project Start Bootstrap Library 설치 npm install bootstrap Popper Library 설치 npm install @popperjs/core Todo List 변수 생성 생성된 변수는 전 컴포넌트에 걸.. 2022. 9. 26. 이전 1 다음
