Archive/메모노트 데스크탑 앱
-
파일시스템 사용하기Archive/메모노트 데스크탑 앱 2022. 7. 2. 17:31
fs모듈 (Node JS) fs모듈은 Node.js에 기본으로 내장된 모듈로, 파일 입출력 처리를 위해 사용하는 모듈이다. 이번에 만드는 메모노트 앱에서 파일을 로컬로 저장하거나 불러오기 위해서는 해당 부분을 반드시 먼저 짚고 넘어가야 했다. fs 모듈은 비동기 메서드와 동기 메서드를 둘 다 제공한다. 따라서 구상한 프로젝트에 맞는 것으로 골라서 사용하면 된다. 비동기 메서드의 경우, 마지막 인자로 콜백 함수를 받아서 실행되며 return 값은 없다. 반면 동기 메서드의 경우, 결괏값을 반환하며 예외를 일으킬 수 있다. (try-catch문 사용) 디렉터리 생성 fs모듈을 이용해 디렉터리를 생성하기 위해서는 mkdir()이라는 메서드를 사용한다. const fs = require("fs"); fs.mkd..
-
Electron과 React간의 데이터 통신Archive/메모노트 데스크탑 앱 2022. 6. 29. 22:17
React에서 Electron의 API 사용 Electron을 이용해 생성한 데스크톱 앱은 일반적인 브라우저에서 동작하는 웹앱과 달리 강력한 기능들을 추가로 지원한다. 사용자의 컴퓨터 자원에 직접적으로 접근이 가능하기 때문에 파일 시스템을 이용하거나, 알림을 보낸다거나, 블루투스를 사용하는 식으로 여러 방식의 활용이 가능하다. 이때 이러한 기능들은 Electron 자체적인 API를 이용해 사용할 수 있는데, React를 이용해 Render를 진행한다면, React에서 어떻게 이러한 기능에 접근할 수 있을까? 이는 IPC 통신이라는 방식을 이용하여 가능하다. IPC(Inter-Process Communication)이란, 프로세스 간 통신이라는 뜻으로, 프로세스들 사이에서 서로 데이터를 주고받는 방법이나 ..
-
Electron with React (+TypeScript)Archive/메모노트 데스크탑 앱 2022. 6. 29. 20:02
기본 설정 Electron에서 화면을 render 하는 방법으로는 html 파일을 사용하거나, 특정 웹페이지의 URL을 사용하는 방법이 있다. 이때 React는 Build를 통해 완성된 html, css, js파일을 생성해낼 수 있기 때문에 이렇게 Build 된 파일을 Electron이 읽도록 하기만 하면 된다. 하지만 문제는 개발환경에서 React를 사용할 때 발생한다. React를 통해 개발을 할 때는 보통 일일이 Build를 진행하지 않고, DevServer를 이용하여 변경점을 즉각적으로 반영해가며 개발을 진행한다. 따라서 이렇게 개발환경에서는 Build에 의해 만들어진 static 한 파일이 존재하지 않기 때문에, Electron에서는 URL방식을 이용하여 개발서버의 주소를 연결하는 방식을 사용해..