항상 생각하는 것이지만.. 프로젝트 시작 할 때 가장 귀찮은 게 환경설정이다
이번에는 심지어 일렉트론의 한정된 환경 안에서 해내야 하기 때문에 .. 더욱더 귀찮다
구조
일단 일렉트론위에 리액트를 올리기 전에, 일렉트론의 구조부터 알아야 한다
나도 제대로는 모르지만 그래도 이번 프로젝트를 하면서 머리에 올려둔 구상정도는 풀어보려 한다
뭐가 제일 사진으로 보기 좋게 되어있을까 해서 찾아보다 저런 사진이 있더라..
일단 일렉트론이 기동을 하면 main process로 로직을 시작한다, 이 로직은 앱의 설계도, 메인 로직등이 포함된다
main이 초기화될 시에 설계도에 해당하는 render process도 같이 실행된다
여기서, 우리가 추가적으로 봐야 할 점은 render process와
main process사이에서의 통신도 IPC가 활약해야 한다는 점이다
https://runebook.dev/ko/docs/electron/tutorial/context-isolation
Electron - Context Isolation 사전 로드 스크립트와 Electron의 내부 로직이 웹사이트 webContents와 별도로
Documentation Contributors History
runebook.dev
통신에 IPC가 끼는 이유는 두 영역이 분리되어 돌아가는데
분리되는 이유는 위와 같다, 스택 오버플로우나 가끔 깃에 돌면서 일렉트론 앱을 보면
contextisolation:false를 먹여놓은 앱들을 많이 보았는데..
굳이..?라는 생각이 많이 든다
일렉트론 설계하는 사람들이 괜히 저 기능을 만든 것도 아니고
default값을 true로 둔 것에는 이유가 있다 생각하기도 하고..
여하튼 이러한 분리된 상황에서도 ipcMain, ipcRenderer를 사용한
양방향 통신을 구현해야 하는 게 보안적으로 맞지 않을까 한다
여하튼, 서론이 길다 조금 더 직설적으로 프로젝트의 구조를 설명한다면 아래와 같다
https://www.electronforge.io/templates/typescript-+-webpack-template
사진이 상당히 조잡한데, 말로 풀자면
MAIN이 초기화될 때, PRELOAD와 RENDERER를 거친다
이 두 개를 거치며 PRELOAD에서는 IPC 모듈의 초기화 등 프로젝트에 필요한 로직을 거치며
RENDERER에서는 해당 앱의 화면을 뿌려준다
그럼 우리가 할 일 render상태의 index.js를 REACT의 js로 잡아주면 만사 ok라는 뜻이다
Electron-forge
Getting Started - Electron Forge
If you used the create-electron-app script before during Forge 6.0.0-beta, we recommend you uninstall the package globally before running the command again.
www.electronforge.io
일렉트론의 세팅을 아주 깔쌈하게 바로 시작해 주는 놈이다
이번에는 이놈을 사용하여 프로젝트 세팅을 시작해보려 한다
일단 홈페이지의 typescript + webpack template로 시작하자
https://www.electronforge.io/templates/typescript-+-webpack-template
Webpack + Typescript - Electron Forge
yarn create electron-app my-new-app --template=webpack-typescript
www.electronforge.io
사실 vite로 해도 상관이 없긴 한데 ts를 따로 설정해야 하니.. 귀찮기도 해서 그냥 ts가 딸려있는 템플릿으로 시작한다
npm init electron-app@latest testingapp -- --template=webpack-typescript이렇게 testingapp폴더에 init이 완료되었다면 폴더로 들어가서 npm start를 실행하여 앱이 잘 뜨는지 확인해 보자
아주 잘 뜬다
이제 리액트를 여기다 올려보자
React 추가
이것도 공식 홈페이지에 있는 방식이지만, 17 버전으로 설명되어 있다..
방법은 동일하나 진입점의 main.ts의 템플릿을 살짝 바꿔보자
먼저 리액트부터 깔아주자, 폴더 안의 터미널에서
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom이렇게 리액트를 싸악 깔아주자
그리고 앞서 설명한 renderer에 앱을 탑재하기 위하여 선행될 작업들을 실행해 보자
먼저 src/index.html로 진입한다
그럼 대충 기본 코드가 있을 텐데 아래와 같이 리액트가 탑재될 body에 id를 추가해 준다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body id="app"></body>
</html>두 번째로는 tsconfig에서 jsx도 허용해줘야 한다
tsconfig으로 가서 아래와 같이 설정해 주자
{
"compilerOptions": {
"jsx": "react",
"target": "ES6",
"allowJs": true,
"module": "commonjs",
"skipLibCheck": true,
"esModuleInterop": true,
"noImplicitAny": true,
"sourceMap": true,
"baseUrl": ".",
"outDir": "dist",
"moduleResolution": "node",
"resolveJsonModule": true,
"paths": {
"*": ["node_modules/*"]
}
},
"include": ["src/**/*"]
}다음 스탭으로는 react를 위한 파일 설정이다 index.ts옆에 main.tsx를 하나 만들어주자
그리고 main.tsx에 탑재될 App.tsx를 하나 만들어주고 두 파일에 아래와 같이 입력하자
먼저 App.tsx
// App.tsx
import React from 'react'
const App = () => {
return (
<>
<span>HELLO</span>
</>
)
}
export default App다음으로는 main.tsx
//main.tsx
import { createRoot } from 'react-dom/client';
import React from 'react';
import App from './App';
createRoot(document.getElementById('app')!).render(
<App />
);
마지막으로 main.tsx를 렌더링 할 renderer에서 해당 파일을 붙일 수 있게끔 import 해준다
renderer.ts로 이동하여 아래와 같이 내용을 바꿔주자
//renderer.ts
import './main';
// main.tsx의 경로를 입력해주자
이러면 설정이 끝이다
다시 터미널에서 npm run start로 앱을 실행시켜 보자
이곳에서의 순서는
위와 같이 renderer의 main.tsx가 탑재되고
main.tsx는 index.html의 <body id="app"> 부분에 App.tsx를 렌더링 하여 탑재한다
이와 같이 쉽게 react와 일렉트론, typescript까지 한방에 올려보았다
나머지 리액트 설정은 쌩 리액트 설정과 비슷하게 진행하면 된다
최근에 일에 찌들어 살면서 vue만 하다보니 지루한 코딩의 나날이었는데
이렇게 새로운걸 해보니 매우 재미있다 ㄲㄹㄹ
여하튼, 다음은 Nestjs와 간단한 MVC패턴에 해당하는 로직을 짜보자
'프로그래밍 > 환율 앱' 카테고리의 다른 글
| 실시간 환율 데스크톱 앱 - electron에서 dotenv를 사용해보자 (0) | 2023.08.25 |
|---|---|
| 실시간 환율 데스크톱 앱 - nestjs로 스케쥴러를 사용해보자 (0) | 2023.08.21 |
| 실시간 환율 데스크톱 앱 - 일렉트론 앱을 만들어보자 (0) | 2023.08.16 |