이 글은 https://okane-on-cliff.tistory.com/297 일렉트론 시작하기 참고한 문서는 공식문서다. https://www.electronjs.org/docs/latest/ 그럼 내가 이해하기 쉽게 개발 환경을 만드는 과정을 정리해 보겠다. 목적 이 문서의 목적은 1. hello world를 표시하는 앱을 실행한다. 2. okane-on-cliff.tistory.com 에서 이어져요 먼저 dotenv라는 라이브러리를 설치해줘요 npm i dotenv 그리고 프로젝트 폴더에 .env 파일을 만들어요 .env가 안만들어 지면 .env.도 괜찮아요 # SOCKET_URL="wss://blhablhablhablhablha.org/api/socket" # HOST_URL="https://bl..

원래 index.html에서 로컬컴퓨터를 컨트롤 하는건 보안적으로 좋지 않다. 예를 들어 https://~~.com 에 접속했더니 내컴퓨터에서 node.js가 실행되서 컴퓨터를 그냥 파괴해버리는 명령이 실행되면 얼탱이가 없지 않을까?? 그래서 index.html에 참조되는 script는 그냥 웹브라우저 상에서 작동하는 코드만 적는거고 내컴퓨터를 뒤지거나 망가뜨릴만한 것은 안적는다. 하지만 그래서야 그냥 웹페이지를 만들고말지 일렉트론 같은 데스크탑앱을 왜 만들겠는가. 따라서 index.html에서 node를 실행할 수 있는 브릿지를 놓아서 이를 실행하고자 한다. https://www.electronjs.org/docs/latest/tutorial/tutorial-preload 이 페이지에서 설명하고 있는 ..

참고한 문서는 공식문서다. https://www.electronjs.org/docs/latest/ 그럼 내가 이해하기 쉽게 개발 환경을 만드는 과정을 정리해 보겠다. 목적 이 문서의 목적은 1. hello world를 표시하는 앱을 실행한다. 2. 해당앱을 빌드한다. 라는 두가지 목표를 가진다. 앱 만들기 1-1. 프로젝트 폴더를 만들고 해당폴더에서 npm init을 사용하여 package.json을 만든다. 1-2. 엔트리 포인트는 main.js으로 한다. 1-3. author는 꼭 적어 준다. 안하면 빌드시에 오류가 난다. 2-1. npm install electron --save-dev를 사용해서 일렉트론을 설치해준다. 2-2. package.json의 script에 start를 추가해서 npm r..