『Client 01 』 [React] [Electron] Electron에 React 창 띄우기

🎲 개요

 

일렉트론에 리액트를 띄워보자!

📝 일렉트론이란?

간단하게 데스크톱 앱 어플을 만들 수 있는 도구이다. 우리가 흔히 쓰는 vscode, 디스코드가 일렉트론으로 만든 앱이다. 

💻 React 설치 

npx creaet-react-app 앱이름 으로 react를 설치하자.

npx create-react-app 0916

설치가 완료되면 앱이름으로 된 폴더가 생기는데, 폴더로 들어가서 vscode를 실행시킨다.

cd 0916
code .

해당 창이 뜨면 설치 완료!! 자세한 포스팅은 지난 포스팅을 참고해주세요! 

 

 💻 Electron 설치 

electron을 설치하자.

npm i --dev electron

package.json에 다음과 같이 추가해준다.

electron이 실행할 때 해당 파일을 바라보게 한다.

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

src 폴더에 main.js 파일을 생성해서 다음과 같이 적어준다.

//main.js
const { app, BrowserWindow } = require('electron') 
const path = require('path') 
function createWindow () { 
  const win = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    webPreferences: { 
      nodeIntegration: true,
      contextIsolation : false
    } 
  }) 
  win.loadURL("http://localhost:3000")
} 
app.whenReady().then(() => { 
  createWindow() 
}) 
app.on('window-all-closed', function () { 
  if (process.platform !== 'darwin') app.quit() 
})

이제 electron을 실행시키면 끝!! electron에 react를 띄울 예정이기 때문에 react를 먼저 실행시키고, electron을 실행시키면 된다. 

vscode에서 터미널 창을 띄워주고 (ctrl + `) 창을 나눠주고 각각 띄워준다.

동시에 띄워주는 방법도 있으나, 각각에서 에러 확인하기 쉬워서 난 이 상태로 개발할 예정이다. 

❌ .ps1 파일을 로드할 수 없습니다.

electron . 명령어를 실행하니 아래와 같은 에러가 떴다.

에러에서 친절히 알려주는 루트로 가서 해당 파일을 삭제하고 실행시키면 된다!

다시 실행시키면 정상적으로 뜨는 것을 확인할 수 있다. 

✍️ 🎲 마무리

electron과 react를 꼭 동시에 띄울 필요는 없다고 생각한다. 비록 두번 실행시켜야 하는 번거로움이 있지만, 마지막엔 react를 build 해서 electorn 앱을 만들 예정이기 때문에 크게 의미 없다고 생각한다. (초반에 동시에 띄워야한다는 강박에 고생했던 기억이 😢😢)

📌 참고 사이트

 

일렉트론기초-12.React + Electron 한방에 띄우기