리액트 앱 만들기 (CRA)
1
npx create-react-app 앱이름 --template typescript
npx 란 ?
npx 는 npm 에 내장되어 있는 새로운 명령 기능 가령 create-react-app 이라는 모듈을 사용하기 위해서, 기존의 npm에서는 지역 혹은 전역에 설치했어야 하는데 이러면 패키지의 관리가 힘들어짐, 업데이트도 힘들어짐.
따라서 npx 를 사용하면 1회성으로 설치하고 삭제함!
Electron 이 dev 버전인지 확인
electron 을 지금 빌드한 프로덕션인지, 아니면 개발 중인 디벨롭 모드인지 확인하기 위해서 electron-is-dev 모듈을 추가로 사용할 것.
이는 devDependencies 가 아니라, 런타임 내에서 사용될 것이므로 dependencies 로 설치한다.
1
npm i electron-is-dev
또한 electron을 빌드와 관리하기 위해서 몇가지 모듈을 같이 설치해본다. 이는 모두 런타임에서 사용되지 않을 개발용 모듈이므로, --save-dev 인수를 추가한다.
1
npm i electron electron-builder concurrently cross-env wait-on typescript --save-dev
electron은 일렉트론을 실행하기 위해 사용됨. 우리는 이것을 테스트하기 위해 사용함.electron-builder는 실제 프로덕션 버전으로 빌드하기위해 사용함concurrently는 동시에 여러 명령어를 실행하기 위해 사용됨. 기존의 npm에서 여러 스크립트를 사용하기 위해선&&구문을 사용했다. 아래 코드를 참고해보자.
1
2
3
"scripts": {
"start": "tsc index.ts && node index.js"
}
하지만 && 구문은 앞의 명령어가 종료될 때까지 대기해야 한다. 가령 webpack-dev-server 같은 모듈은 사용자가 직접적으로 종료해 주지 않는 이상 터미널이 영구적으로 돈다. 따라서 다음 작업은 결코 실행되지 않는다.
이를 해결하기 위해서는 두개의 터미널을 띄우고, 각각명령어를 실행해 주어야 하는데 귀찮다. 따라서 우리는 concurrently 모듈을 이용할 것이다. 나열된 모든 인수의 명령어를 동시에 실행한다. 실제 사용 예는 다음과 같다.
1
"electron:start": "tsc public/Electron && concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",
위 명령어의 순서를 한번 보자 public/Electron 파일을 ts compile 을 하고(동기적 && ) 이후 concurrently명령어를 이용해서 동시에 실행할 것이다.
cross-env모듈은 사용자의 운영체제에 관여되지 않고, 똑같은 명령행을 실행할 수 있도록 도와준다.wait-on
Electron 을 실행하는 소스코드 만들기
나의 경우 CRA 를 한 후 생성된 Public 디렉토리에 Electron.ts 파일을 만들어 주었다.
파일 작성은 다음과 같이 해주었다. 이 소스코드는 electron 공식 홈페이지에서 확인이 가능하다.
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
31
32
33
34
35
36
37
38
39
40
41
42
import { app, BrowserWindow } from 'electron'
import * as isDev from 'electron-is-dev' i
mport * as path from 'path'
// 1. GC가 일어나지 않도록 밖에 빼줌
let main_window: BrowserWindow|null
function create_window() { main_window = new BrowserWindow({ // 이것들은 제가 사용하는 설정이니 각자 알아서 설정 하십시오.
center: true,
width: 1200,
height: 600,
kiosk: !isDev,
resizable: false,
webPreferences: {
// 2.
// 웹 애플리케이션을 데스크탑으로 모양만 바꾸려면 안 해도 되지만,
// Node 환경처럼 사용하려면 (Node에서 제공되는 빌트인 패키지 사용 포함)
// true 해야 합니다.
nodeIntegration: true,
},
})
// 3. and load the index.html of the app.
if (isDev) {
// 개발 중에는 개발 도구에서 호스팅하는 주소에서 로드
main_window.loadURL('http://localhost:3000')
main_window.webContents.openDevTools()
} else {
// 프로덕션 환경에서는 패키지 내부 리소스에 접근
main_window.loadFile(path.join(__dirname, './build/index.html')) }
// Emitted when the window is closed.
main_window.on('closed', () => { main_window = null }) }
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', create_window)
// Quit when all windows are closed.
app.on('window-all-closed', () => { app.quit()
})
모든 모듈의 설치가 끝났다면 ? scripts 를 설정해주자!
1
npx create-next-app --typescript 앱이름
CRA(CNA) 로 앱을 생성하고 나면, script는 다음과 같을 것이다.
1
2
3
4
5
6
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
}
두가지를 더 추가한다. 타입스크립트를 사용하니, tsc명령행을 사용할것이다.
1
2
"electron:start": "tsc src/Electron && concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",
"electron:build": "tsc src/Electron && npm run build && electron-builder"
electron:start- tsc 명령어를 이용해서 src 폴더에 있는 Electron.ts 파일을 컴파일 한다.
- 변환 작업이 끝나면,
concurrently모듈을 이용해서 세 가지 명령어를 동시에 실행한다. - 한 개는
npm run start를 이용하여 react-scripts start 명령을 실행하는 것, 다른 것은 3000번 포트가 열릴 때까지 대기한 후 , electron 으로 현재 위치를 실행할 것이라는 의미. - electron 으로 현재 위치를 실행하면, electron은 자동으로 실행한 위치의 package.json 파일을 찾아, main 진입점을 찾는다. 따라서 package.json 에 main 진입점을 추가해야 한다.
1
"main": "public/Electron.js"
Electron 실행시키기
테스트 하기 : npm run electron: start
프로덕션 버전으로 빌드하기 : npm run electron:build