[프로젝트 생성-쉬운버전] 리액트 프로젝트에 일렉트론추가하기

 

지난 포스팅에서는 일렉트론프로젝트를 보일러플레이팅을 통해 기존 패키지를 그대로 설치해서 사용할 수있는 

쉬운 방법을 포스팅하였습니다. https://uno-kim.tistory.com/377

[프로젝트 생성-쉬운버전] 일렉트론 App 쉽게만들기 (보일러플레이트)

이번엔 리액트 프로젝트에 일렉트론을 추가해보겠습니다.

npx create-react-app {생성팔 프로젝트 폴더이름입력}

//npx create-react-app react-electron

명령어로 리액트 프로젝트를 만듭니다.

생성완료된 모습

생성이 완료되었으면 폴더로 들어가 vs코드도 실행합니다.

cd react-electron
code .
npm start

그럼 로컬host 3000 으로 실행이 됩니다.

이제 일럭트론 패키지를 추가해줍니다.

npm add --dev electron

설치가 완료된 모습

그리고 package.json에 일렉트론 실행 스크립트를 추가합니다.

 ,"electron": "electron ."

추가한 모습

일렉트론의 경우 엔트리 포인트js(main.js) 가 필요합니다. 그래서 package.json 파일 내에 한문장을 더 추가해줍니다.

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

이 엔트리포인트가 메인js라는것을 인지 시키는 것입니다. main.js 를 바라보게 하였으니

이젠 그것을 만들어줍니다. 

경로 : src > 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.loadURL('http://localhost:3000')
} 
app.whenReady().then(() => { 
  createWindow() 
}) 
app.on('window-all-closed', function () { 
  if (process.platform !== 'darwin') app.quit() 
})

그럼 3000포트가 실행중이면

npm run electron

명령으로 실행을 해봅니다.

모두 실행된 모습을 확인할 수 있습니다.

수정하면 두개가 동시에 수정됩니다.

이것으로 리액트 프로젝트에 일렉트론을 더할 수 있는 방법을 포스팅했습니다.

우리가 개발하는 많은 프로젝트를 일렉트론으로도 열수있습니다. 이상입니다. 감사합니다.