Programing/Frontend
-
[Frontend] Vue.js - Electron에서 간단한 Python 실행 해결기Programing/Frontend 2021. 1. 3. 20:59
개요 작년 하반기에 진행한 프로젝트에서 윈도우 시스템의 정보를 가져오는 프로그램을 개발하여야 되는 상황이 있었습니다. 윈도우 시스템의 정보는 Python을 사용하여 가져왔고, 저는 제가 주로 개발하던 웹 개발 기술과 일렉트론을 사용하여 윈도우 클라이언트 프로그램을 개발할 생각이었습니다. 해당 과정을 진행하며 Vue.js로 개발한 일렉트론 클라이언트 프로그램에서 Python을 실행하는 경험을 작성해 보겠습니다. 이번 글에서 사용할 라이브러리와 프레임워크는 아래와 같습니다. Python-Shell : https://github.com/extrabacon/python-shell Quasar Framework : https://quasar.dev/ Vue.js : https://kr.vuejs.org/ Node..
-
[Frontend] 웹 개발 시점의 iOS Native와 Webview, Javascript 통신 해결기Programing/Frontend 2020. 8. 26. 20:14
개요 이번에 개발중인 웹을 iOS Native로 이식하여, 하이브리드 어플을 개발하는 경험을 해 보았습니다. 개발중 주요 이슈 중 하나가 iOS Native 어플의 푸시 알림 서비스 였습니다. 푸시 알림은 Firebase Cloud Message를 이용하여 개발을 하였는데, 푸시 알림을 받을수 있는 디바이스의 Token을 기기로 부터 추출해야 되는 이슈가 있었습니다. 웹뷰에서 네이티브로 통신하는 부분도 있었고, 반대로 네이티브가 웹뷰의 함수를 호출하는 부분도 있었습니다. 해당 이슈를 해결한 방법 등에 대해 작성해 보았습니다. Webview -> iOS Native 함수 호출 웹뷰에서 네이티브의 함수 호출은 postMessage 함수를 이용해서 통신 하였습니다. postMessage는 window 객체를 ..
-
[Netlify] 네트리파이 redirect 설정 오류 해결기Programing/Frontend 2020. 3. 14. 18:32
개요 Vue.js를 이용해 PWA를 구현하고 있습니다. 원래는 라우터를 해쉬 모드(도메인 뒤에 #/ 이 들어가는 방식 ex: www.DomainName.com/#/RouterName )를 사용해서 라우터를 사용하다가 url 관련 작업중 히스토리 모드(일반적으로 보이는 방식 ex:www.DomainName.com/RouterName )로 변경을 해야될 상황이 되었습니다. 히스토리 모드의 라우터가 더 이쁘기도 하니 바로 변경을 하였는데, 문제점이 발생하였습니다. 뒤에 라우터 네임이 붙은 새로운 창을 열었을시 404로 연결되는 이슈였습니다. Netlify 와 Vue Router Netlify는 정적 사이트를 배포해주는 서비스 이다. 정말 간단하게 설정이 가능해 나같은 숙련도 낮은 개발자도 쉽게 사용할수 있습니..
-
[Summernote] Vue.js 프로젝트에 Summernote 에디터 적용하기Programing/Frontend 2020. 2. 16. 20:22
개요 현재 Vue.js로 작업중인 프로젝트에서 위지위그 에디터를 적용해야되는 이슈가 있었습니다. 적절한 오픈소스를 찾아보다 Summernote에 대해 알게 되어 적용하게 되었고, 해당 작업중 겪었던 어려운 점과 해결법 등을 포스팅 해보려 합니다. Summernote 적용 Summernote 공식 사이트에 가면 적용법에 대해 자세히 볼수 있습니다. index.html Vue Cli 로 만든 프로젝트 index.html 파일에 jQuery, Bootstrap, Summernote 링크를 적용해 줍니다. Vue.js를 사용하며 왠만하면 jQuery는 사용안해볼려고 했는데, 제가 아직 Vue.js를 잘 다루지 못해서 그런지 기술적인 필요때문에 항상 jQuery를 사용하게 되네요. 🥲 editor.vue 적용할 ..