dongQueue's dev

막상 해결하고 보니 너무 어이가 없었던 오늘 겪었던 오류 한가지를 소개해 드립니다. 1. App.vue 2. main.js import Vue from 'vue' import Router from 'vue-router' import App from './App' const router = new Router({ mode: 'history', routes: [ {path: '', name: 'home', view: 'Home' }, {path: 'new', name: 'new', view: 'New' }, {path: '*', redirect: '/'} ] }) Vue.use(Router) new Vue({ router, render: h => h(App) }).$mount('#app') 위 코드에서 보시..

안녕하세요. 이번에는 여러개의 vue component를 팝업으로 띄울때 dynamic component를 이용하는 법에 대해 적어보겠습니다. 일단 아래 예제를 살펴보겠습니다. Open A Open B 위 예제는 두개의 버튼이 있고 'Open A' 를 클릭하면 A 가 팝업되고, 'Open B'를 클릭하면 B 가 팝업되는 단순한 구조입니다. 위 예제는 짧게 작성되어 있지만, 화면이 좀 더 복잡해 지기 시작하면 코드는 한 줄이라도 줄이는게 보기도 좋고 유지보수에도 도움이 됩니다. 그리고 사용할지 말지도 모르는 popup 컴퍼넌트를 미리 import / rendering 해 놓는것도 좀 부담이 됩니다. 이때 vue에서는 매우 재미있는 기능 하나를 제공합니다. 바로 다이나믹 컴퍼넌트 라는 방식이며 기본 설명은 ..

vue, vuetify로 웹페이지를 개발하다가 점점 시간이 지나다 보니 공통화해도 괜찮겠다 싶은 부분을 모아 유틸을 만들게 되었습니다. 이 유틸을 하나의 소스에서 사용할 때는 문제가 없었는데 3개정도 넘어가기 시작하면서 업데이트하기가 힘들어 졌고 npm package로 배포해서 사용하면 좋겠다는 생각을 하게 되었죠. 일단은 아래 블로그를 참고하여 npm에 첫번째 배포를 성공했습니다.velog.io/@rnfh1111/1[Vue] Component NPM에 배포 삽질기NPM에 첫 배포를 시도해 보았습니다. 완벽하지는 않지만 한글로 된 자료가 많이 없기에 작성해 봅니다. 목표 vue에서 사용 가능한 widget 형식의 modal을 만들어 배포해 보려고 합니다. 환경 작업환경velog.io음 근데 뭔가 이상한게..

안녕하세요. 이번 올릴 주제는 mixin 을 이용하여 공통으로 사용하는 로직을 여러 component에서 공유하는 방법입니다. 중복을 제거하여 component의 size도 줄이고 코드가 분산되지 않아 유지보수성도 높일 수 있습니다. :) mixin에 대한 설명은 vuejs.org에 아래와 같이 설명되어 있습니다. 전달인자: {Object} mixin 사용방법: 전역으로 mixin을 적용합니다. 생성된 모든 Vue 인스턴스에 영향을 줍니다. 플러그인 작성자가 컴포넌트에 사용자 정의 동작을 주입하는데 플러그인을 사용할 수 있습니다. 애플리케이션 코드에서는 추천하지 않습니다. https://kr.vuejs.org/v2/api/#Vue-mixin API — Vue.js Vue.js - 프로그레시브 자바스크립트..

안녕하세요. 이전에는 json 파일로 다국어 메시지를 관리하는 법에 대해 적어보았습니다. https://dong-queue.tistory.com/64 Vue에서 다국어 처리 - JSON 파일을 이용한 관리 안녕하세요. 이전에는 Vue 다국어 처리시 i18n의 기본적인 사용방법에 대해 적었습니다. https://dong-queue.tistory.com/59 Vue 에서 다국어 처리 - 기초 Vue 에서는 i18n 을 사용하여 매우 쉽게 다국어 처리를. dong-queue.tistory.com 오늘은 메시지를 DB에서 관리하고 i18n으로 불러오는 법에 대해 설명드리겠습니다. (db연결은 구성되어 있다고 가정하고 data를 db에서 읽어오는 부분에 대한 설명은 하지 않겠습니다.) 1. Table 구성 및 d..

안녕하세요. 이전에는 Vue 다국어 처리시 i18n의 기본적인 사용방법에 대해 적었습니다. https://dong-queue.tistory.com/59 Vue 에서 다국어 처리 - 기초 Vue 에서는 i18n 을 사용하여 매우 쉽게 다국어 처리를 구현할 수 있습니다. vue i18n의 소개 사이트는 다음과 같습니다. https://kazupon.github.io/vue-i18n/started.html Getting started | Vue I18n Getting s.. dong-queue.tistory.com 이번에는 실제 사용할 다국어 메시지를 관리하는 법에 대해 적어볼려고 하는데 샘플 코드를 받아보면 대부분 JSON 파일로 되어 있기 때문에 우선은 JSON 파일을 관리하는 법에 대해 설명하겠습니다. ..

vue 로 개발을 하던 도중 data grid를 출력할 일이 생겼다. report 솔루션 라이센스도 없고 이걸 html로 노가다 해야 하나 고민하던 도중 괜찮은 (물론 MIT 라이센스의) util 하나를 발견했다. 이름은 Print.js (http://printjs.crabbly.com/) 사이트를 방문해 보면 PDF, Html, Image, Json 프린팅을 지원한다고 되어 있다. 이중에서 Html 프린팅과 Json 프린팅 두가지를 시험해 보았다. 출력 데이터는 아래와 같다. 날짜 항목 이름 기수 금액 비고 2019-01-01 회비 홍길동 1기 30,000 2019 1월회비 2019-01-01 회비 김영일 3기 30,000 2019 1월회비 2019-01-02 회비 전도일 5기 30,000 2019 1..

vue 를 이용하여 single page web app을 개발하고 server side rendering 을 사용하지 않은 경우,검색엔진의 봇은 javascript로 구성된 사이트를 일종의 'fake website' 로 가정하여 스크롤링에서 제외할 수 있습니다.(구글 같은 경우 개선되었거나 예정인듯 합니다.) 이럴때 사용가능한 방법은 아래와 같습니다. 1. SSR (server side rendering)SSR은 클라이언트가 자바스크립트 코드를 실행하지 않을때 서버에서 페이지를 생성해 클라이언트에게 보내는 것입니다. SSR을 사용하는 것이 좋은 경우는 다음과 같습니다.- 사용자마다 다른 컨텐츠를 보여주어야 할때- 클라이언트와 실시간으로 상호작용을 해야할때 ( 채팅 서버 등 )- 페이지가 너무 많아 빌드에..