Category Archives: [VUE3/TYPESCRIPT]가위바위보 게임 만들기

[Vue3/Typescript] 가위 바위 보 게임 만들기 – 5. Electron 적용

개발을 하다 보면 만들어 놓은 프로그램을 데스크앱으로 만드면 좋을 거 같다는 생각이 드는데 이걸 도와주는 프레임워크가 있다. https://www.electronjs.org/ 위의 프레임워크로 굴직한 프로그램들이 많이 제작되었다. 사용법이 관심이 든다면 한 번쯤 https://www.electronjs.org/docs/latest/ 공식 문서를 읽어보면 좋을거 같다(필자도 다 보진 않았다 ㅎㅎ). 여기선 간단하게 여지껏 만든 프로젝트를 데스크앱으로 어떻게 변환하는지 알아보겠다. ● package.json main, author, build 속성을 추가하였다. 그리고

Read More

[Vue3/Typescript] 가위 바위 보 게임 만들기 – 4. 배포하기

이번글에서는 지금까지 개발한 소스를 github를 이용해서 배포하는 방법을 공유하고자 합니다.  https://github.com/ github는 개발자들의 놀이터 같은 느낌을 주는 사이트입니다. 저는 그저 소스 저장소 용도로만 사용했었는데 사실은 더 많은 기능을 제공하고 있습니다. 그중에서 프런트엔드 호스팅 서버로서의 기능과 git action을 통한 ci/cd 방법을 간략하게 다루고자 합니다. 1. git action 위처럼 .github/workflows 폴더 아래에 main.yml파일을 만든다 main.yml name: rock

Read More

[Vue3/Typescript] 가위 바위 보 게임 만들기 – 3. 게임만들기

이제 제목과 같은 게임을 만들어보자. https://www.youtube.com/watch?v=rhZpF8H66RI&list=PLZzSdj89sCN38KeadQVtiha8gZ-KGpTOC 먼저 이번 소스는 위의 영상에서 소개하는 내용을 Vue3/TypeScript 환경에 맞게 컨버팅 한 것이다. 소스의 흐름은 위와 동일하니 한 번쯤 위의 영상을 보고 온다면 더 쉽게 이해가 될 것이다. 개인적으로 뷰 처음 접했을 때 해당 채널의 영상들이 많이 도움이 되어서 초심자들에게 추천하는 채널이다. ● main.vue <script setup lang=”ts”> import {

Read More

[Vue3/Typescript] 가위 바위 보 게임 만들기 – 2. 플러그인 설치 및 세팅

일반적으로 vue에서 개발 환경을 구성할 때 axios, store, router 등을 필수로 구성을 합니다. 이번 글에서는 이러한 플러그인들을 설치는 방법들을 정리하고자 합니다. 특히 store가 기존에는 Vuex를 사용해서 구성하였는 Vue를 만든 Evan You가 pinia를 더 추천하기에 이 플러그인으로 구성하도록 하겠습니다. 1. 플러그인 설치 위와 같은 명령어로 필요할 플러그인들을 설치합니다. 각 플러그인들을 간단히 소개하자면 아래와 같습니다. axios: Promise 기반

Read More

[Vue3/Typescript] 가위 바위 보 게임 만들기 – 1. 프로젝트 만들기

Vue3, TypeScript를 공부하고자 작은 개인 프로젝트를 만들어 나가면서 여기에 기록을 정리하고자 합니다. 환경구성은 Vue3, TypeScript, Vite, Pinia를 사용하여 플젝을 만들고 다 구현이 되면 github에 action을 통해서 자동 배포되도록 할 예정입니다. 끝으로 electron을 통해서 데스크톱 앱으로 만들예정입니다.  이 글에서는 프로젝트의 환경을 구성하는 부분부터 시작하겠습니다.  프로젝트 만들기 npm init vite 프로젝트이름 –template vue-ts 명령어로 Vue3, Typescript, vite가

Read More