[Electron] nodeJS설치 및 웹페이지를 웹어플리케이션으로 구현

<환경 설정 및 기본 테스트>

1. nodeJS 설치하기

https://nodejs.org/ko/

Node.js

nodsJS홈페이지에 접속하면 최신버전과 최적화버전이 있다.  (안정성을 위해 LTS버전을 다운로드)

cmd에서 node를 검색하였을 때 콘솔 화면이 뜨면 잘 설치된 것. 개발환경. 간단하게 테스트해 볼 수 있음.

2. git 설치하기

• git 이란?

https://git-scm.com/

Git

git홈페이지의 오른쪽 하단 모니터를 누르면 최적화 된 git을 다운받을 수 있다. (default값으로 설치하였으며 본인의 컴퓨터 환경에 맞게 옵션 선택하여 설치하기)

git또한 cmd로 설치 확인하기.

cmd로 설치확인하기

3. git을 이용하여 Electron환경 구축하기

https://electronjs.org/

Electron | 자바스크립트, HTML, CSS를 이용해 크로스 플랫폼 데스크톱 앱을 만들어보세요.

Electron홈페이지에 접속하기

스크롤을 내리다 보면 다음과 같은 화면을 볼 수 있다. 

 

 

1. GitHub에서 다운로드 클릭

 

2. electron-api-demos 클릭 (api-demos파일)

 

 

3. Clone or download클릭 후 다운로드 경로 복사하기

4. cmd에 Electron 빌드하기

• default 경로가 C:\Users\user이기 때문에 원하는 위치 경로로 이동해주기 (nodejs라는 폴더로 이동)

$ cd nodejs

• git clone 입력 후 복사한 경로 입력 (파일 다운로드)

$ git clone https://github.com/electron/electron-api-demos

• 다운로드된다운로드된 경로로 이동

$ cd electron-api-demos

• npm(node packaged manager) 설치 및 실행

$ npm install
$ npm start

 

해당화면이 실행된다. Get Started 버튼 누르기.

다양한 데모들을 실행해 볼 수 있음.

 

• 개발자 모드로 실행하기

$ npm run dev

 

오른쪽에 개발자모드 환경 지원

 

---

<demo버전이 아닌 기본 템플릿으로 본인의 사이트를 웹 어플리케이션으로 구현하기>

1. git의 electron 클릭

 

2. electron-quick-start 클릭 후 위의 과정(3-3,4) 반복

 

3. 기본 템플릿 설치 확인

 

 

4. 본인이 웹 어플리케이션으로 만들고 싶은 페이지를 준비한다. (인터넷 브라우저에서 해당 페이지를 실행한 모습)

 

 

5. C:\Users\user\nodejs\electron-quick-start\main.js 파일 실행해보면 20번째 줄에 

mainWindow.loadFile('index.html')

위 코드를 볼 수 있는데 이 부분이 어플리케이션을 실행했을 때 처음으로 보이는 페이지이기 때문에 기존의 인덱스파일위에 덮어쓰거나 본인이 만든 페이지의 경로로 바꿔서 적어주면 된다. 

 

• test폴더를 만든 후 그 안에 index.html을 저장

mainWindow.loadFile('test/index.html')

 

6. 다시 rpm start명령어를 실행해보면

인터넷 브라우저가 아닌 어플리케이션 형태로 본인의 웹페이지가 구동된 것을 확인할 수 있다.