[내일배움캠프 2일차] _ 개인공부(REST API, 프로젝트 9일차 - setDoc vs addDoc)

1. REST API 관련 내용 정리를 마쳤다.
2. 파이어 베이스에 대한 이해를 돕는 문서를 참고해 어제의 의문을 해결했다.

[오늘의 학습 키워드]

#REST API #FIREBASE 사용법

---

[학습 내용 정리]

• REST API

https://devhippo.tistory.com/58

REST API와 RESTful API

 

• 가계부 프로젝트

https://firebase.google.com/docs/firestore/manage-data/structure-data?hl=ko&_gl=1*whupdu*_up*MQ..*_ga*MTI2MjMwMzY4My4xNzM5ODU5Mjkw*_ga_CW55HF8NVT*MTczOTg1OTI5MC4xLjAuMTczOTg1OTI5MC4wLjAuMA..

데이터 구조 선택  |  Firestore  |  Firebase

파이어 베이스의 구조 및 사용법에 대해 잘 정리된 문서를 찾아서 읽었다.

1. 파이어 베이스에 대한 이해도를 높이고 문제없이 하위 컬렉션을 생성했다.

//유저 등록
const userDoc = doc(db, "users", name);
await setDoc(userDoc, { name, pin });
//데이터를 저장할 유저 문서의 하위 컬렉션 생성 (빈 문서)
const accountDoc = doc(collection(db, "users", name, "account"));
await setDoc(accountDoc, {});
const expenseDoc = doc(collection(db, "users", name, "expense"));
await setDoc(expenseDoc, {});
const incomeDoc = doc(collection(db, "users", name, "income"));
await setDoc(incomeDoc, {});
const transferDoc = doc(collection(db, "users", name, "transfer"));
await setDoc(transferDoc, {});

2. 로그인한 유저의 account 하위 컬렉션에 계좌명과 잔액을 저장하도록 했다.

 

3. 보안 및 코드 재사용을 위해 파이어 베이스를 연동하는 별도의 자바스크립트를 생성했다.

<script type = "module">
        //파이어 베이스 연동 js import
        import { db } from "./firebaseConfig.js";
        import { collection, doc, setDoc, addDoc, getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
</script>

 

API를 이용해 데이터를 주고 받는 걸 하고 싶었는데 그건 파이어 베이스를
좀 더 능숙하게 사용하게 된 후에 도전해보려고 한다.

---

[학습하며 겪었던 문제점]

1. setDoc와 addDoc의 차이

기능	setDoc	addDoc
문서 ID 설정	직접 지정 가능	자동 생성
덮어쓰기	가능	불가

유저 이름으로 문서 ID를 설정하려고 하는데 addDoc을 사용했더니 오류가 발생해 조금 해맸다.

setDoc은 특정 데이터를 바로 가져오기 쉬워서 특정 키로 데이터에 접근할 때 사용하는 것이 좋다.
addDoc은 where로 검색해야 하는 대신 대량의 데이터를 추가할 때 편리하다.

---

[ 내일 학습 할 것 ]

1. 개인소개 웹 페이지 어떻게 향상시킬지 고민 후 구현
2. 나머지 인풋그룹에 버튼 연결, 데이터 저장
3. 데이터 불러와서 표로 그리기!