🧶 𝗪𝗲𝗯
![[memo-app] Firebase 5.데이터 출력](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbSPpXZ%2FbtruiSMdkXq%2F139dK2nMnh3cxDobnKJeik%2Fimg.png)
[memo-app] Firebase 5.데이터 출력
Document https://firebase.google.com/docs/database/web/read-and-write 웹에서 데이터 읽기 및 쓰기 | Firebase Documentation 의견 보내기 웹에서 데이터 읽기 및 쓰기 (선택사항) Firebase 로컬 에뮬레이터 도구 모음으로 프로토타입 제작 및 테스트 앱에서 실시간 데이터베이스의 데이터를 읽고 쓰는 방법에 대해 논의하 firebase.google.com 참고한 도큐먼트입니다. 저는 8버전을 사용하였습니다. 모듈 가져오기 firebase 8버전 CDN 입니다. 해당 모듈을 통해서 firebase 객체를 가져올 수 있습니다. var auth, database; var userInfo; // 데이터베이스 database = firebas..
![[to-do-app] Vue 프로젝트 생성하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbV9vJY%2FbtrtQpSFQaW%2Fh2iPMQVtyoowY1KgL0EfNk%2Fimg.png)
[to-do-app] Vue 프로젝트 생성하기
vue 를 이용하여 새 프로젝트를 생성해보도록 하겠습니다. 😆 vue 프로젝트 생성하기 1. vue-cli 설치 https://cli.vuejs.org/guide/installation.html Installation | Vue CLI Installation Warning regarding Previous Versions The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove cli.vuejs..
![[to-do-app] Vue 환경설정](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcKvvpu%2FbtrtLUECBVI%2FmiTeFki2sKu8oHyJFJmzp1%2Fimg.png)
[to-do-app] Vue 환경설정
간단한 웹 애플리케이션을 만들면서 Vue에 대해서 포스팅 해보고자 합니다. vue는 과제를 하면서 많이 써본 프레임워크이지만 항상 vuex 를 사용할 때면 설정을 하는 방법을 까먹어서 자주 강의나 만들어놨던 코드를 뒤적거리고 했습니다. 이번 기회에 확실히 복습하며 정리를 해야겠어요. 😃 https://www.inflearn.com/course/vue-pwa-vue-js-%EC%A4%91%EA%B8%89/dashboard Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex - 인프런 | 강의 Vue.js 중급 강좌 - '누구나', '쉽게', '훌륭한' 웹 어플리케이션을 만들 수 있도록 도와주는 Vue.js 활용 강좌 입니다. Vue.js 에 대한 기본적인 이해를 바탕으로 T..
![[memo-app] Firebase 4.인증 기능 구현](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbKIpQY%2Fbtrua3108PK%2FNOLiewZ5pr339zDsi8JGx1%2Fimg.png)
[memo-app] Firebase 4.인증 기능 구현
인증 기능 구현 auth 모듈 가져오기 https://firebase.google.com/docs/auth/web/google-signin?hl=ko 자바스크립트에서 Google 로그인을 사용하여 인증 | Firebase Documentation 의견 보내기 자바스크립트에서 Google 로그인을 사용하여 인증 Google 로그인을 앱에 통합하여 사용자가 Google 계정으로 Firebase에 인증하도록 할 수 있습니다. Google 로그인을 통합하려면 Firebase SDK를 firebase.google.com firebase 버전 8을 사용합니다. 모듈은 [firebase.js]에서 가져옵니다. 인증에서 GoogleAuthProvider, signInWithPopup 메소드를 가져옵니다. 구글 인증을 ..
![[memo-app] Firebase 3.설정 스크립트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbEh3oA%2FbtrufENtsEZ%2FomPSx6clHBiNGUpOuR7E2k%2Fimg.png)
[memo-app] Firebase 3.설정 스크립트
설정 스크립트 SDK 추가하기 좌측 메뉴에서 톱니바퀴를 누릅니다. [일반] 탭으로 이동하여 [SDK 설정 및 구성] 에서 CDN 을 선택하고 아래 코드를 복사합니다. public/index.html add 제일 하단부에 복사 붙여넣기를 합니다. firebase cdn firebase sdk 설정
![[memo-app] Firebase 2.로컬개발환경](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbzLAyZ%2FbtrtO8cek89%2FliCtat1h2MruzqLaPB0Kw0%2Fimg.png)
[memo-app] Firebase 2.로컬개발환경
이번에는 firebase 를 로컬에서 사용할 수 있도록 개발 환경을 설정해보도록 하겠습니다. 👊 firebase 프로젝트 생성하기 1. Node.js 설치 firebase cli 환경을 사용하기 위해서는 npm 이 필요합니다. npm 을 사용하기 위하여 Node.js 를 설치하도록 합시다. (추후에 해당 파일을 설치하는 포스팅을 올리겠습니다.) 2. firebase CLI 환경 설치 npm install -g firebase-tools firebase --version firebase cli 를 설치하도록 합시다. CLI 환경에서 firebase 기능을 사용할 수 있습니다. 위의 명령어를 입력합니다. 제대로 설치되었는지 확인하기 위해서 버전 확인을 합니다. 10.1.0 버전이 제대로 설치되었습니다. ✌️..