1. 개발 과정

1. 기획

프로그램 설명

키워드와 주기를 설정하면, 주기마다 해당 키워드가 모니터 화면에 나타난다.

프로그램을 만들게 된 배경

“어깨 펴”, “목 뒤로 해”, “감사한 거 1가지 떠올려”, “웃어”, “잡생각 버려”, “속도 빨리해”, “모니터 볼 때 눈깜빡여”.

항상 내가 매일 일기를 쓰며 이래야지, 이래야지 하고 항상 잊는 것들이다. 이러한 것들을 책상에 써놔도 안본다. 모니터만 보지, 다른 데를 안본다. 이런 것들을 주기적으로 띄어주면 어떨까?라는 생각에서 시작되었다.

앱스토어, 크롬 확장 프로그램 다 찾아봐도 없다.

명언을 주기적으로 알림 보내주는, 혹은 정해진 시간에 습관 알림을 보내주는 서비스는 많다. 그런데, 내가 원하는 것은 ‘일정 시간 마다’ 반복적으로 보내주는 것이다.

“자세를 바로 앉으세요”알림을 보면 사람은 그 때 그걸 보고 바로 앉지 않을까? 전부터 생각했던 것지만, 정말로 큰 필요성을 느끼고 있다. 맨날 잊는다.

사용자

매 번 머리에 새기려 해도, 자꾸 잊고 원래 모습으로 돌아가는 것을 한 사람들

기술 스택

• 크롬 익스텐션? 크롬 브라우저는 항상 틀어놓는다. 개발을 할 때도 구글링을 하든, 깃헙에 들어가든 항상 띄어놓는다.
• 그냥 프로그램?
• React 이용한 프레임워크로 찾아봐야겠다.
• electron으로 결정

개발

1) BoilerPlate

https://github.com/electron-react-boilerplate/electron-react-boilerplate template를 사용했다. 기술스택은 TS+React+Electron에 Jest, Test Library, Eslint, Webpack가 모두 설정되어 있어 사용하기 편할 듯하다.

2) 알람 띄우기

main>main.ts는 Node 서버 환경, renderer > App.tsx는 브라우저환경이다.

위 에러로 알아보았을 때, electron은 electron프로그램 위에 React웹 브라우저를 띄운 형식임을 알 수 있다. (물론 나중에 공식문서로도 깊이 있게 작동 원리를 읽어봐야겠다)

// src/main/main.ts
import { Notification } from 'electron';
function showNotification() {
  new Notification({
    title: NOTIFICATION_TITLE,
    body: NOTIFICATION_BODY,
  }).show();
}
setInterval(showNotification, 1000);

실행이 너무나 잘된다. 1초마다 알림이 온다.

3) 사용자로부터 원하는 알림 메시지 입력받기

4) 입력받은 메시지를 localStroage에 저장하기

const handleButton = useCallback(
  (e) => {
    e.stopPropagation();
    HOBBY_LIST.forEach((hobby) => {
      setLocalStorage(hobby, hobbyState[hobby]);
    });
  },
  [hobbyState],
);

상태관리는 useState로 했다. localStorage에 각 입력값을 저장한다.

5. localStorage에서 저장한 메시지 가져오기

mainWindow.webContents
  .executeJavaScript('({...localStorage});', true)
  .then((localStorage) => {
    const { hobby1 } = localStorage;
    showNotification({
      title: '습관 알림',
      body: hobby1,
    });
  });

6. 시간 설정

7. 제출 > 대기 중 화면

8. tailwindcss 적용

https://blog.saeloun.com/2023/02/24/integrate-tailwind-css-with-electron/

9. 윈도우의 최소 크기 설정

// main.ts
const createWindow = async () => {
  // ..
  mainWindow = new BroswerWindow({
		minWidth: 650,
    minHeight: 400,
  })
}

10. 개발자 모드 끄기

참고 : https://github.com/electron/electron/issues/6879#issuecomment-639635907

// main.ts
const createWindow = async () => {
  // ..
  mainWindow = new BroswerWindow({
	// ..
		webPreferences: {
      devTools: isDebug,
    },
  })
}

11) 아이콘 설정

1. 아이콘 만들기 : GPT
2. 아이콘 테두리 둥글게
3. png to icns : https://cloudconvert.com/

12) build

내가 사용한 electron-react-boilerplate는 build에 대한 패키지가 모두 설치되어 있고 스크립트 또한 작성되어있다. 그래서, npm run package만 입력하면 된다. window용인 exe는 작성되어 있지 않아 스크립트를 추가해주었다.

1. mac용 빌드

   "package:mac": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish always && npm run build:dll",

2. window용 빌드

   "package:win-ia32": "electron-builder --win --ia32",
   "package:win-x64": "electron-builder --win --x64",

13) AWS S3에 업로드하기

위에서 빌드한 프로그램을 그래도 github에 올리면 위와 같이 에러가 발생한다. 이 파일들을 업로드하면 깃허브에 더이상 push하지못한다는 무시무시한 이야기를 한다. 그래서 바로 cancel을 누르고 다른 프로그램 업로드할 방법을 강구했다.

1. S3 버킷 생성

2. 빌드한 파일 업로드

   

3. bucket 권한 설정

   • 버킷 정책
     1. 버킷 정책 편집

13) Web 배포

익숙한 Next.js 프레임워크 + Vercel 호스팅 서비스를 이용했다. 다음에는 꼭 AWS를 이용해서 배포를 해봐야겠다.

14) Web > GA 설치

내가 전에 Next.js 13버전 GA설치한 글을 보고 5분 만에 설치를 완료했다. ㅎㅎ

4. Reference

bookmark

bookmark