생각하며 글을 쓰는 사람

오늘은 파이어베이스에 글과 이미지를 업로드 해보겠습니다. 1. 먼저 글을 업로드 해보겠습니다. 텍스트입력을 받을 html 을 작성합니다. 그 다음에는 html에 담겨진 정보를 javascript로 읽고, 파이어베이스 함수 add에 담아주면 됩니다. document.querySelector('.blog__submit').addEventListener('click', function () { //querySelector를 이용해서 blog__submit을 가져오고 //addEventListener를 걸어줍니다. //즉 버튼을 클릭시 function 안을 실행하라는 의미입니다. const blogContent = { title: document.querySelector('.blog__title').value,..

파이어베이스 파이어스토어(firestore)에 데이터를 저장하는 방법에 대해 알아봅니다. 만약 blog 라는 컬렉션을 만들고 문서(도큐먼트) 이름은 content1로 하고싶다면 1. 기본적으로 저장하는 방법은 아래와 같습니다. const db = firebase.firestore(); db.collection('blog').doc('content1').set( { title : '첫번째 블로그 글', user : userInfo, content : '블로그의 글 ~~~~', date : new Date(), } ) 내용은 객체의 형태로 저장하면 저장하면 됩니다. 2. 만약 문서(document) 이름을 따로 저장하기가 귀찮으면, 자동으로 부여되게 할 수 있습니다. const db = firebase.fi..

파이어베이스 콘솔에서 파이어스토어(Firestore)에 데이터를 저장하는 방법과 자바스크립트로 불러오는 방법을 이전 글에서 공부를 했습니다. 이제는 데이터를 불러와서 콘솔창에 찍어볼 수 있습니다. 자 그렇다면... html에 데이터를 보내줘서 웹사이트에 보이도록 해야하지 않겠습니까? 어떻게 할까요? 일단 user 컬렉션에 있는, 두명의 유저를 불러와서 html 에 삽입을 해보겠습니다. 유저의 정보는 email 과 name 으로 되어 있습니다. 1. 일단 유저의 정보를 넣을 수 있는 빈 박스를 넣어줘야 합니다. 클래스명은 myContent로 해줍니다. 2. 유저 정보를 읽어와서 반복문을 돌려줍니다. const db = firebase.firestore(); db.collection('user') .get(..

파이어베이스에서 새로운 프로젝트를 만든다. >> 콘솔에 들어가서 그냥 진행하면 됩니다. 그리고 터미널 창에서 아래의 명령어를 치고 firebase-tools를 설치를 해야합니다. 글로벌로 설치가 되는 것이므로 한번만 하면 됩니다. firebase-tools는 콘솔창에서 파이어베이스 프로젝트를 실행하고 설치하고 배포를 할 수 있도록 도와주는 창지 입니다. 구글에 있는 파이어베이스와 내 컴퓨터가 상호작용을 할 수 있도록 도와주는 것이죠!! $ npm install -g firebase-tools 터미널창에서 로그인이 안되어 있다면, 로그인을 하시면 됩니다. 로그인을 해야 뭔가를 할것 아니겠습니까? 아래의 명령어를 치면 여러가지 화면이 뜨고 로그인을 할 수 있게 됩니다. 차근차근 진행을 하시면 됩니다. $ f..