Vue 프로젝트를 진행하면서 컴포넌트 기능이 중복이 발생하는 경우가 많이 생겼다. 그럴땐 Extends, Mixins 를 사용하여 재활용을 하면 된다. Mixins Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법 mixins은 전역으로 적용할 수 있음 (주의) 전역으로 적용하면 이후에 생성된 모든 Vue 인스턴스 에 영향을 줌 따라서, 적게 이용하고 신중하게 사용하기 사용 예제 {{ num }} {{ msg }} click import Extends from './components/Extends.vue' import Mixins1 from './components/Mixins1.vue' import Mixins2 from './components/Mixins2.vue' imp..
vue는 SPA(Single Page Application)를 기준으로 작성되는 프레임워크다. 라우터기능을 통해 링크의 주소는 바뀌지만 실제로 페이지가 바뀌는게 아닌 것 이다. 그러므로 직접적으로 주소를 쳐서 접근하거나 새로고침 등을 하게되면 페이지를 인식하지 못하게되며(404, not found) 빈페이지가 뜨는 오류가 발생하게 된다. 즉 라우터로 경로를 이동후 새로고침하면 404 error가 발생하였다. 결론부터 말하면 처리방법은 404 error가 발생시 싱글페이지인(index.html)으로 페이지를 return해주면 된다. 공식문서를 보면 웹서버단 에서 설정을 주라고 가이드가 나와있다. https://router.vuejs.org/guide/essentials/history-mode.html#ap..
error : nodebuffer is not supported by this platform shpjs 를 사용하면서 parameter로 buffer를 사용할때 해당 error가 발생했다. 해당 문제의 해결책은 buffer를 만드는 라이브러리를 기본으로 사용하게 설정하는 것이었다. 해당 파라미터 사용은 const fileBuffer = await file.arrayBuffer() //file은 file객체 나는 vue cli 기반 프로젝트를 진행하고 있어. 1) npm install -S buffer 2) // vue.config.js const { ProvidePlugin } = require('webpack'); module.exports = { configureWebpack: { resolve: ..
$(document).bind('keypress', (event) =>{ // shift + a 조합키 if( event.which === 65 && event.shiftKey ) { console.log('shift + a 조합키 감지') } }); jquery를 이용하여 사용자 키보드 입력에 대한 이벤트를 감지가 가능하다. shift, ctrl, alt, meta 키와 일반 키를 동시에 눌렀을 때 위와 같은 방식으로 이벤트를 줄 수 있다. event.shiftKey event.ctrlKey event.altKey event.metaKey [keyCode 표] 출처 : https://im-developer.tistory.com/20 키 코드 : https://www.cambiaresearch.com/a..
vue3Cli 프로젝트를 진행하면서 도메인이 다른 API서버에 요청을 보낼 시 cors error가 발생하는 경우가 빈번하다. 위와 같이 Node js 서버에서 Proxy 설정이 가능하다. 1. vue.config.js vue-cli 프로젝트의 루트 디렉토리(package.json 파일이 있는 위치) 에서 vue.config.js 라는 파일을 만들어줍니다. 2.devServe 설정 vue.config.js 파일에 다음과 같이 작성해줍니다. // 파일 경로: /root/vue.config.js module.exports = { // 개발 서버 설정 devServer: { // 프록시 설정 proxy: { // 프록시 요청을 보낼 api의 시작 부분 '/api': { // 프록시 요청을 보낼 서버의 주소 t..
Props란? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식이다(자식 컴포넌트에서는 Props값의 수정이 불가능하다.) 부모 컴포넌트 자식 컴포넌트 export default { props: { title: {type : [String,Number], default : 100}, //여러가지 타입 허용 title2: { type: [String,Number], //여러가지 타입 허용 required: true //필수로 전달 받아야함 }, title3: { type: Object, default: () => {} //배열이나 함수의 기본 값은 항상 함수로부터 반환되어야 함 } }, title4: { type: Array, required: true, defaul..
Promise.all()은 비동기 통신을 병렬로 수행하여 순회가능한 promise가 끝나는 시점을 잡을 수 있는 메서드이다. Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부합니다. const promise1 = Promise.resolve(3); const promise2 = 42; const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); }); Promise.all([promise1, promise2..
정규표현식은 "특정 패턴의 문자열"을 찾기 위한 표현 방식입니다. (이런걸 형식 언어, formal languange라고 합니다.) 형식 : /regex?/i 의미 : slashes(/) , patterns(regex?), slashes(/) , i (i) 슬러시 안에 패턴을 입력하여 원하는 특정 패턴을 찾으면 됩니다. 4가지 그룹으로 나눠서 보기. 연습용 사이트 : https://regexr.com/5ml92 Groups and ranges Character뜻 | 또는 () 그룹 [] 문자셋, 괄호안의 어떤 문자든 [^] 부정 문자셋, 괄호안의 어떤 문가 아닐때 (?:) 찾지만 기억하지는 않음 [patterns] 그룹으로 묶어서 찾기 ex) /gr(e|a)y -> gr로 시작하면서 e또는a로 시작하고y..