아직 Firebase 에 대한 이해 수준이 낮은 편이라서 Vue에 별로 신경을 못쓰고 있다. 그래서 일단은 프로젝트를 어느 정도 마무리 하고 이후에 진행하려고 마지막 글을 쓰게 되었다. 일단 하고 싶었던 것은 Firebase cloud functions 로 만든 API를 VueJS 에서 사용하여 데이터를 노출시켜주고 입력하는 기능을 만들고 싶었다. 이번 글은 전반적인 설명 보다, 소감을 위주로 작성해야 할 것 같다. (아직 모두 정리가 된 것이 아니라서) 만들면서 크게 신경써서 만들었던 스펙들은 이렇다. 보안상의 문제가 없는지 확인(예전 AWS EC2 요금 폭탄의 추억) 데이터의 입력은 Firebase database (cloud firestore) 를 사용 최대한 RESTful API 형태로 개발 (H..

정확히는 VueJS 개발을 학습하고 있지만 백엔드 포함을 목표로 잡아왔더니 Firebase도 함께 학습을 해야하는 상황이 되었다. 이번에는 Functions 라는 기능을 활용하여 웹 API를 개발해보려고 한다. 구체적으로 데이터 연동을 하거나 트리거를 만드는 것 까지는 아직 진행을 못해봤고, HelloWorld를 표시해주는 정도만 수행해봤다. Firebase로 백엔드를 이렇게 개발하면 되겠구나 정도를 이해하는 정도이다. 먼저 이를 사용하려면 최소한의 요건들을 갖추고 있어야 한다. nodejs npm firebase 이후에 firebase-tools 라는 것을 설치하면 된다. 이렇게 되면 필요한 것들은 대략 다 준비가 된 셈이다. firebase login 을 통해서 구글 계정 로그인이 필요하다. (fir..

이제 Vue를 살짝 벗어나서 백엔드를 개발해야하는 상황이 되었다. 대략적인 화면 구성은 나왔으니 구체적으로 인증과 권한, 데이터를 다루는 작업들을 시작해야하는데 직접 백엔드를 만들기 보다 Google firebase 를 활용하여 진행하려 한다고 이야기를 했었다. firebase를 사용하는 이유는 AWS 말고 다른 클라우드 서비스를 사용해보고 싶었던게 그 이유이고 그중에 GCP(google cloud platform) 이면 좋겠다고 생각했는데, 얻어걸린 셈이다. 콘솔창에 접근한 후에 프로젝트 추가를 통해서 위 그림과 같은 항목을 입력한다. 그리고 프로젝트 만들기 버튼을 누르면 너무 빠르게 앱 자체를 만들 수가 있다. 이 후에 만들어진 앱 이름으로 Project overview 화면에 도착하는데, 메뉴의 모..

대강 있는 것들을 복붙하면서 만든 페이지 이므로 디자인 같은건 Bootstrap 이 대애충 해주고 있습니다. 이번에 bootstrap-vue를 추가로 사용하면서 연습을 하고 있는데, 본격적으로 wepack 을 통한 vue 파일 빌드와 컴포넌트의 구조화를 적극 활용하기 위해서 다음과 같은 형태로 파일을 구성했습니다. 뭐 꼭 이렇게 까지 해야하나 싶지만... main.js (시작) └ App.vue (기본 vue) └ VuePetList (사진 목록) └ VuePetForm (사진 등록) 일단 사진 목록에 대한 표현의 방법은 굉장히 쉬웠습니다. 거기에 bootstrap 을 사용하는 방법이 함께 녹아져 있어서 신경써야 할 것들이 많기는 하지만 데이터를 바인딩하는 방법 자체가 굉장히 간단했습니다. 새로운 것들에..

가장 먼저 시작한 것은 Vue에 좀 친숙해지기 위해서 화면부터 구성해보기로 했다. 보통의 방법으로 마크업을 만들어서 화면을 구성하는 것 자체는 크게 문제가 안된다고 생각했는데 Vue의 룰에서 화면을 구성을 하는 것은 조금 더 이해가 필요했다. 그런데 또 다른 형태의 Vue의 개발도 있어서 조금 놀랐다. 먼저 Vue의 한글화 공식 홈페이지의 튜토리얼을 보면 아래와 같이 되어있다. {{ message }} var app = new Vue({ el: '#app', data: { message: '안녕하세요 Vue!' } }) cdn에 있는 vue js 라이브러리를 선언하고 이후에 마크업과 스크립트를 이용하면 필요한 화면을 구성할 수 있다. 그런데 vue-cli 를 통해서 생성한 프로젝트 안에는 조금 다른 형태..

먼저 만들고 싶은건 갤러리 형식의 반려 동물의 사진을 공유 하는 곳이다. 대략 아래와 같은 형태가 될 것 같다. 사진과 간단을 소개를 등록하는 화면과 사진의 목록과 소개 내용을 살펴보는 곳 이렇게 두 가지 정도의 기능을 제공하면 될 것 같다. 조금 더 구조화 해서 표현을 하면 대략 이런 모습 이겠다. 로그인 구글 계정으로 로그인하기 사진 목록 목록 표시 정렬 사진/글 등록 (로그인 필수) 등록하기 파일 업로드 (사진 유형, 필수 등록) 반려 동물 이름과 간략한 사진 소개 글 수정하기 업로드된 사진은 수정 불가 반려 동물 이름과 사진 소개를 수정할 수 있음 삭제하기 등록된 사진을 제거 일단 구현을 하려면 백엔드가 갖춰져야 할거 같으니 일단 UI 수준에서만 대략 구성하는 것을 먼저 해야겠다. 그리고 백엔드는..