0. Firebase
웹서버를 대신 만들어줌
서버역활을 하는 컴퓨터가 데이터베이스에 저장하는 일을 대신해줌
<빌드>
회원인증기능 쉽게 만들어줌
NoSQL데이터베이스 사용가능
일반하드
웹호스트
서버에 돌릴 코드
무료
장점
1. Html css js만 알아도 서비그 제작 가능
2. Databass 콘솔같은거 다루기 쉬움
3. 프로젝트가 커지면 서버/DB 스케일업 자동으로 해줌
4. DB 데이터 알아서 리얼타임으로 싱크해줌
단점
비쌈, aws보다 20% 비쌈
만들 기능
1. 상품진열화면
2. 상품상세페이지
3. 글작성기능
4. 채팅기능
1. Firebase 설치
https://online.codingapple.com/unit/firebase-installation-with-npm/
Script 코드 복붙
React 나 vue 사용할 경우
Npm install firebase
-> Node.js 설치
Firebase console에 들어가서 프로젝트 만들기
-> 필요한 기능 고름
로그인: 시작하기, 이메일 비밀번호 사용설정 저장
데이터베이스 : 프로덕션 테스트 중 아무거나 고르고 지역은 asia-notheast3(서울)고름
저장소(storage): 사용
Hosting: 넘어감
-> 파일 만들고 install -g firebase-tools@9.12.1
Firebase login
Firebase init
질문 답 : 1. y /2. Firestore,hosting,Storage/ 3. Use an existing project/ 4. 방금만든 프로젝트 명 고름 / 엔터 / 싱글페이지 앱? N / 깃허브 N/ 엔터
-> Index,html이 메인 페이지임. Script에서 필요한 서비스만 고르고 삭제함
-> Firebase 서버에 들어가서 프로젝트 설정에 들어감
내 앱에 Web 클릭 앱 등록에서 이름 입력 후 html파일에 SDK 복붙함
-> Firebase serve로 미리보기 가능함
(2022 수정사항) firebase tools 설치할 때
npm install -g firebase-tools@9.23.1 이걸로 설치합니다
(흔한 에러 1) 크롬 콘솔창에 firebase is not defined 라는 에러가 뜨면
- Firebase설치용
<script>들 안에 defer 이런 키워드가 있으면 지워보십시오 <script>로 firebase-app.js 파일들 가져온거 밑에 SDK를 복붙하셔야함- 코드짤 때도
<script>로 firebase-app.js 파일들 가져온거 밑에 짜셔야함 - firebase.analytics 이런코드는 보이면 지워보셈
(흔한 에러 2) firebase init 입력했는데 뭐가 안된다면
- firebase login으로 로그인부터 하십시오
- firebase console 홈페이지에서 프로젝트부터 만드십시오 그리고 Firestore, Storage 이런거 탭에서 시작하기 누르셈
2 : DB에서 게시물 무단으로 가져오기
Bootstrap 사용함
: 제공하는 css, js를 html에 입력함
Jquery cdn으로 minified버전 js파일을 복붙
Bootstrap에서 navbar 가져옴
Firebase 서버의 database에 들어감
컬렉션 만들기(폴더임) 문서(데이터)
예) product 안에 상품1안에 가격 number 1000
Database에서 가져와서 사용하기
<script>
const db = firebase.firestore();
db.collection(‘product’).get().then((결과)=> {
console.log(결과)
})
</script>에러) permissions = 읽기 권한 설정을 안해두면 생김
해결법) Firebase 서버에서 규칙 탭에 false를 true로 수정함
// 수정
<script>
결과.forEach((doc)=>{
console.log(doc.data());
})
</script>3 : 상품 업로드한거 DB에 저장 ㄱㄱ
상품 html css 만들어 둠
// 제이쿼리임
<script>
const db = firebase.firestore();
db.collection('product').get().then((결과)=>{
결과.forEach((doc)=>{
console.log(doc)
var 템플릿 = `<div class="product">
<div class="thumbnail" style="background-image: url('https://via.placeholder.com/350')"></div>
<div class="flex-grow-1 p-4">
<h5 class="title">${doc.data().제목}</h5>
<p class="date">2030년 1월 8일</p>
<p class="price">20000원</p>
<p class="float-end">0</p>
</div>
</div>`;
$('.container').append(템플릿)
})
})
</script>upload.html 파일 생성함
상품명, 가격 등 입력할 있는 폼 만들기
방법 1)
<script>
const db = firebase.firestore();
db.collection('product').doc('상품3').set({ 제목 : '변기' })
//상품3에 추가됨
</script>
방법 2)
<script>
const db = firebase.firestore();
db.collection('product').add({ 제목 : '변기' })
//자동으로 product에 파일명이 추가됨
</script>
4 : 벌써 이미지 업로드 기능
이미지는 storage에 저장 후 저장된 위치(URL)를 Database에 저장
const db = firebase.firestore();
const storage = firebase.storage();
$(‘#send’).click(function(){
var file = document.querySelector(‘#image’).files[0];
var storageRef = storage.ref();
var 저장할경로 = storageRef.child('image/' + file.name);//파일명
var 업로드작업 = 저장할경로.put(file)//업로드한 파일 JS로 찾은거
업로드작업.on( 'state_changed',
// 변화시 동작하는 함수
null,
//에러시 동작하는 함수
(error) => {
console.error('실패사유는', error);
},
// 성공시 동작하는 함수
() => {
업로드작업.snapshot.ref.getDownloadURL().then((url) => {
console.log('업로드된 경로는', url);
var 저장할거 = {
제목: $(‘#title).val(),
가격:$(‘#price’).val(),
내용:$(‘#content’).val(),
날짜: new Date(),
이미지 : url
}
db.collection(‘product’).add(저장할거).then((result)=>{
console.log(result);
window.location.href = ‘/index.html’;
}).catch((err=> {
Console.log(err)
})
});
}
);
})
Storage 규칙에서 true 바꿈
이미지가 스토리지에 추가가 안되서 2시간동안 해맸는데
알고보니 버튼 클릭시 index.html로 넘어가는 속도가 너무 빨라서 스토리지에 저장이 안되는거였음,
그래서 setTimeout(()=>window.location.href = "/index.html",500) 이 코드를 넣으니 저장잘됩니다!!!
5 : 회원가입기능은 코드 4줄컷
login.html 생성
가입기능 만들기
이메일, 비번, 이름 인풋 만들기
<div class="container mt-3">
<div class="mb-3">
<input type="text" class="form-control" placeholder="name" id="name-new">
</div>
<div class="mb-3">
<input type="email" class="form-control" placeholder="email" id="email-new">
</div>
<div class="mb-3">
<input type="password" class="form-control" placeholder="pw" id="pw-new">
</div>
<button type="submit" class="btn btn-primary" id="register">가입하기</button>
</div>회원가입 기능
<script>
const db = firebase.firestore();
const storage = firebase.storage();
$(‘register).click(function(){
var 이메일 = $(‘#email-new’).val();
var 패스워드 = $(‘#pw-new’).val();
firebase.auth().createUserWithEmailAndPassword(abc@naver.com, 123456).then((result)=>
console.log(result)
})
})
</script>uid : 유저 고유 아이디
Firebase Authentication : 로그인기능 만들기
Firestore Read : 상세페이지 만들기
지금 로그인한 유저의 정보 알아내기
수정기능 만들기 1 : 페이지 여러개 만들기
수정기능 만들기 2 : DB update 기능 숙제해설
Firestore Rules 규칙 정리
채팅기능 1 : 유저 collection & 채팅방 collection 만들기
채팅기능 2 : 채팅방 만들어오라던 저번시간 숙제
채팅기능 3 : query로 원하는 document만 가져오는 법
채팅기능 4 : 메세지 DB 저장하기 (메세지는 그냥 댓글임)
채팅기능 5 : DB변동사항 실시간 반영은
Admin 권한 & Data validation
Firebase Hosting 으로 만든 사이트 발행
Functions로 서버기능 만들기 : Functions 설치
Functions로 만드는 알림기능
