봉보로봉봉

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 정보를 이용..

firebase Authentication 이용해서 로그인 기능 구현하다가 안되고 자꾸 에러남 The error you provided does not contain a stack trace. 당신이 stack trace 없이 제공해줘서 나는 에러임 API key 감추려고 .env에 넣어서 했는데 그렇게 하면 오류나고 키 그대로 넣으면 오류 안남 .env파일이 문제구나하고 보니까 파일을 최상위 경로에 둬야되는데 있던 위치에 생성해서 놔뒀음 .env파일 최상위 경로로 이동하고 해결 invalid api key error in console Your API key is invalid, please check you have copied it correctly. 니 API key가 잘못됐으니까 맞게 복사했는지..