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'를 출력해본다...