자유로운 개발생활

안녕하세요. 아무래도 Android Studio보다는 VS Code가 더 익숙하고 가벼운 느낌이 들어서, 이번에는 VS Code에서 플러터를 사용하는 법을 적어보겠습니다. 1. VS Code 설치 먼저 VS code가 없으신 경우 VS Code를 다운받아 설치합니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your f..

필안녕하세요. 이전 글에서 플러터와 안드로이드 스튜디오를 설치하였는데, 실행결과 확인을 위한 안드로이드 에뮬레이터 설정 방법을 알아보겠습니다. 1. Android Studio - 에뮬레이터 안드로이드 스튜디오 설치 중 계속 Next 를 클릭하여 설치를 진행하면 아래와 같은 단계를 지나쳤을 겁니다. 에뮬레이터를 실행시키기 위해서는 Android Virtual Device(이하 AVD) 를 같이 설치해야 되는데, 기본으로 선택되어 있기 때문에 쭉 Next를 누르셨다면 문제 없이 포함되어 설치 되었을 겁니다. 만약 AVD가 설치되어 있지 않다면 아래와 같이, No Device selected 라고 표시됩니다. AVD를 설치하려면 메뉴의 Tools > AVD Manager 를 선택합니다. AVD Manager를..

웹 앱으로 개발된 프로그램을 모바일 앱으로 전환하기 위해 이것 저것 알아보다, 이번에는 플러터를 한번 배워보기로 했습니다. 1. Flutter SDK 설치 1) 안드로이드 스튜디오를 먼저 설치해도 되지만 우선 flutter SDK 를 다운받도록 하겠습니다. https://flutter-ko.dev/docs/get-started/install/windows 만약, 위에처럼 (failed) 라고 나오면 다음 링크에서 받으시면 됩니다. https://flutter.dev/docs/get-started/install/windows 2) 설치파일을 다 받으셨으면 위의 안내처럼 원하시는 위치에 압축을 풀도록 하겠습니다. 저는 c:\src\flutter 에 파일을 풀었습니다. 3) 환경 변수를 설정해 줍니다. 윈도우..

웹 개발자로서 모바일 앱을 개발하려고 했을때에 어떤 프레임웍을 사용할 것인지 고민해 보았습니다. 우선 고려대상은 플러터(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 ..