[프로젝트 생성-1]node.js로 일렉트론 설치하기

https://uno-kim.tistory.com/369

Node js 설치

우선 위 URL에 접속해서 node.js 를 설치해줍니다.

그리고 일렉트론 설치를 위해 진행합니다.

---

노드 js 설치가 완료되었다면

일렉트론을 이제 시작할 폴더를 선정하고 그 폴더에 설치를 진행해줍니다.

저의 경우에는 사용자(user)폴더에 생성합니다. 큰이유는 아니지만 경로에 가끔 한글이 들어가면 깨지거나 문제가 생기는 경우가 있었는데 제일 접근성좋고 빠른곳이 사용자 폴더같네요

cd {경로} //예 :cd C:\Users\zhfld\electron

그리고 폴더를 만듭니다.

mkdir myElectron (make 디렉터리)

폴더생성하고 해당 폴더로 이동

프로젝트생성

npm init

위 명령어를 실행하면 아래처럼 나오는데 적당히 값을 넣고 (거의안넣어도됩니다.) 진행합니다.

완성된 모습

프로젝트 디렉터리 vs코드 연결

실행해주시고

생성한 폴더로 이동해서 폴더선택을 눌러줍니다.

아까 입력한 것들이 보입니다.

특징은

main : index.js는 entry porint 로 프로그램의 시작점입니다.

파일명은 index.js or main.js 를 일반적으로 사용합니다.

<= js 가 곧 서버역할같이 해줌

일렉트론 패키지 추가

이제 일렉트론 패키지를 추가합니다.

npm install --svae-dev electron

설치중입니다.

설치완료

그리고 패키지.json 의 내용에

이런게 추가됩니다.

의존성이 추가되었습니다.

일렉트론 실행

스크립트를 수정합니다.

수정전

수정후

스크립트 부분에 아래의 소스를 추가해주었습니다.

, "start"     : "electron ."

이제 터미널에서 npm start를 입력하고 실행하면 일렉트론이 실행하게됩니다.

이렇게 나오는 것이 정상!!!!!!!!!!

놀라지마세요 위처럼 나오는 것이 정상입니다.

오픈될 html이 없어서 실행이 안된다고 이해하시면 빠릅니다.

실행될 수 있게하기

새로 index.html을 추가

html을 추가합니다.

vs코드에서 html을 입력할때 !를 입력하면 됩니다.

이걸 누르면

삭~

그리고 내용을 조금 추가해줍니다. 

    <h1>Hello World!!</h1>
    my node version is <span id="node-version"></span>
    chrom version is <span id ="chrome-version"></span>
    electron version is <span id="electron-version"></span>

버전들이 찍히게끔해주었습니다.

그리고 index.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()
})

일렉트론을 사용하기위해 일렉트론을 선언했고,

createWindow 함수로

윈도우 창을 띄울 수 있게 하였고, 이때 html을 읽어서 창을 띄울수있습니다.

그리고 곧 생성할 preload.js 를 새로 생성할 것을 미리 추가했습니다.

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

크롬 노드 일렉트론 버전이 replaceText를 통해 나올 수 있게 했습니다.

이렇게 했으면 이제 프로젝트를 실행해 보겠습니다.

다시 실행!

npm start

일렉트론이 실행된 모습

크롬버전, 일렉트론 버전 등등이 모두 정상적으로 나왔습니다.

이것으로 일렉트론 설치와 설정 그리고 간단한 js를 통해 실행까지 해보았습니다. 감사합니다.