Electron에 React 연동해보기!

Electron에 대한 기본 지식이 없다면 공부하고 시작하는 것이 좋다.

https://ohrora-developer.tistory.com/3

Electron이 뭐길래!?

---

 

1. Nodejs 설치

• Electron 개발을 위해서는 우선 Nodejs가 기본적으로 설치되어있어야 한다.
• 설치 URL은 아래와 같다.
  https://nodejs.org/ko/

Node.js

• 설치가 완료되었거나 이미 설치되어있었다면 아래 명령어를 통해서 버전도 확인해볼 수 있다.

node -v
npm -v

 

2. Nodejs 파일 위치 정하기 & Electron 프로젝트 생성하기

1) 설치하고자 하는 위치에 파일을 생성해준다.

npx create-electron-app electron-app
cd electron-app

2) VS Code을 실행해준다.

code .

 

3. npm 패키지 설치하기

터미널에서 아래 스크립트를 실행한다.

npm install

프로젝트 구조는 다음과 같다.

 

4. Electron 프로젝트 실행하기

아래 스크립트로 프로젝트를 실행한다.

npm start

실행화면은 다음과 같다.

 

꿀팁) VS Code npm 설치 시, 쉽게 프로젝트를 실행하는 방법

1) 왼쪽 메뉴바에서 확장을 선택한다.

2) 검색창에 "npm"을 입력한다.

• npm 설치 후, 보기-명령 팔레트 메뉴를 꺼낸다.
  (windows 기준, ctrl+shift+P)
• npm 스크립트 보기에 포커스를 선택한다. 

3) 검색 하단에 생긴 실행 버튼을 사용해서 실행해주면 명령 스크립트없이도 실행 가능하다. 

 

5. React 프로젝트 생성하기

Electron 프로젝트 안에서 React 프로젝트를 생성해준다.

npx create-react-app react-electron

 

6. React 프로젝트 실행하기

http://localhost:3000 으로 실행된다.

npm start

 

7. Electron 패키지 추가하기

npm add --dev electron

 

8. Electron 실행 스크립트 추가하기

Electron Package.json 에 아래 스크립트문을 추가한다.

"scripts": {
	....,
	"electron": "electron ."
},

 

9. Electron Entry point 스크립트 추가하기

"main": "src/main.js",

 

10. main.js 만들기

• src/main.js 파일을 생성한다.
• electron-quick-start의 main.js를 복사하여 추가한다.

const { app, BrowserWindow } = require('electron') 
// include the Node.js 'path' module at the top of your file 
const path = require('path') 
// modify your existing createWindow() function 
function createWindow () { 
  const win = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    webPreferences: { 
      preload: path.join(__dirname, 'preload.js') 
    } 
  }) 
  win.loadFile('index.html') 
} 
app.whenReady().then(() => { 
  createWindow() 
}) 
app.on('window-all-closed', function () { 
  if (process.platform !== 'darwin') app.quit() 
})

 

win.loadFile(’index.html’) 부분을 아래와 같이 변경한다.

win.loadURL('http://localhost:3000')

• 윈도우에 React URL을 불러오면 끝이다.

 

11. Electron에 React 화면이 잘 연동 되었는지 확인하기

 

 

12. 느낀점

기본적인 연동은 끝이다.

이 틀에 React 요소나 Electron 요소를 추가하여 app을 더 꾸며낼 수 있다.

확실히, 새로운 언어로 시작하는 게 아니라 원래 알던 언어들로 개발을 할 수 있다는 점에서 쉽게 시작하기 좋고, 활용하기도 좋은 것 같다.

똑같은 서비스라도 Electron을 사용해 application을 만들면 서비스화 시키기 좋을 것 같다.