프론트엔드의 꽃, 리액트 - 4주차 개발일지( firebase )

 

 

GD프로젝트 리액트 기초

프론트엔드의 꽃, 리액트 4주 차를 무난히 끝을 냈다.

4주 차에선 firebase 위주로 실습을 하였다.

프론트가 백 요소도 다뤄보니 재미가 있었다.

 

목차

1. 새롭게 배운내용

2. 결과물

 

---

1. 새롭게 배운 내용

---

 

1주 차에 서버리스를 배웠었다.

서버리스는 서버나 스토리지 같은 물리적인 하드웨어를 구입하지 않아도

AWS 같은 클라우드 시스템에서 서버를 빌려오는 것이다.

 

이런 클라우드 서비스에는 IaaS(인프라형 서비스), PaaS(플랫폼형 서비스), SaaS(소프트웨어형 서비스) 등등 있는데

 

우리가 배운 Firebase는 

BaaS(Backend as a Service)가 된다.

Firebase는 데이터베이스 서버 제공, 소셜 서비스 연동, 파일 시스템 등을 API 형태로 제공해준다.

 

또한 Firebase의 데이터베이스는 NoSql DB를 제공한다.

 

NoSql은 Not Only SQL이다

 

NoSql은 SQL이 아닌 것들임으로써

기존 SQL과 차별화된 속성을 지니고 있다.

NoSql은 고정된 테이블 스키마가 필요하지 않다.

 

왼쪽은 SQL의 테이블이며 오른쪽은 NoSql의 테이블이다.

테이블안에 각각의 필드가 모든 애트리뷰트에 해당하는 단일 값을 가지는 투플들로 이루어진 게 SQL이라면

NoSql에는 테이블에 일정한 애트리뷰트가 없다.

그저 각각의 필드는 "key" : "value"의 형태로 가지고 있으면 된다.

마치 Json파일처럼 말이다.

 

또한 각각의 필드마다 갖고있는 속성들이 달라서 조인 연산을 할 수 없다.

 

이렇게 일정한 틀 없이 수평적으로 확장이 가능하므로 테이블의 정규화 작업이 필요 없고

SQL보다 데이터베이스 설계하는 데 있어 쉬워졌다는 장점이 있지만,

일관성이 깨지는 시점이 생기므로 일관성이 중요한 작업에선 쓰이지 않는다.

 

 

 

 

Firebase 구조는 다음과 같다.

여기는 테이블이 컬렉션이라는 단어로 쓰인다.

하나의 프로젝트 안에 여러 개의 컬렉션(테이블)이 있고

그 컬렉션 안에는 여러 개의 필드(튜플)가 있다.

 

이 필드들은 각각의 고유 id를 가지며 필드의 속성들은

"key" : "value" 형태로 있다.

필드의 속성들은 제각각 다를 수도 같을 수도 있다.(그래서 일관성이 깨지는 부분이 있다.)

 

이러한 필드들을 Firebase의 제공하는 API를 사용해

데이터베이스의 기본 기능 4가지인 CRUD를 사용할 수 있다.

 

const List = [
        { question: "민트초코를 좋아한다.", answer: "O" },
        { question: "강아지와 고양이 중 고양이를 더 좋아한다.", answer: "X" },
        { question: "이번 정보처리기사 실기시험에 합격했다.", answer: "O" },
        { question: "프론트엔드가 꿈이다.", answer: "O" },
        { question: "친구가 탕수육소스를 부어버리면 화를 낸다.", answer: "X" },
];

const listDB = firestore.collection("list");

listDB.doc("quiz1").get().then((docRef) => console.log(docRef));	// quiz1 필드 하나 조회하기
listDB.add({question:"ABlue는 피자에 파인애플 올라가있으면 못참는다", answer: "O"})   // 데이터 추가하기
List.map((v,i) => {												// list 콜렉션에서 여러 개의 필드를 설정하기
     listDB.doc("quiz" + (i+1)).set({question: v.question, answer: v.answer});
})
listDB.doc("quiz1").update({answer: "X"});   // 데이터 수정하기
listDB.doc("quiz1").delete()       // 데이터 삭제하기

 

4가지 CRUD는 다음과 같다

 

또한 2가지의 규칙이 존재하는데

 

1. update함수로 속성을 수정하면 그 필드 안에 다른 속성들은 변함없다.

2. 함수 입력 인자 값에 들어있는 자신이 지정한 컬렉션이나 필드 id가 DB에 없으면 오류가 일어나지 않고 새로 추가하여 해당 기능을 실행한다.

 

이 2가지 규칙 덕분에 관리가 더욱 쉬워진다.

 

 

 

 

---

2. 결과물

---

 

결과물

새롭게 적용한 내용 : progressBar,

windows.scroll()함수(모든 유저들의 등수와 점수표시창에서 자신의 등수에 바로 스크롤을 넘겨주는 기능) 및

FireBase 적용

 

점점 완성되어가는 것이 보인다.

이제 데이터들을 firebase에 연동한 다음 AWS로 배포하면 될 것 같다.

 

 

코드 보러 가기 [클릭]