봉보로봉봉

React로 진행한 프로젝트를 중간에 Typescript로 변경하기 1 지난번에 변경하는 방법을 공부를 했는데 직업 바꾸려니 추가로 해줘야 하는 부분이 더 있어서 추가로 기록해 둔다. 기존에 vite로 환경을 구축하고 React로 진행했던 프로젝트(VITE와 Firestore를 사용했다.)를 Typescript로 업그레이드했다. 다른 타입스크립트 프로젝트를 참고하며 해결했다. 타입스크립트를 설치하고 파일 확장자를 바꾸자마자 뜨는 지독한 빨간 줄 해결하기~ 😀🤜 가장 상위 파일에 HTMLElement 붙여주기 // main.jsx ReactDOM.createRoot(document.getElementById('root')).render( ); // main.tsx ReactDOM.createRoot(doc..

지난 번에 저장한 데이터를 보여주기위해서 데이터를 가져오는 코드를 썼다. 나는 데이터 전체를 한번만 가져오면 됐기 때문에 getDocs를 사용했다. 참고 필요한 요소 import 하기 import { initializeApp } from 'firebase/app'; import { getFirestore, collection, getDocs } from 'firebase/firestore'; 파이어베이스 저장소를 불러온다. const firebaseConfig = { apiKey: import.meta.env.VITE_FIREBASE_API_KEY, authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN, projectId: import.meta.env.VITE_..

firebase 공식문서 https://firebase.google.com/docs/firestore?hl=ko Firestore | Firebase 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스를 사용해 클라이언트 측 개발 및 서버 측 개발에 사용되는 데이터를 저장하고 동기화하세요. firebase.google.com firebase 패키지를 설치한다. npm i firebase --save 데이터 저장에 필요한 요소를 import 한다. import { initializeApp } from 'firebase/app'; import { getFirestore, collection, addDoc } from 'firebase/firestore'; 프로젝트를 생성하면 나오는 config 정보를 이용..