티스토리 뷰

Language/Node.js

electron에서 ipcRenderer 사용하기 - 제1편 프로젝트 빌드하기

KyeongRok Kim 2017. 11. 4. 23:54

electron에서 ipcRenderer 사용하기

 

pc용 앱이 필요할 때가 있습니다.

언제 필요하냐면 내가 만든 앱인데 .js로 주면 개발자가 아닌 사람들은 실행을 못시킵니다.

node.js깔고 git clone받고 이거 안한다고 해도 npm install 해야하고 등 이론적으론 가능하지만

실질적으론 불가능에 가깝습니다.

 

그래서 이런식으로 어떤 버튼이 있고 누르면 뭔가 결과가 표 형태로 나와서 엑셀에 붙혀넣기 할 수 있게 만들어 주어야 합니다.

그럴때 일렉트론을 쓰면 무언가 실행해서 버튼을 누를 수 있게 이렇게 앱을 만들어 줄 수가 있습니다.

 

한번 잘 만들어 놓으면 뒤에 엔진만 바꾸면 되기 때문에 한번쯤은 하나 빌드를 해놓고 필요할 때 마다 다른 엔진을 붙혀서 빌드를 하면 여러가지 간단 하지만 유용한 프로그램들 주로 웹에서 데이터를 수집하거나 api를 호출해서 프로세싱해서 저장하는 크롤러, 스크래퍼가 되겠지만 무언가 데스크톱 앱 형태로 만들 수 있습니다.

 

프론트엔드는 html + javascript로 비교적 간단하게 화면을 만들 수 있지만

api호출을 하는 request 모듈을 쓰는 크롤러에서 프론트엔드로 데이터를 전달하는 부분을 만들때는 나는 안써본 기술을 써봐서 어려웠습니다.

 

쉽게 할 수 있는 생각으로는 일렉트론 앱을 띄울 때 익스프레스(express)를 띄워서 ajax call을 하면 되겠다고 나는 생각을 했었지만

이 방법은 안된다는 것을 해보고 하도 안돼길래 구글링을 여러시간 한 끝에 알게 되었습니다.

 

방법은 ipcRenderer라는걸 사용해야 한다는 것을 알게 되었습니다.

 

이런건데... 쉽지가 않습니다.

 

풀어야할 문제들은 아래와 같이 굉장히 많습니다.

 

하나씩 풀어볼까 합니다.

 

예제는 제가 쓰는 인텔리제이 웹스톰으로 했습니다.

 

1.프로젝트 구조

프로젝트 구조는 이렇게 잡아 보았습니다.

 

제가 만든 프로그램들 그리고 이 일렉트론 앱을 빌드를 해서 일반 사용자들이 비교적 손쉽게 1초에 10번쯤은 특정 사이트에서 데이터를 수집할 수 있었으면 좋겠습니다.

설명을 좀 해보자면 프로젝트 루트 바로 아래에 index.html이 있습니다.

 

루트는 /로 표현을 하겠습니다. 난 윈도를 써서 실제 파일이 위치한 곳은 c:\git\electron_practice_02 지만 루트는 /로 쓰겠습니다.

 

그래서 index.html은 /index.html 이렇게 위치를 표현해보겠습니다.

 

 

위 화면에서 보이는 것과 같이 index.html에는 hello가 찍혀있고 /루트 아래있다.

 

/아래에는 /dist, /src 이렇게 두개의 폴더(디렉토리)가 있다.

 

index.html이 루트 /에 있으므로 ./dist/renderer/app.js를 위와 같이 require한다.

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    hello
</body>
<script>require("./dist/renderer/app.js")</script>
</html>

 

index.html은 이렇게 아무 내용이 없지만 자기가 할 일은 충실히 하고 있다.
 
9번라인에 require안쪽에서 부르는 app.js를 웹팩으로 빌드해서 /dist/renderer/ 아래에 넣는걸 해보도록 하겠다.
 
 

2. webpack build설정하기

1.index.html은 webpack으로 build한 ./dist/renderer/app.js 를 require로 import한다.

2.webpack으로 src에 있는 renderer를 build한다.

 

이걸 하려면 webpack 명령어를 쓸 수 있어야 한다.

webpack 명령어를 쓸려면 webpack을 깔아야 한다.

 

npm install --save webpack

npm insatll -g webpack을 한다.

 

 

2.1 webpack.config.js

/src/main/index.js 는 /dist/main/index.js에 넣고
/src/renderer/app.js는 /dist/renderer/app.js에 넣도록 하는 빌드 스크립트가 필요하다.
 

빌드는 웹팩(webpack)으로 할 것이고 webpack은 루트(/)에 있는 /webpack.config.js의 내용을 보고 빌드한 파일을 어디에 넣을지 정한다.

 

그리고 갑자기 /main/index.js가 나오는데 뒤에 나올테니 일단은 만들어준다.

 

목표는

이렇게 아무것도 없던 /dist/main, /dist/renderer 에 아래와 같이

 

같은 이름의 빌드가 된 파일이 들어가도록 하는 것이다.

 

그러면 웹팩 빌드 스크립트를 짜보자. 루트(/)에 webpack.config.js 를 만들고 아래 소스 코드를 넣어보자.

 

webpack.config.js

module.exports = {
  target: 'electron',
  node: {
    __dirname: false,
    __filename: false
  },
  resolve: {
    extensions: ['.js']
  },
  entry: {
    'main/index': './src/main/index.js',
    'renderer/app': './src/renderer/app.js',
  },
  output: {
    filename: 'dist/[name].js'
  },
  devtool: 'source-map'
};
 
설명을 좀 해보자면 entry:{} 블록하고 output:{} 블록을 일단 보자.
 
엔트리(entry)는 입력되는 파일로서 /src/ 아래의 위치를 가리키고 있고 아웃풋(output)은 /dist/ 아래를 가리키고 있다.
 
엔트리에서 지정한 파일을 빌드해서 /dist/아래에 넣겠다는 뜻이다.
 
 

2.2 빌드 실행

 
alt + f12를 이용해 터미널을 열어서 webpack 이라고 쳐서 빌드 해도 되지만 package.json에 script:{} 블록에 명령어를 넣어놓고
툴을 이용해서 실행할 수도 있다. 원하는 방법으로 하도록 한다. 난 후자의 방법을 썼다.
 

package.json script블록

"scripts": {
    "build": "webpack",
    "watch": "webpack -w",
    "electron": "electron ."
}
 

 

설명을 좀 해보자면 일단은  build에 들어있는 webpack 명령어만 쓸건데 아래 두개는 뒤에 필요해서 일단 넣어놓았다.

electron은 일렉트론을 실행할 때 쓴다.

 

package.json

{
  "name": "electron_practice_02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "build": "webpack",
    "watch": "webpack -w",
    "electron": "electron ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^1.7.8"
  }
}
 

package.json 전문이다. 아직은 라이브러리를 여러개 안써서 몇개 없긴 하다.

 

이렇게 넣고 alt + f11을 누르면 실행할 수 있는 툴이 뜬다.

여기에서 build를 선택해서 실행한다.

 

그러면 콘솔에 이렇게 초록색으로 나오면 빌드가 잘 된 것이다.

 

프로젝트 익스플로러에서 /dist/main/index.js, /dist/renderer/app.js 가 보이면 잘 한 것이다.

 

 

2.3 빌드가 잘 되었는지 확인 하기

1.index.html이 require 하고 있는 /src/renderer/app.js 에 alert('hello'); 를 입력하고

2.위에서 실행한 build를 한 후에

3.위에서 script:{} 블록에 넣은 electron을 실행한다.

 

/src/renderer/app.js에만 수정을 했지만

 

/dist/renderer/app.js를 import한 코드에서 실행 했을때도 반영이 되는걸 보면 빌드가 잘 되는 것으로 보인다.

 

 

end.

 

 

 

 

저작자표시 비영리

'Language > Node.js' 카테고리의 다른 글

javascript .sort() 두가지 조건으로 정렬하기  (0) 2017.11.11
electron에서 ipcRenderer 사용하기 - 제2편 ipcRenderer import하기  (0) 2017.11.05
공공데이터 이용하는 방법  (0) 2017.10.21
node.js 파일 리스트 출력  (0) 2017.09.26
print to file using node.js  (0) 2017.09.25
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함