예전에 작업한 일렉트론(electron)으로 개발된 윈도우 어플리케이션 입니다.
preload 방식으로 구현되어 있으며 따로 데이터베이스를 사용하지는 않습니다.
버튼을 눌러서 번호를 추첨할 수 있습니다.
버튼을 눌러서 번호를 추첨할 수 있습니다.
이미 추첨된 번호는 회색으로 표기가 되며, 새로이 추첨된 번호는 파랑색으로 표기가 됩니다.
아래 사진처럼 추첨된 번호가 나타나게 됩니다.
설정 및 이력관리에서 히스토리를 보거나, 삭제하거나, 다운로드 받거나 초기화 할 수 있습니다.
가장 마지막에 추첨한 목록이 위에 나타나게 됩니다.
main.html파일에는 url값이 존재 합니다.
해당 값은 openweathermap이라는 사이트에서 제공받는 날씨관련 api 입니다.
해당 사이트에 가입하여 key값을 받아 적용하면 날씨가 하단부에 표출되게 됩니다. (http://api.openweathermap.org)
package.json에 빌드와 실행을 위한 명령어가 존재 합니다.
start로 시직하는 명령어는 개발을 위해 프로그램을 동작시키는 명령어 이며,
build로 시작하는 명령어는 실제 동작하는 exe 파일로 프로젝트를 생성하여 줍니다.
"scripts": {
"start": "electron .",
"build:osx": "electron-builder --mac",
"build:linux": "npm run build:linux32 && npm run build:linux64",
"build:linux32": "electron-builder --linux --ia32",
"build:linux64": "electron-builder --linux --x64",
"build:win": "npm run build:win32 && npm run build:win64",
"build:win32": "electron-builder --win portable --ia32",
"build:win64": "electron-builder --win portable --x64",
"build": "electron-webpack && electron-builder --win --x64",
"build2": "electron-builder --win --x64"
}
내 컴퓨터가 윈도우 기반의 64비트 컴퓨터라면, npm run build:win64 또는 yarn run build:win64 명령어를 입력하여 실행하면 됩니다.
그러면 프로젝트의 dist 디렉토리에 만들어진 exe파일을 볼 수 있습니다.
# 만약 오류가 난 경우
1) 일렉트론 빌더 패키지가 설치되어있지 않는 경우 입니다.
npm 또는 yarn 명령어를 통해 electron-builder 를 설치하여 줍니다.
2) 일렉트론 빌더 패키지가 설치되어 있긴한데 package.json 위치가 틀린경우 입니다.
electron-builder 패키지 위치를 dependencies에서 devDependencies로 옮겨줍니다.
위 내용에 사용되는 소스코드는 제 깃허브에서 확인할 수 있습니다.
프론트 기능은 바닐라와 Jquery를 사용하였습니다.
용량이 50메가 정도 되더 분할한 파일은 아래 첨부합니다.(악성코드 없습니다!!)
기타 궁금한점 또는 문의사항은 언제든 연락 주세요!
'토이 프로젝트(TOY PROJECT)' 카테고리의 다른 글
리액트 익스프레스 게시판 (React, Express typescript, file drag and drop) (0) | 2022.06.18 |
---|---|
리액트 익스프레스 웹소켓 (React, Express typescript, websocket) (0) | 2022.05.27 |
댓글