본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


토이 프로젝트(TOY PROJECT)

일렉트론 랜덤 번호 추출기(윈도우 번호 추첨)

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2022. 11. 25.

예전에 작업한 일렉트론(electron)으로 개발된 윈도우 어플리케이션 입니다.

preload 방식으로 구현되어 있으며 따로 데이터베이스를 사용하지는 않습니다.

버튼을 눌러서 번호를 추첨할 수 있습니다.

이미 추첨한 숫자는 회색으로 표기가 되고, 추첨하지 않는 1개의 숫자를 추첨 합니다.

 

버튼을 눌러서 번호를 추첨할 수 있습니다.

이미 추첨된 번호는 회색으로 표기가 되며, 새로이 추첨된 번호는 파랑색으로 표기가 됩니다.
아래 사진처럼 추첨된 번호가 나타나게 됩니다.

추첨하면 파랑색으로 표기됩니다.

 

설정 및 이력관리에서 히스토리를 보거나, 삭제하거나, 다운로드 받거나 초기화 할 수 있습니다.
가장 마지막에 추첨한 목록이 위에 나타나게 됩니다.

올해 연초에 만들었었죠..

 

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파일을 볼 수 있습니다.

win-unpacked는 압축이 되지 않는 결과물 입니다. 여기 생성된 exe파일만 써도 됩니다.

 

# 만약 오류가 난 경우

1) 일렉트론 빌더 패키지가 설치되어있지 않는 경우 입니다.

npm 또는 yarn 명령어를 통해 electron-builder 를 설치하여 줍니다.

 

2) 일렉트론 빌더 패키지가 설치되어 있긴한데 package.json 위치가 틀린경우 입니다.

electron-builder 패키지 위치를 dependencies에서 devDependencies로 옮겨줍니다.

요런 오류가 난 다면,
package.json 내부에서 위치를 바꿔 줍니다.

 

위 내용에 사용되는 소스코드는 제 깃허브에서 확인할 수 있습니다.

https://github.com/TaeSeungRyu/sample/tree/main/%EC%B6%94%EC%B2%A8%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8(electron) 

 

GitHub - TaeSeungRyu/sample

Contribute to TaeSeungRyu/sample development by creating an account on GitHub.

github.com

 

프론트 기능은 바닐라와 Jquery를 사용하였습니다.

용량이 50메가 정도 되더 분할한 파일은 아래 첨부합니다.(악성코드 없습니다!!)

DrawingLots 1.0.2.7z.001
19.53MB
DrawingLots 1.0.2.7z.002
19.53MB
DrawingLots 1.0.2.7z.003
14.67MB

 

기타 궁금한점 또는 문의사항은 언제든 연락 주세요!

 

 

반응형
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글