VUE (5) 썸네일형 리스트형 Vue 학습하기 ⑤ - Firebase 를 이용한 Google 연동 로그인 만들기 이제 Vue를 살짝 벗어나서 백엔드를 개발해야하는 상황이 되었다. 대략적인 화면 구성은 나왔으니 구체적으로 인증과 권한, 데이터를 다루는 작업들을 시작해야하는데 직접 백엔드를 만들기 보다 Google firebase 를 활용하여 진행하려 한다고 이야기를 했었다. firebase를 사용하는 이유는 AWS 말고 다른 클라우드 서비스를 사용해보고 싶었던게 그 이유이고 그중에 GCP(google cloud platform) 이면 좋겠다고 생각했는데, 얻어걸린 셈이다. 콘솔창에 접근한 후에 프로젝트 추가를 통해서 위 그림과 같은 항목을 입력한다. 그리고 프로젝트 만들기 버튼을 누르면 너무 빠르게 앱 자체를 만들 수가 있다. 이 후에 만들어진 앱 이름으로 Project overview 화면에 도착하는데, 메뉴의 모.. Vue 학습하기 ④ - bootstrap-vue로 입력창 만들기와 이미지 미리보기 대강 있는 것들을 복붙하면서 만든 페이지 이므로 디자인 같은건 Bootstrap 이 대애충 해주고 있습니다. 이번에 bootstrap-vue를 추가로 사용하면서 연습을 하고 있는데, 본격적으로 wepack 을 통한 vue 파일 빌드와 컴포넌트의 구조화를 적극 활용하기 위해서 다음과 같은 형태로 파일을 구성했습니다. 뭐 꼭 이렇게 까지 해야하나 싶지만... main.js (시작) └ App.vue (기본 vue) └ VuePetList (사진 목록) └ VuePetForm (사진 등록) 일단 사진 목록에 대한 표현의 방법은 굉장히 쉬웠습니다. 거기에 bootstrap 을 사용하는 방법이 함께 녹아져 있어서 신경써야 할 것들이 많기는 하지만 데이터를 바인딩하는 방법 자체가 굉장히 간단했습니다. 새로운 것들에.. Vue 학습하기 ③ - vue 파일로 작업하기 그리고 디버깅 가장 먼저 시작한 것은 Vue에 좀 친숙해지기 위해서 화면부터 구성해보기로 했다. 보통의 방법으로 마크업을 만들어서 화면을 구성하는 것 자체는 크게 문제가 안된다고 생각했는데 Vue의 룰에서 화면을 구성을 하는 것은 조금 더 이해가 필요했다. 그런데 또 다른 형태의 Vue의 개발도 있어서 조금 놀랐다. 먼저 Vue의 한글화 공식 홈페이지의 튜토리얼을 보면 아래와 같이 되어있다. {{ message }} var app = new Vue({ el: '#app', data: { message: '안녕하세요 Vue!' } }) cdn에 있는 vue js 라이브러리를 선언하고 이후에 마크업과 스크립트를 이용하면 필요한 화면을 구성할 수 있다. 그런데 vue-cli 를 통해서 생성한 프로젝트 안에는 조금 다른 형태.. Vue 학습하기 ② - 무엇을 어떻게 만들것인가? 먼저 만들고 싶은건 갤러리 형식의 반려 동물의 사진을 공유 하는 곳이다. 대략 아래와 같은 형태가 될 것 같다. 사진과 간단을 소개를 등록하는 화면과 사진의 목록과 소개 내용을 살펴보는 곳 이렇게 두 가지 정도의 기능을 제공하면 될 것 같다. 조금 더 구조화 해서 표현을 하면 대략 이런 모습 이겠다. 로그인 구글 계정으로 로그인하기 사진 목록 목록 표시 정렬 사진/글 등록 (로그인 필수) 등록하기 파일 업로드 (사진 유형, 필수 등록) 반려 동물 이름과 간략한 사진 소개 글 수정하기 업로드된 사진은 수정 불가 반려 동물 이름과 사진 소개를 수정할 수 있음 삭제하기 등록된 사진을 제거 일단 구현을 하려면 백엔드가 갖춰져야 할거 같으니 일단 UI 수준에서만 대략 구성하는 것을 먼저 해야겠다. 그리고 백엔드는.. Vue를 처음 체험하다 웹 개발을 처음 시작할때 jQuery 버전이 1.4 정도 였던 것 같다. 지금하고 무슨 차이가 있냐고 물어본다면 그냥 jQuery 버전이 올랐다는 점이다. 그 밖에는 마크업을 만들때 아무렇게나 했다면 반응형 웹을 지원하며, 비교적 디자인이 예쁜 Bootstrap 을 사용한다는 점이다. 그래서 늘 뭔가 변화가 없는 이 웹 개발이 늘 지겨웠지만 jQuery 로 어지간한 웹 개발은 다 가능하여서 딱히 불만이랄 것도 없었다. 그러다 jQuery를 안쓰자고 다짐했던게 2014년 정도였다. (아래 글) 그렇게 새롭게 시작한게 AngularJS 였는데 나에게는 굉장히 센세이션이었다. 늘 jQuery 기반의 개발을 하면서 '재사용' 에 대한 것이 항상 스트레스 였다. (하지만 Element Selector는 정말 편-.. 이전 1 다음
