일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 노개북
- WIL
- ux
- HTTP요청
- 콘솔 manifest
- manifest에러
- 삽질일지
- CND
- chart.js 반응형
- 노마드코더
- manifest error
- vue chart.js
- 리액트 라우터 돔 에러
- section3 회고
- 북클럽
- react-router-dom v.6
- 인쇄 css
- UI/UX 분석
- 에러 마지막줄
- yarnrc.yml
- 경우의 수 줄이자
- 도넛 차트 가운데 글자
- chart.js fillText
- UI
- Section2회고
- Manifest 에러
- stackoverflow-clone회고
- section1회고
- 리액트 라우터 버전 에러
- Firestore_Data_Types
- Today
- Total
FE
[CND-Project] Firebase Firestore Data types에는 Map이 있다! 본문
CND Project에서 삽질 1
1. 왜 Firebase였나
CND에서 코인 모의투자를 위해서 유저별 투자 정보를 담을 데이터베이스가 필요했다.
FE 3명이 만드는 프로젝트라 백엔드 코드를 모르더라도 사용할 수 있는 툴이 필요했다.
= Firebase(No-SQL) CRUD 메소드 사용
2. Firebase를 담당하게 됐다...
Next.js를 사용하면서 페이지 단위로 개발을 나누게 됐다.
나를 제외한 두분은 회원가입, 로그인 기능을 하신 적이 있어서 내가 회원가입, 로그인 파트를 맡게 됐다.
사실 이 부분은 복잡한 상태가 있거나 하지 않아서 얼마 걸리지 않았다. 금방 끝나버려서 할 것도 없었다.
또 Firebase에 대한 지식은 0이었지만 써보고 싶기도 했어서 담당하게 됐다.
3. Firestore에서 하게 된 삽질은 Data types🐟
간단히 데이터를 표시하자면
코인 : 금액, 자산 : 금액
이런 형식의 키, 값을 보관할 수 있는 자료가 필요했다.
당연히 객체를 생각할 수 밖에 없다.
처음 Firestore를 접했을 때 콜렉터랑 필드 만드는 부분이 코드를 짜지 않아도 UI로 직접 입력해서 확인할 수 있는 구조였다.
왜 삽질을 하게 됐냐면 객체 타입을 입력하려고 타입을 봤는데 원시 타입들만 보였다.(???)
그래서 이 원시 타입으로 어떻게 데이터 구조를 잘 만들 수 있을까하고 새벽까지 삽질을 했었다.
4. 삽질은 해결했는가?
그렇다.
새벽까지 고민을 했는데 너무 복잡한 형식이 나오게 됐다.
그래서 다음날에 팀원들에게 SOS를 요청했다. 이 구조 괜찮은지 다른 좋은 방법이 있는지 집단 지성을 믿었다.
먼저 짜놓은 구조를 설명하려고 Firestore의 필드를 입력하고 있었는데 팀원분께서 밑에 데이터 타입 더 있는 것 같다고 하셨다.
보니까 Map이 있었다... 진짜 충격적
너무 간편한 UI여서 코드 짜기 전에 빠르게 타입 파악하고 테스트를 하고 데이터 구조를 생각해 봐야겠다고 한 게 땅을 더 파게 만들었다.
문서 보니까 데이터 타입 설명도 잘 돼 있었다.
사실 데이터 타입 부분 드래그해서 오버플로된 부분 타입만 봤어도 1~2일은 아낄 수 있었을텐데...
조금 더 꼼꼼함이 필요했지 않았나
📌 간단하게 객체 리터럴로 만든 객체와 Map의 차이를 알아보자
JS에서 객체의 키에는 string과 Symbol만 들어올 수 있다.
Map은 키에 문자열 아니어도 모든 자료형이 쓰일 수 있다.
'삽질일지' 카테고리의 다른 글
[Chart.js + Vue (+ TypeScript)] 반응형, 도넛 차트 가운데 글자, typescirpt 사용 시 options type에러 해결 (1) | 2023.12.17 |
---|