Programing
-
[Homebridge] Tuya 스마트 벽 스위치 Id, Key 추출 및 Homebridge 연결Programing/Home IoT 2021. 4. 5. 22:39
개요 애플 홈과 시리를 통해 집의 IoT 디바이스를 조작하기 위해서, 시놀로지 NAS를 구매하고, Homebridge 서버를 돌리고 있습니다. 처음에는 구글링으로 찾아 Docker와 Homebridge를 설치 한 뒤, 디바이스를 연결 하였습니다. 하지만 최근 공유기를 바꾸며, Homebridge의 모든 기기를 재설정 해야 되었는데, 하는 겸 연결 하는 법에 대한 글을 작성하게 되었습니다. 이번 글에서는 NAS에 Homebridge 서버가 구축되어 있는 환경을 가정하고, 진행하였습니다. 스마트 벽 스위치 제품 스마트 벽 스위치 제품은 Girier사의 3구 제품을 알리 익스프레스에서 구매하여 사용하였습니다. 설치할 위치의 환경에 중성선이 없어, 전등 전원선으로 작동하는 제품을 찾았습니다. 완벽하게 작동하는 ..
-
[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 객체를 ..
-
[Synology NAS] 맥에서 시놀로지 NAS 네트워크 드라이브 연결Programing/Home IoT 2020. 4. 18. 10:35
개요 최근 시놀로지의 DS218+를 구입해 만지며 놀고 있습니다. 집에서는 데스크톱(윈도) 외부에선 노트북(맥북프로)을 번갈아 가며 작업을 하다 보니 다른 환경의 파일 공유의 불편함이 있었는데, 이번에 구입한 NAS를 통해 좀 더 편하게 환경을 바꾸고 싶었습니다. 이번 글에서는 내부 네트워크 상황에서 Finder로 NAS에 접근할수 있는 방법을 시도해 보겠습니다. DS281+ 정보 시놀로지 DiskStation DS218+ 2Bay NAS 인클로저 듀얼 코어 2.0GHz HDD 없음 COUPANG www.coupang.com 기존 NAS 접근 방식 NAS를 설치하고 한동안은 브라우저를 통한 DSM을 이용하였습니다. 하지만 브라우저를 켜고, 로그인을 하고, 접속을 하는 방식은 불편함을 동반하였습니다. 심지..
-
[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 적용할 ..
-
[Google Apps Script] 구글 앱스 스크립트를 이용한 간단 스프레드 시트 자동화 #02Programing/Google Apps Script 2018. 12. 14. 15:29
개요 지난 글에서 스프레드 시트에 스크립트 작성까지 마쳤습니다. 이번 글에서는 코드 설명과 실행, 트리거 등을 알아 보겠습니다. 구글 앱스 스크립트 - Google Apps Script 작성한 스크립트 입니다. 몇줄씩 잘라서 보겠습니다. function myFunction(){ var GSS = SpreadsheetApp.getActive(); var listSheet = GSS.getSheetByName("MemberList"); var dischargedSheet = GSS.getSheetByName("Discharged"); var discharge = 1; 맨 위부터 살펴보면 myFunction 이라는 이름의 함수입니다. GSS 는 현재 활성화된 스프레드시트를 받아 옵니다. 여기선 "Sheet f..
-
[Google Apps Script] 구글 앱스 스크립트를 이용한 간단 스프레드 시트 자동화 #01Programing/Google Apps Script 2018. 12. 11. 22:03
개요 최근 혼자서 프로젝트를 하나 진행하고 있습니다. 진행하며 새로 배운 기술들을 간단하게 기록하고, 필요하신 분들이 있으시면 참고하시라고 작성합니다.프로젝트는 동아리 멤버들 중 입대를 하여 없는 인원들을 관리하고, 확인하기 위한 웹 사이트 구축입니다. 웹 기술에 대한 지식이 많이 없어서 구글 스프레드시트를 DB로 사용하였고, 오늘 작성할 내용은 간단하게나마 스프레드시트를 자동화 한 구글 앱스 스크립트에 대한 것입니다. 우리가 만들고 싶은 것은 시트의 멤버가 전역을 하면 자동으로 해당 멤버의 데이터를 삭제하고, 다른 시트에 데이터를 옮기는 것입니다. 구글 스프레드 시트 - Google Spreadsheets 글 작성을 위해 임시로 만들었습니다. 이름은 "Sheet for Blogging"으로 하였습니다...