🧶 𝗪𝗲𝗯/Firebase
![[memo-app] Firebase 7.데이터 수정과 삭제](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcFw78h%2FbtruqEHcTTw%2FYNuGbj1zPnXwbTukQvYDI0%2Fimg.png)
[memo-app] Firebase 7.데이터 수정과 삭제
데이터 수정하기 선택한 메모 수정하기 if (selectedKey) { // key가 있다면 메모 update let memoRef = database.ref( "memos/" + userInfo.uid + "/" + selectedKey ); // 메모 내용 let memo = { txt: txt, updateDate: new Date().getTime(), }; // 메모 업데이트 memoRef.update(memo); } 만약 선택된 메모가 수정이 된다면 해당 내용을 데이터 베이스에 다시 저장합니다. 하지만 수정이 되었다고 화면에서 곧바로 변경되지 않습니다. 화면에 수정된 내용 갱신하기 // 메모 수정 function on_child_changed(data) { console.log(data.key..
![[memo-app] Firebase 6.데이터 저장과 출력](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzaLYt%2FbtrubMTHMNr%2FtRk3kKKeq2j6HV3XVMvra0%2Fimg.png)
[memo-app] Firebase 6.데이터 저장과 출력
생성되는 메모 데이터 let txt = $(".textarea").val(); // 본문 let createDate = new Date().getTime(); // 작성일 $(".textarea").val() 메소드를 사용하여 textarea 클래스의 내용 값을 가져올 수 있습니다. createDate 변수에는 타임 값을 넣도록 하겠습니다. (추후에 올바른 생성일을 넣는 코드 포스팅을 하도록 하겠습니다.) // 새로운 메모 내용 let memo = { txt: txt, createDate: createDate, }; 데이터의 저장될 메모의 json 은 다음과 같은 형태를 띄고 있습니다. 새로운 키 생성하기 // 새로운 랜덤 키 생성 var newMemoKey = database.ref().child("m..
![[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..
![[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 버전이 제대로 설치되었습니다. ✌️..