dongQueue's dev

웹 개발자로서 모바일 앱을 개발하려고 했을때에 어떤 프레임웍을 사용할 것인지 고민해 보았습니다. 우선 고려대상은 플러터(Flutter), 네이티브스크립트(Nativescript-vue), 아이오닉(Ionic) 3가지 였습니다. 1. 기본 소개 ◆ Flutter 플러터는 구글에서 개발한 Dart 언어를 기반으로한 프레임워크입니다. 구글에서 밀고 있다보니 지원도 많이 되고, 사용자 관심도 높은 편입니다. 단 dart 언어를 새로 배워야 합니다. ◆ Nativescript-vue javascript 기반으로 native 앱을 개발할 수 있습니다. 미리 빌드된 구성요소를 제공하며 vue 문법을 그대로 사용하지만 html기반은 아니므로 제가 익숙하게 사용하고 있는 vuetify 같은 웹UI 요소는 사용할 수 없습..

막상 해결하고 보니 너무 어이가 없었던 오늘 겪었던 오류 한가지를 소개해 드립니다. 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') 위 코드에서 보시..

** 2021-04-161.0.6 버전 부터 ag grid 를 지원하도록 기능을 추가하였습니다.--------------------------------------------------------------------------------------------------------------------------------- 안녕하세요. 오늘은 npm package 하나를 소개해 드리겠습니다. 우선 다음의 예제를 vuetify 로 구현해 보겠습니다. * Vuetify 코드 Validate Reset Form Reset Validation 다음은 제가 만든 v-iterator 를 사용한 코드입니다. export default { computed: { screen () { return { items: [ {..

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

안녕하세요. Vue.js로 개발을 다 하고 나서 테스트를 하다보니 백스페이스나 새로고침을 하고나면 값들이 초기화 되버리는 상황이 발생하게 되었습니다. 새로고침을 해도 store를 유지할 수 있게 vuex-persistedstate 적용하였지만 문제가 하나 발생했습니다. uxgjs.tistory.com/207 vuex-persistedstate 덕분에 Vue.js 화면을 새로고침 해도 안전해요. Vue.js로 프로젝트를 개발하는 경우 화면을 이동 할 때 일반 웹페이지처럼 페이지 전체를 새로 고침하는 방식이 아니라 SPA(Single Page Application)와 같이 javascript로 필요한 부분만 교체하는 식으로 개 ux.stories.pe.kr 제가 만든 site는 login 기능이 있어서 로그..

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

안녕하세요. 이전에 agGrid에 대한 기초와 컬럼 서식 정의에 대해 설명드렸는데 https://dong-queue.tistory.com/58 Vue ag-Grid : 컬럼 서식 정의 이전에 Vue에서 ag-Grid를 설치 사용하는 법에 대해 간략하게 적어보았습니다. https://dong-queue.tistory.com/57 Vue에서 ag-Grid 사용하기 안녕하세요. 이번에는 강력한 무료 data grid 도구인 AG grid를 Vue에.. dong-queue.tistory.com 이번에는 ag grid에서 합계를 지정하는 방법에 대해 적어보겠습니다. 우선 예제는 이전과 동일합니다. 그리드 형태는 아래와 같습니다. Make Model Grade Price Stock 현대 아반떼 준중형 2000 1 ..

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

안녕하세요. 오늘은 client side rendering 방식에서 동일한 리소스의 변경시 변경사항을 client에 제대로 적용하는 방법에 대해 설명드리겠습니다. 배경을 간단히 설명드리자면 저희가 Vue로 개발을 하고 서비스를 하면서 웹서버를 별도로 둘까하다 인원이 작고 관리도 힘들것 같아. aws s3-cloudfront 조합으로 Client side rendering 방식으로 서비스를 하기로 결정하였는데 이미 아시겠지만 Client side rendering 방식은 필요한 리소스 (html, css, js) 를 사용자가 접근시 client에 내려주고 client에서 내려받은 리소스를 바탕으로 rendering 하게 됩니다. 맨 처음 접속시 리소스를 받느라 느려지는 점을 제외하면 (lazy loadin..

안녕하세요. 이전에는 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..