2024. 6. 20. (목) 슈퍼코딩 부트캠프 신입연수원 Day 16 (중간보고)

 

1. 중간 보고 양식(월~금요일)

• TO-DO LIST : 오늘의 할 일 작성
• 배운 내용 요약 정리 : 강의 수강 후 배운 내용을 나만의 방식으로 정리

1. Firebase : 구글에서 제공하는 개발 플랫폼.

- 서버 없이 DB, 인증, 이미지 업로드, 배포 등 기능 제공

- 무료 제공 범위가 넓음

- 실시간 DB지원

- 빠르게 애플리케이션 제작 가능

- 소규모 프로젝트에 적합

 

1-1. Prototype, POC(Proof of Concept),  MVP(Minimum Viable Product) 등을 만들때 주로 사용

 

2. firebase 시작

- firebase 설치 : npm install -g firebase-tools
- 로그인 : firebase login
- 초기화 : firebase init
- 배포 : firebase deploy

 

2-1 명령어 script 추가

#package.json에 추가

"deploy" : "npm run build && firebase deploy"

 

3. Realtime database  초기화

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object

const firebaseConfig = {
  // ...
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "파이어베이스 DB 주소",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Realtime Database and get a reference to the service
const database = getDatabase(app);

 

3-1. firebase DB 가져오기 

import { getDatabase } from "firebase/database";

const database = getDatabase();

 

3-2. firebase DB에 쓰기 (CRUD 중 Create)

import { getDatabase, ref, set } from "firebase/database";

function writeUserData(userId, name, email, imageUrl) {
  const db = getDatabase();
  set(ref(db, 'users/' + userId), {
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}

 

3-3 firebase DB 읽기 (CRUD 중 Read)

import { getDatabase, ref, onValue } from "firebase/database";

const db = getDatabase();
const starCountRef = ref(db, 'posts/' + postId + '/starCount');
onValue(starCountRef, (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});

 

3-4 firebase DB 수정 (CRUD 중 Update)

import { getDatabase, ref, child, push, update } from "firebase/database";

function writeNewPost(uid, username, picture, title, body) {
  const db = getDatabase();

  // A post entry.
  const postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  const newPostKey = push(child(ref(db), 'posts')).key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  const updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return update(ref(db), updates);
}

 

3-5 firebase DB 삭제 (CRUD 중 Delete)

- 해당 데이터 위치의 참조에 remove() 함수 호출

- set() / update() 함수를 이용해 null 값으로 변경

 

4. Svelte 는 다시 배워야겠다.... 저번에 했을때는 오류가 발생 안했는데 다시하니까 오류생기네

 

 

#슈퍼코딩, #1:1관리형부트캠프, #백엔드, #backend, #백엔드공부, #개발공부, #백엔드개발자 #취준일기, #취준기록, #취뽀, #빡공, #HTML/CSS, #javascript, #react , #java, #spring