Kay's devlog

0. 들어가며 이제까지 포스팅했던 내용을 도대로 electron으로 간단히 메모장(notepad)을 만들어본다. 전에 사용했던 module인 dialog, ipc, menu등이 그대로 사용하되 main에서 renderer로 먼저 어떤 요청을 하기 ipcMain으로는 불가능해 이를 해결하기위해 win.webContents.send( )를 사용할 것이다. 1. index.html notepad를 구현하기 위한 껍데기를 index.html에 구현했다. notepad의 중심기능은 글을 쓰고 저장하고 읽는 것이다. 글을 쓰는 곳은 태그로 처리했고, 저장 또는 읽기 후 Main 쪽으로 텍스트 내용을 보내고 받는 것을 2. main.js main.js 쪽 소스코드는 이전과 매우 비슷하다. 다른 점이 있다면 win 변..

0. 들어가며 데스크톱 애플리케이션을 구현할 때 시스템 다이얼로그(system dialog)는 필수이다. Electron은 파일을 읽고 저장하거나 어떤 상황을 알리기 위한 네이티브 시스템 다이얼로그를 dialog module로서 제공한다. 여러 시스템 다이얼로그가 있으나 그 중 'showOpenDialog' 를 이번 포스팅에 다뤄볼 예정이다. 그 외에, 'showSaveDialog', 'showMessageBox' 등의 메쏘드도 있으니 상황에 맞게 사용하면 될 것이다. 1. showOpenDialog showOpenDialog는 파일을 읽기 위해 사용되는 네이티브 시스템 다이얼로그이다. 간단한 예제로서 텍스트 파일을 읽어볼 것인데, project directory에 다음과 같이 'exampleText'라..

0. 들어가며 우리가 사용하는 거의 모든 애플리케이션에는 메뉴가 있다. 그리고 메뉴는 애플리케이션에서 중요한 역할을 한다. 예를 들어 메모장 애플리케이션에서는 메뉴를 통해 작업 중인 문서를 저장하거나 불러올 수 있고 애플리케이션을 을 종료할 수도 있다. 메뉴에는 애플리케이션 창 위쪽에 있는 애플리케이션 메뉴(application menu)와 오른쪽 클릭을 하면 나타나는 콘텍스트 메뉴(context menu)가 있다. 이번 포스팅에서는 Electron에서 이 두 메뉴를 구현하는 방법을 알아본다. 1. 애플리케이션 메뉴(Application Menu) 에플리케이션 메뉴는 애플리케이션 창 상단에 보이는 메뉴이다. 흔히 파일을 저장하고 읽을 때, 어떤 도움이 필요할 때 사용한다. 프로젝트 디렉토리를 생성하고 n..

0. 들어가며 Electron은 main, renderer 두 개의 프로세스에 의해 동작한다. 이 두 프로세스에 대해 알아보고, 프로세스간 통신 즉, IPC(Inter Process Communication)를 다뤄본다. 1. main 프로세스와 renderer 프로세스 Electron으로 애플리케이션을 실행시킬 때, main 프로세스가 생성되는데, 이것은 OS의 native GUI와 상호작용하여 애플리케이션의 GUI를 만든다. 즉, main 프로세스는 native GUI 에 접근 가능하다. 또한 NodeJS 모듈도 접근가능하기 때문에 앱 개발이 용이하다. 그러나 단순히 main 프로세스를 실행시킨다고 애플리케이션 창이 만들어 지는 것은 아니다. 애플리케이션 창은 main 프로세스가 실행되는 main.j..

0. 들어가며 Electron은 HTML, CSS 그리고 JavaScript를 이용해 크로스 플랫폼(Windows, Ubuntu, Mac 등) 데스크톱 앱을 만들게 해준다. HTML, CSS 그리고 JavaScript는 웹개발, 프론트엔트 단에 흔히 사용되는 언어이다. 그런데 Electron의 프론트엔드 단(Electron에서는 renderer라 불리는 것 같다.)에서는 웹과 달리 JavaScript 사용시 NodeJS 모듈을 그대로 사용할 수 있다. 가령, 'fs' 모듈을 통해 파일을 읽고 쓰거나, 'net' 모듈을 통해 tcp 통신을 할 수 있다. 오늘은 renderer에서 NodeJS 모듈 중 'os' 모듈을 사용해 봄으로서 모듈 사용 법을 살펴본다. 1. Render에서 OS module 우선 프..

0. 들어가며 Javascript라는 하나의 언어로 front end뿐만 아니라 back end에서도 비교적 쉽게 프로그래밍이 가능하다. 뿐만 아니라 Electron을 이용하면 데스크톱 앱도 만들 수 있다. 실제로, Slack desktop app, Visual Studio Code, Discord 등이 Electron을 이용해 만들어 졌다고한다. 이처럼, Javascript는 다방면에서 활용될 수 있기 때문에 최근 인기를 많이 얻고 있는 언어라고 생각한다. 앞으로 수준이 낮고 짧은 프로젝트가 될 것 이지만, Electron이 어떤 녀석인지 학습해 보고자 여기에 Electron과 관련된 글을 당분간 포스팅 할 예정이다. 오늘은 Electron을 설치해보고, 간단히 'Hello, World'를 출력해본다...

MQTT 발행(publish)과 구독(subscribe)을 통해 데이터를 주고 받는다. publish는 데이터를 보내는 것, subscribe는 데이터를 받는 것이다. MQTT의 publish, subscribe를 테스트 해보기 위해 다음과 같이 단방향 통신 구조로 테스트 해 볼 것이다. 이것을 응용하면 양방향 통신, 다수의 클라이언트와 통신이 가능하다. 이번에도 broker로서 mosquitto를, client로서 mosquitto-clients를 사용해 Ubuntu Server(18.04) CLI에서 테스트한다. 잠시 HTTP와 MQTT를 비교해보자. 이 부분은 참고만 하길 바라며 MQTT가 HTTP보다 더 낫다는 것으로 오해하지 않기를 바란다. HTTP와 MQTT는 목적, 용도가 다를 뿐이다. HT..

MQTT server, client는 여러 종류가 있지만 흔히 사용되는 mosquitto를 Ubuntu(18.04)에 설치해 볼 것이다. 아래와 같이 설치 명령어를 실행하면 매우 쉽게 설치할 수 있다. mosquitto-clients도 함께 설치하자. 나중에 mosquitto-clients로 publish/subscribe를 해 볼 것이다. kay@ubuntu:~$ sudo apt-get install mosquitto mosquitto-clients 설치가 완료되면 mosquitto가 자동으로 실행된다. 실행된 모습을 ps 명령어로 확인해보자. 그러면 아래와 같이 mosquitto 프로세스가 실행 중임을 알 수 있다. kay@ubuntu:~$ ps -ef | grep 'mosquitto' mosquit..

풍부한 라이브러리를 제공하는 것이 Java의 장점 중 하나이다. 그리고 다른 프로그램 또는 OS에서 직접 Java코드를 실행해야 할 경우가 있다. 라이브러리 처럼 말이다. 이때 Java Class를 여러개 묶어서 실행가능한 .jar로 만들어 실행하면 된다. 여러 Class를 하나의 .jar 파일로 만들어 args[ ]를 넘기면서 실행해 결과를 볼 것이다. 1. 예제 코드 만들기 예제 코드를 간단히 만들어 봤다. 간단히 설명을 덧붙이자면, Main 에서 Person 클래스를 사용하고, Person은 args[ ]를 통해 초기화 된다. 그리고 그 결과를 간단히 볼 것이다. 소스코드는 아래와 같다. a. Main public class Main { /* * arg[0]: personName(String) * ..

가끔 Ubuntu에서 Package가 Update 되지 않거나, Install 되지 않는 경우가 생긴다. 보통 sources.list에 문제가 생겨 잘 되지 않는 듯 하다. [해결법] 1. 다음 아래의 사이트에 접속한다. https://repogen.simplylinux.ch/ 2. Select your country, Select your release를 해준다. 그리고, Ubuntu Branches, Ubuntu Updates의 체크박스를 모두 선택한다. 3. 맨 아래 Generate List 를 클릭하면, #------------------------------------------------------------------------------# # OFFICIAL UBUNTU REPOS # #-..