실시간 환율 데스크톱 앱 - electron에서 dotenv를 사용해보자

오늘은 비교적 간단한 내용이다

 

이제 슬 배포할 시간이 다가왔고.. 애당초 업데이트를 차츰차츰 해가는 게 목적인 프로젝트이니..

 

백엔드는 미리 서버에 올려두고 이제 데이터는 라이트세일 서버에서 쭉 받기로 결정하였다 

그러기 위해서는.. 몇 없는 fetch신호의 주소를 이제 내 서버주소로 바꿔야 한다는 것인데 

 

노출하기 싫으니... env파일을 만들어서 설정해 보자 

 

dotenv설치 및 폴더 설정

일단 프로젝트 폴더로 이동해서 dotenv를 설치해 주자

pnpm i dotenv
// npm i dotenv

 

그러고 나서 프로젝트 최상위에 .env파일을 작성하고 안에 내용을 테스트하기 위해서 아래와 같이 작성한다

ENV_TEST=TEST SUCCESS!

 

dotenv를 프로젝트에 설정

일단 프로젝트가 시작되면 방금 만들어둔 ENV_TEST를 불러오기 위한 초기화가 필요하다

 

electron 같은 경우 저번 포스팅에서 설명했듯이

2023.08.16 - [프로그래밍/ㄴ 환율 앱] - 실시간 환율 데스크톱 앱 - 일렉트론 앱을 만들어보자

실시간 환율 데스크톱 앱 - 일렉트론 앱을 만들어보자

main process에서 앱 진입을 시작한다

 

entry포인트는 자신의 프로젝트 설정에서 보면 어딘가에는 있을 테니..

이런식의 entry파일

잘 찾아서 여기서 dotenv를 import 해주자

 

현 프로젝트에서는 index.ts가 entry이며 여기서 dotenv를 설정해 주었다

import { BrowserWindow, Tray, app } from 'electron';
import { initWindow } from './module/Main';
import { initTray } from './module/Tray';
import { config } from 'dotenv'
let win: BrowserWindow;
let tray: Tray;

if (require('electron-squirrel-startup')) app.quit();

app.dock.hide()
app.on('ready', () => {
    config()
    win = initWindow(win);
    tray = initTray(win);
});

(모듈을 잘근잘근 쪼개놔서 index.ts가 그리 길지 않다)

 

이런 식으로 dotenv에서 config을 import 해오고

app이 탑재되는 시점에 config을 실행시켜 준다

 

그럼 앱은 dotenv를 가진

상태가 된다

 

dotenv를 사용해 보자

지금은 main process 안에서 axios로 데이터로 가져오는지라 바로 테스트가 가능했다

const getInformation = (tray: Tray) => {
    axios.get(process.env.API_URL + '/last').then(res => {
        console.log(process.env.ENV_TEST);
        const data = res.data
        const savedList = getListConfiguration()
// 생략..

 

이와 같이 1초마다 도는 로직에 아래와 같이 첨부하고 앱을 실행해 보았다

 

1초마다 잘 뽑아주는 것을 볼 수가 있다

 

아주 간단한 env이지만 막강한 느낌이다 

 

아, 또한 이 env를 쓴다고 browser설정에

contextisolation:false

를 추가하고 쓰는 경우가 있는데,  우리는 이러지 말고 제대로 ipc통신을 이용하여 앱 설정을 해보자 

 

다음 포스팅은 본격적으로 ipcmain통신을 설정하고 사용해 보자