강디너의 개발 일지

목적 Vue.js를 사용하면서 web push를 사용하고 싶다. Firebase를 사용해서 web push 시스템을 만들고 싶다. 다음 사이드 프로젝트에서 사용할 것이다. 모바일팀에서 firebase를 이용해 푸시 시스템을 쓰고 있는데, '언젠가... 웹에도 적용할 수도 있을 것 같다'라는 말을 듣고... 연습 삼아... Firebase setting 필요 모듈 (npm install -g) firebase-tools window 경우에는 cmd를 권한 있는 창으로 키셔야 합니다. 프로젝트 root에 firebase를 초기화해줍니다. 자세한 설치는 여기서 설명 Firebase console 프로젝트 설정에서 firebase cloude messaging 설정을 찾을 수 있습니다. firebase clou..

목적 firebase database 특정 데이터를 '조건'에 맞춰 페이징 + 정렬하고 싶다. - group/showGroup 아래의 데이터들을 likes/count가 높은 수 대로 맞춰서 정렬하고 싶다. firebase database 생김새 아래 코드는 group/showGroup 아래 likes/count에 대해서 정렬하는 코드입니다. 하지만 정렬만 하는 기능일 뿐 페이징을 하지 못합니다. firebase database 기본 쿼리에서는 페이징 기능을 따로 지원하지 않기 때문에 자체적으로 만들어야 합니다. // group/showGroup 아래 likes/count 에 대해서 정렬 export function getOpenGroup() { return firebase.database().ref('g..

목차 Firebase storage 다루기 Firebase resize images 사용해보기 1. Firebase storage // storage.js import * as firebase from 'firebase/app'; import 'firebase/storage'; // 파일 전체 목록 부르기 + url 가져오기 export async function getThumbnail(dealiName) { const { items } = await firebase.storage().ref(`thumbnail/${dealiName}`).listAll(); let thumbnaills = []; items.map((i) => { const { fullPath } = i; thumbnaills.push({..

1. Create Firebase database 쓰기에는 set 과 push 가 있습니다. set 를 사용하면 지정된 위치에서 하위 노드를 포함하여 모든 데이터를 덮어씁니다. 키 값이 따로 없으며 지정된 위치에 바로 저장됩니다. 만약 하위에 데이터가 있다면 지워지고 덮어쓰여집니다. firebase.database().ref('status/lounge').set({ status: data.status, playTime: data.playTime, videoName: data.videoName, }); push 를 사용하면 데이터베이스의 데이터 목록에 추가합니다. 목록에 새 노드를 푸시할 때마다 데이터베이스에서 고유 키(예: music////)를 생성합니다. firebase.database().ref(`m..

목차 1. Firebase 배포 2. Firebase 로그인 권한이 있는 터미널에서 Firebase login 명령어를 입력하시고 구글 로그인 합니다. 로그인을 성공하면 아래와같은 페이지가 뜹니다. Firebase init 설정상에서 public 폴더 사용할꺼냐(디폴트) 해서 Y 눌렀더니 나중에 배포했을 때 빌드된 파일을 찾지 못했습니다. firebase.json public을 dist로 변경 빌드가 된 Vue 프로젝트가 dist 에 저장되기 때문에 설정을 수정해야함 Firebase deploy 무료로 호스팅 해주는 것을 볼 수 있습니다 서비스워커도 잘 돌아가는 것을 볼 수 있습니다. 서비스 워커란? 서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹페이지와는 별개로 작동하며, 웹페이지 또는..

기획 PWA를 이용한 위치 저장 어플리케이션 만들기 - Vue 이용한 페이지 제작 - Firebase 를 이용한 호스팅 + DB 저장 목차 1. vue-cli4 Setting 2. Firebase Setting 1. vue-cli Setting 설정 중 PWA 설정 도와주는 옵션이 있습니다. 설정해주시면 편합니다. 2. Firebase Setting Window에서 firebase-tools 를 설치하려면 까다롭습니다. 글로벌로 설치해서 사용하라고 적혀있는데, Window에서는 권한이 없다고 막혀버립니다. 그래서 찾아본 결과, 독립형 실행 프로그램을 다운로드 후 설치해서 firebase-tools 를 이용하거나 nvm-window를 설치해서 버전 관리해서 사용하는 방법 두 가지입니다. https://gi..

Firebase 이용해서 Hosting, Database 사용하기 ! https://translator-c4119.firebaseapp.com/ Vscode 플러그인에서 데이터를 받은지... 한달 ?하지만 데이터가 많이 쌓이지 않는다... 테스트 할때 보니 170개 가량... 쥬륵 만들었던 과정을 끄적끄적 해보겠습니다. 우선가이드 - https://firebase.google.com/docs/hosting/quickstart?authuser=0 요약하자면node 를 설치하고 firebase-tools 를 설치하고 firebase login 하고 firebase init 으로 시작합니다. 그리고 firebase deploy 를 하면 배포가 됩니다. - 끝... 호스팅은 생각보다 쉽습니다. (데이터베이스 연..

번역기 플러그인을 만들고... vscode 를 쓰는 사람들은 대부분 ? 개발자니깐... 어떤 영어를 번역하는지 보고싶었다. 보려면 DB가 필요한데... 항상 켜져있어야하고... 흐음.. 하다가 찾은게 파이어베이스 !vscode 가 electron 기반이라고 듣고 electron 은 node 기반이니깐 firebase node 쪽을 써보면 되겠다 ! 싶어서 개발 착수 ...! 가이드를 보며 열심히 따라 했다. node 쪽은 admin(관리자) 로 개발 해야하며, 가이드가 너무 잘나와있어서 막 오랜시간 삽질을 안했다. 여기서 serviceAccount 는 구글에서 json 파일을 준다. 그곳에 API 키라든지 토큰이라든지 등등.. 중요한건 다들어가있다. db에 translate 라는 큰 가지를 만들고그 아래..

Firebase(파이어베이스) 새 프로젝트 만들기 목적 : vue + firebase 연동 1. 구글 로그인 https://firebase.google.com 2. 콘솔로 이동 3. 프로젝트 만들기 위치를 대한민국으로 바꿔주세요. 4. 초기 화면 Vue + firebase 를 이용한 웹을 만들 예정입니다.