Javascript/Vue
vue devtools 안나오는 문제 해결 vue devtools 활성화 하는 방법
Vue.js is detected on this page. 라고 써있지만 F12를 눌렀을 때 크롬 개발자 도구에서 Vue 탭이 나오지 않았다. 확장 프로그램 설정에서 "파일 URL에 대한 액세스 허용"을 체크해주니 해결되었다.
Javascript/Vue
Javascript/Vue
[Vue3] Vue에서 DOM에 접근하는 방법
Vue에서 hammer.js를 이용하려고 했는데 실제 dom element를 전달해줘야 했다. Vue는 가상 DOM을 이용하는데 어떻게 해야 할까? 템플릿 참조를 이용하면 된다. 먼저 ref와 onMounted를 꼭 import 해준다. import { ref, onMounted } from 'vue' onMounted는 컴포넌트의 DOM 트리가 문서 내에 있음을 보장한다. onMounted 전에는 DOM에 접근할 수 없다. https://ko.vuejs.org/guide/essentials/lifecycle.html 생명 주기 훅 | Vue.js ko.vuejs.org 그리고 아래와 같이 사용하면 된다. 이때 :ref가 아니라 ref인것에 주의한다. https://ko.vuejs.org/guide/es..
Javascript/Vue
[Vue] axios로 데이터 받은 후 렌더링하는 방법
데이터를 받기 전에 렌더링을 한 후 데이터를 받고 리렌더링을 해서 화면 깜빡임이 발생했다. SPA의 장점 중 하나는 어플리케이션을 쓰는 것 처럼 움직임이 부드럽다는 것인데 그 장점을 활용할 수 없는 문제가 있었다. 처음에 방법을 바로 생각해내지 못해서 created에 await을 사용하는 등 여러 시도를 해 보았지만 잘 되지 않았었다. 가장 간단한 방법은 v-if였다. {{data.context}} 데이터가 없으면 렌더링을 하지 않고 데이터가 있으면 렌더링을 한다.
Javascript/Vue
[Vue] 새 Vue 프로젝트 생성하면 자주 쓰는 것들 모음 - Vue project routine
프로젝트 생성, 실행, 빌드 프로젝트 생성 $ vue create 프로젝트이름 프로젝트 이름에는 대문자가 들어갈 수 없다 프로젝트 실행 $ npm run serve 프로젝트 빌드 $ npm run build vue.config.js 설정 기본값 ( vue 3.2.13 기준) const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true }) GitHub Pages에 배포하기 위한 설정 build 파일 저장 경로를 docs로 바꿔주면 편하다. (기본 저장 경로는 dist이다.) publicPath를 정해주지 않으면 github pages에 배포시 빈화면이 뜰 수 있다...
