본문 바로가기

Knowledge Wiki

 (169)
Vue.js 크롬 extension 1. vue-devtools 크롬 Extension을 설치하면 디버깅 좀 편해짐 https://chrome.google.com/webstore/search/vue-devtools 가장 최근 버전으로 다운받아야 함 근데 vue cli4 에서 vue3 로 create app 한 경우 2021.11.25 기준 vue-devtools beta 버전을 사용해야 동작함
Vue.js 웹앱 - PWA (Progressive Web App) 1. PWA (Progressive Web App) 웹사이트를 그대로 앱으로 사용할 순 없을까? 에서 시작 PWA 앱처럼 보이지만 실은 웹사이트임 2. PWA가 되려면 필요한 2가지 1) manifest.json 2) service-worker.js 3. PWA 기능을 제공하는 라이브러리 -> pwa vue add pwa npm run build -> .vue 파일을 html파일로 바꿈, 그래야 브라우저에서 도니까. 4. manifest.json 파일은 웹사이트에 대한 정보를 알려줌 5. service-worker.js 파일은 실제 인터넷이 없을 때에도 앱을 사용 가능하도록 해주는 파일임 1) 웹페이지 구동에 필요한 html css js img를 하드에 저장해놓음 2) 앱 구동시 local에 이미 파일이..
Vue.js 데이터 주고받기 - Vuex 라이브러리 1. 데이터 주고받는게 어렵고 복잡함 -> Vuex가 나옴 모든 Component들이 데이터를 한 곳에서 공유할 수 있는 개념 컴포넌트, 데이터가 많을 때 Vuex 쓰자. 그 외엔 props 쓰는 게 코드양이 더 적음. 2. Vuex 사용법 1) store.js 파일 만들기 2) main.js에 store.js 추가 import store from './assets/store' app.use(store).mount('#app'); 3) 기본 코드 작성 import { createStore } from 'vuex' const store = createStore({ state(){ return { name: 'kim', } }, }) export default store 3. vuex 설치 에러 원인: vu..
Vue.js 커스텀 이벤트 - mitt 라이브러리 1. 커스텀이벤트를 여러번 써야할 경우 유용한 라이브러리 -> mitt 라이브러리 상위의 상위의 상위로 커스텀 이벤트를 전송해야 할 경우 등 mitt는 emitter의 약자 2. mitt 환경 설정 main.js에서 mitt 라이브러리 추가 import mitt from 'mitt' let emitter = mitt(); let app = createApp(App); app.config.globalProperties.emitter = emitter; app.mount('#app'); 3. mitt 사용법 // 송신 export default { name: 'MyComponent', methods: { fire(){ this.emitter.emit(''); } }, }; // 수신 export defaul..
Vue.js slot 1. slot을 쓰면 props보다 부모->자식 데이터 전송을 더 쉽고 직관적으로 할 수 있다. myData~~!! 2. slot은 HTML에 데이터 바인딩할 경우에만 사용가능하고, 나머지는 props를 써야 한다. 3. named slot AAA BBB 5. slot은 가독성이 떨어질 수 있음. 간단한 데이터를 전송할 땐 유용함 6. slot으로 자식의 데이터를 가져오고 싶은 경우 {{data.msg}}
Vue.js 필터 1. 필터기능 CSSgram 설치하고 cssgram.css 파일 첨부하면 필터 기능 완성
Vue.js BLOB 1. BLOB binary 데이터를 다룰 때 BLOB이라는 object에 담아서 다룸
Vue.js 파일 업로드 1. 파일 업로드 버튼 + 업로드 여러개 받으려면 multiple 옵션 주면 됨 특정 타입만 업로드 받으려면 accept 옵션 주면 됨. 하지만 정확히 타입 체크하려면 자바스크립트로 확장자 검사해야 함. 2. 업로드한 이미지를 HTML로 보여주기 1) FileReader() 사용 파일을 글자로 변환해줌 2) URL.createObjectURL() 사용 이미지의 가상 URL을 생성해줌

티스토리툴바