반응형 Develop24 vue progress bar 만들기 안녕하세요. 오늘은 start 버튼을 누르면 progress bar가 차오르는 것을 만들어 보려 합니다. (아래 그림 참조) 게임을 만들거나 로딩 시간등에 사용하면 좋을것 같습니다. 코드만 있으면 되는 분들은 아래 codepen 사이트에서 소스만 긁어 가시면 됩니다 https://codepen.io/makegametogether/pen/oNENoQy Vue Simple progress bar ... codepen.io Progressbar 주요 코드 설명 start stop 전체 적인 vue 구성입니다. 두 개의 버튼과 progress bar로 이루어져 있습니다. 이때 각 버튼은 progress bar를 시작 및 멈추는 역할을 하고 있습니다. progress bar에 대한 css 입니다. progress.. 2022. 5. 1. html 카카오톡 공유 api 개발하는 방법 안녕하세요 개발자 망고 입니다. 오늘은 제가 밸런스게임 웹 페이지를 만들고 그걸 공유할 방법이 필요해서 카카오톡 공유 api를 사용해서 테스트를 해봤는데. 기능이 적용하기 어렵지 않고 잘 동작하는건 확인했습니다. 하지만 사람들이 공유를 잘 누르지는 않더라구요...ㅠㅠ 암튼 카카오톡 공유 api 사용하는 방법을 post 해보겠습니다. 1. 목표 위와 같은 아이콘을 만들고 카카오 아이콘을 클릭했을때 아래과 같이 공유하는 화면이 뜨도록 하는게 목표 입니다. 2. 카카오톡 버튼 만들기 사실 중요한 부분은 아닙니다. 어떻게든 버튼을 만들고 그것을 클릭했을 때 함수가 실행 되도록만 하면 됩니다. 아래 코드는 위 이미지에 대한 코드 입니다. (언어는 vue로 작업했기 때문에 click에 대한 부분은 변.. 2022. 4. 28. [vuejs] vue multi page build vue는 기본적으로 spa 프로그램이지만 실제 사용할때는 페이지를 분리해서 사용해야 될 때가 있습니다. 예를 들어 로그인 페이지등을 분리하는 경우등이 있을 것 같습니다. 아무튼 그 방법을 아래에서 살펴 보도록 하겠습니다. Vue Multi page 만들기 목표 이 페이지의 목표는 아래와 같이 두 개의 html 파일을 만들어 - xxx.com - xxx.com/plusminus 두개의 주소로 접속하게 하는 것입니다. vue.config.js 수정 module.exports = { pages: { default: { entry: 'src/main/main.js', template: 'public/index.html', filename: 'index.html' }, plusminus: { entry: 'src.. 2022. 3. 6. [Nodejs] Nodejs 로 Firestore에 정보 저장하기(Firebase 연동) Firestore에 정보 저장한 모습 및 주요 코드 이 페이지의 목표는 아래와 같이 nodejs를 이용해서 아래와 같이 firebase에 data를 저장하는것입니다. firebase및 node 프로젝트의 연동 방법에 대한 설명을 아래에 자세히 설명합니다. 갈 길이 급하신 분들을 위해 nodejs의 주요 코드는 아래와 같습니다. 단순히 Firestroe에 연결하고 데이터 하나를 삽입하는 코드입니다. var admin = require("firebase-admin"); var firestore = require("firebase-admin/firestore"); var serviceAccount = require("./mango-xxxxxxxxxxxxxxxxxx.json"); admin.initializeA.. 2022. 2. 25. 이전 1 2 3 4 5 6 다음 반응형
